Add Follow Me icons to your web site

Follow me on Facebook buttons?

First of all, you need to click here for the html code to get your buttons working! Actually you can use this code to assign any button to any link, once you’ve got these 4 buttons working you’ll understand how to do that. So click the link and have a good look at the code.



Important, copy and past this html into notepad and save it, don’t use word as this might auto adjust the code. Once you’ve done that it should look like this:-

I’ve highlighted the facebook link in yellow as you need to replace this with the URL from your own facebook profile page! Make sure to leave the  <td><a href=”   at the beginning and the  ” target=”_blank”> part at the end,, just replace the yellow highlight. After this do the same with all the others you want to use, the third line down is for twitter for example, the fifth line is for the you tube button.. lets just stick to the facebook one for now.

In the pic above I’ve highlighted the date in yellow, this is important as it has to match the date you insert your buttons into your wordpress media library, notice it says /2012/02 so that’s Feb 2012, so if you insert your buttons into the media library in lets say April 2013, you would have to change this date to /2013/04.

In the pic above I’ve highlighted the name of the button, notice it says, facebook-32×32.png this means its a facebook button, 32 pixeles by 32, and the last bit means it has a .png file extension. If you download buttons it’s important you get the right size, and rename them to correspond with the name in the html code. If you want bigger buttons then you need to change the html code to match the size of the button, 48×48 for example.

Ok now its time to go and get your buttons, :)

Click here

You should be able to find all sorts of buttons, make sure you can use them as some you have to pay for, just click on them and you should get the details, also make sure they are the right size! When you’ve chosen what you want, download them, now its important the name of the button matches the name in your html code so you may have to rename each button to match, most buttons are .png files but the name before that has to be exactly the same as the html code. You can change the html code to match the name and size of the button of course.

Ok now we’re ready to pull it all into wordpress, so go to your dashboard and click on Media, add new, on the left, drag and drop your buttons and save changes, your page should now look like this:-

without the yellow highlight!

Cool now go to Appearance on the left and select widgets. Grab the widget called Text on the left and drop it into the sidebar on the right, wherever you want your buttons to appear!

Click on the widget you just dropped, it should open, then copy and paste the html code into it, remember to click save at the bottom of the widget.

Now if you review your site you should have a full set of working buttons, if not, its probably either the link to your facebook page was wrong or you deleted more of the html code than you should have, or the dates or the names of the buttons  didn’t match!!!

I hope you found this post useful, feel free to comment, and share or tweet me! :)


Thesis Mechanic & Site Construction Engineer. Tom Is an enthusiastic Wordpress Thesis designer and web developer. loves coding and playing Gypsy Jazz Guitar!

  • Sydney Bunyard May 11, 2012, 10:41 pm

    I’m still learning from you, while I’m trying to reach my goals. I absolutely love reading all that is posted on your website.Keep the tips coming. I loved it!

  • admin March 11, 2012, 10:18 pm

    You’re welcome, glad you found a way with joomla! good luck with your site.

Feel free to comment!

sitemap Privacy Policy Copyright ©2014 | Powered by: