How To Install Social Media Icons On Your Blog

Courtesy of Creative Commons

I have noticed that some of you have social media links/icons on your blogs and some don't. When I was gearing up to do the Buccaneer Blogfest, the hosts suggested that we have links readily available for people to follow as part of our platform building campaign. That put me on the trail to learning how to do it. I'll admit, I got incredibly frustrated. Mostly because the URL I was copying didn't work. And then in the process, the html code got altered, and then of course it didn't work.

So, I thought some of you who are thinking of adding social media links to your blogs might appreciate some hopefully easy instruction on how to do it.

First, no need to be fearful. Installing social media icons/buttons on your blog is simply a matter of copy and paste. You are not going to write html – it’s already written below. What you will be doing is copying and pasting the social media URL (i.e. your Facebook page URL) and the URL to where the social media icon is stored (i.e. Photobucket) into the html code below.


Step One

1. Find and download, or create the social media icons for your blog. Icons are readily available. You can do a google search or go to these sites: Web Design Ledger or Naldz Graphics.

2. Upload your icon images to an image hosting site. I used Photobucket after trying all day to use Picasa Web Albums where my blog photos are stored. For some reason, it didn’t like the URL’s I pasted in. It’s simple to open a photobucket account to store your icons (you will need the link to the icon/image later when you start copying and pasting into the html code.)

Step Two

3. I recommend pasting the html code below into a Word document to start out. (Once everything is copied and pasted into the Word document, all you have to do is copy it into the HTML/JavaScript on your blog. I’ll explain how later.)

4. Copy the code below into a Word document. This is enough code for four icons/links – it’s pretty easy to see that it is actually four html codes that are exactly the same. Obviously, if you need more, you just copy as many as you need. NOTE: It is okay to separate the codes by adding a line in between for easier reading. You can take out the extra line later.


<a href="insert URL/web address of where you want to be directed to here" target="_blank"><img src="insert URL/web address of the social media icon you want here"
<a href="insert URL/web address of where you want to be directed to here" target="_blank"><img src="insert URL/web address of the social media icon you want here"
<a href="insert URL/web address of where you want to be directed to here" target="_blank"><img src="insert URL/web address of the social media icon you want here"
<a href="insert URL/web address of where you want to be directed to here" target="_blank"><img src="insert URL/web address of the social media icon you want here"


  5. Choose which icon you want to appear first. I started with Facebook. Go to your Facebook account and copy the URL.

6. Then go back to the Word document and past the Facebook URL over the part of the html (between the quote marks) that says “insert URL/Web address of where you want to be directed to here”.

7. Next go to your photobucket account and go to your album. Double click on the Facebook icon to open it, then copy the HTML code over on the right (it’s a little different in that all you have to do is click on the html and you will see the word “copied” flash so you know that you’ve copied).

8. Go back to the Word document and paste the html from the Facebook icon in photobucket, over the part that says "insert URL/web address of the social media icon you want here".

9. Repeat the above instructions for each icon.

Step Three

10. Sign in to your blogger account and go to: Layout, Add a Gadget, HTML/JavaScript. In the title bar, type in the title you want to head your social media icons. Mine says Stalk Me Here, or it could say Find Me Here, Visit Me Here, or whatever you want.

11. Next, paste the html code from the Word document you created into the Content section of the HTML/JavaScript and Save.

12. Now you can go to Preview or View Blog to see if the icons look right and that they lead to the correct sites when clicked.

13. REMEMBER – if you separated the html codes earlier for easier viewing, then go back and delete the extra line. It may or may not view correctly on your blog if you don’t.

TROUBLESHOOTING:

1. It is so easy to accidently delete some of the code when you are copying and pasting. If your icons are not showing correctly, check that the html code is correct by going back to the original html and comparing it.

2. If your icons are not showing up at all, you are probably using the wrong URL (like I did when trying to use Picasa Web Album).

3. If your icons are showing, but are not in a straight line, check that the html is correct. The biggest problem (besides being unable to find the correct URL in Picasa Web Album) I had was that I accidently deleted some of the code when copying/pasting in my URL’s.

4. If html code is showing up on your actual blog by your icons, you probably copied extra code and that part needs to be deleted.

5. Sometimes during the copying and pasting, you will end up with spaces between some of the characters. This may interfere with how the icons are displayed, so you will need to delete the spaces.

I HOPE YOU FIND THIS HELPFUL! LET ME KNOW IF YOU HAVE ANY QUESTIONS OR IF I CAN HELP. I'M NO EXPERT, BUT I'VE BEEN THROUGH THE FRUSTRATION.