Adding Social Media | Life and Linda -Blog Design, Decorating, Tablescapes, Gardening

Adding Social Media

 I know there are quite a few people who want to add social media  buttons to their blog.
I thought I would write a tutorial on how to do this.
First of all, you can always find some freebie social media icons, if you are not into designing them yourself.  My next post, I will show you how to design some yourself.
These are step by step instructions with photos.
Here's some links for free ones:

 Carrie has 34 colors, so you select a color perfect for your blog. She also gives you 3 different sizes in a zip format and numerous buttons to choose from. At Carrie's blog, click on the color text you want to download. For example, I chose Glitter red.

You will see the download file
 Click open the folder, Glitter red.

Next you will see 3 folders. There are 3 different sizes
to choose from. 48px is a good size.

When you click the 48px folder open, you will see about 22 buttons in there.  That's quite a collection. 

Most people use around 5 or 6. This is what I do:

Upload your social media icons to Blogger

Create a new post and title it- Social Media files-Don't delete-Don't publish!!  You want to keep this, but don't publish it.

In your post body, in HTML mode, click insert image  ( picture icon)
Select a file, Click Choose files. Find your Social media folder and hold down your Ctrl button on your keyboard to select more than 1 file. Click the ones you want.  I chose 6 and they are highlighted in blue.

Click open. When they are downloaded. All six should be highlighted.  Click Add selected. Make sure they are blue.
 Now, stay with me....just keep following my instructions.
Ok, you have your choice of buttons in your posts now.
I am using 6, so they all show up.
Click save as Draft!  Don't publish them! Set this window aside for now. If you click compose, you show see all of your social media buttons all lined up!
Go back to your layout and open a new Javascript gadget.

 Give it a name where it says title, such as...Connect with me
or stay connected!

 Click in the Content box and copy and paste this code below into the box.

      <a href="WebsiteAddressHere"><img src="ImageDirectLinkHere"/></a>

If you are using 6 social media buttons, then copy and paste this into the box 6 times.   Look at my example.

I copied it in there 6 times, because I chose
6 icons, bloglovin, facebook, pinterest, mail, rss and google+.
Now, where it says WebsiteAddressHere is where you paste your username for each social media item. Keep the "    "  Just paste your name in the "between" Do this for every item.  For example: I will use bloglovin so I will use my bloglovin ID to put where it says "WebsiteAddressHere"


 <a href=""><img src="ImageDirectLinkHere" /></a>

Now, we need to add the social media button to where it says  "ImageDirectLinkHere"
Keep this Javascript gadget open and go back to your post you kept open or the social media buttons draft.

Click the HTML, instead of compose. The first one is Bloglovin
 <a href="" imageanchor="1"><img border="0" src="" /></a>

Copy  the blogloving social media button link and paste it where it says "ImageDirectLinkHere"
so now, it should look like:

<a href=""><img src="" /></a>

The first green link points you to my bloglovin page and the yellow link points to my blogloving button.
See my example below:

 Do this for how many social media buttons you want.
If you do it this way, all of the buttons should line up horizontally.

Ok, let's see some social media buttons....I hope this tutorial helps.
Sorry it is so long, but I wanted to break it down with photos. 
For my personal blog, I am using the pink social media buttons
 If you want to see a video tutorial on this, watch BlogaholicsDesigns on youtube.

Share on Google Plus

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.
    Your comments are welcome!


  1. Thanks Linda!! Hope you are doing well.

  2. You are such a good soul to do these tips and tutorials for those of us that are "out of it". Thank you so much, Linda- You are a gem- xo Diana

  3. Hi Linda.
    I can see now how much work go's into building a blog. Thanks so much for helping us one more time you are deeply appreciated from one blogger me.
    God Bless.
    xxoo Diane

  4. You are so sweet to do this! I'll have to try it when I have about a week. :)

  5. Linda, you are the best! Thank you for taking the time to help us with these tips. xo

  6. You're so helpful with your tutorials, Linda. However, I'm still squeamish about messing things up. I love it best when you do it, Fairy Blogmother!!! xo

  7. Good evening beautiful Linda! Thank you so much for coming over to visit! I know I came by here the other day and thought I left a comment! You are so good to aid in some of the many fun things we can do for our blogs! Like Kitty up above, I am always worried I'll mess things up, so I have a tester blog I use to experiment with!

    Your kind words are gentle to my spirit. Big hugs to you and enjoy your week! Anita

  8. Another great tutorial. I need to get into learning new skills mode. :)

  9. YAY!! I did it! Thanks so much for your tutorial and your help! You're the best :) -Bev

  10. I'm not very computer literate, so I love that went through this step-by-step and included pictures!

  11. Thanks, Linda!

    It took me a bit of figuring out, but I did it. WooHoo!!

  12. Thanks Linda, your instructions are very detailed, I will try this myself this week-end.


I so appreciate your visits and sharing your thoughts at Life and Linda.