Pimping your blog-How to add social media buttons to your blog

How to add social media buttons to your blog


The basic code is
<center><a href="http://your url"><img border="0" src=http://your image's location/></a></center>


Let's start with facebook;

Log into your Facebook account.
and go to your Profile page. 

On the bottom left hand side...under your friends lists in blue it will say ADD A BADGE TO YOUR SITE.

Click on these words.

It will ask you where you want to add the badge..select the box that says OTHER.
(If you have a facebook page and wanted to promote on your blog...select the platform you are using and it will automatically generate a widget for it and for blogger blogs, even add it with a click of a button)

Underneath it will have a box and right above it it will ask you
'Copy the code below and paste it on your website."

Copy and paste this code on word or notebook.


Here's what it will look like:
(It is alot longer but I cut the bottom half out as you don't need anything from it)

<!-- Facebook Badge START --><a href="http://www.facebook.com/pages/Adventures-at-Greenacre/129012953836683" " target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;"

The slighty larger lettering is an example of what your facebook url looks like.
 (Twitter uses your username for example; http://twitter.com/ Greenacremama)
 ( RSS feed ; http://feeds.feedburner.com/adventuresatgreenacre)

Next you will need an image for the button.

This website has great free social media buttons you can choose from;

 http://webdesignledger.com/freebies/the-best-social-media-icons-all-in-one-place

Pick the image and save it to computer.

Create a photobucket account...http://www.photobucket.com/
Then upload the image of the button you want to add to your blog.

Underneath or next to the image you see 4 different codes for that image...select the HTML CODE

This code will go in to the highlighted pink area and your facebook profile/twitter/RSS goes the green highlighted area.

<center><a href="http://your url"><img border="0" src=http://your image's location/></a></center>


For example here are my social media codes:

For Facebook
<center><a href="http://www.facebook.com/pages/Adventures-at-Greenacre/129012953836683"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-fb_64.png"/></a></center>


For Twitter
<center><a href="http://twitter.com/greenacremama"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-twi_64.png"/></a></center>


For RSS feed
<center><a href="http://feeds.feedburner.com/adventuresatgreenacre"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-rss_64.png"/></a></center>

Next go to your design page and add an HTML widget..paste the code and save.

 Repeat the same steps with Twitter, RSS and whatever other social media you would like to add to your blog.

Please note that these quotes are not (fancy) quotes but the <straight quotes.>. If you copy and paste the basic code , they may try to turn themselves into (fancy) ones. If you get an error when you try to add this code, this could be why. Try this same code but remove all of the quotes and it should work.


If you like the web toolbar at the bottom of my blog...check out wibiya toolbar  it is free and add`s all of these social media buttons and more .

Cheers!