How To Add A Facebook Share Button To Your Blog

Let’s say that you want to add a Facebook share icon on your website or WordPress site. With two code snippets added to the WordPress templates and a custom image it is possible to add a Facebook share button to your website without a plugin. It is also possible to designate a custom image or your site’s logo so you control what image is displayed when your article is shared on Facebook.

Facebook provides the share button code on their Facebook widgets page.

There are a couple of options, such as the style of the button and whether or not a counter is included.

The code for the button like the one on this page is:

<a name="fb_share" type="box_count" href="http://www.facebook.com/
sharer.php">Share</a><script src="http://static.ak.fbcdn.net/
connect.php/js/FB.Share" type="text/javascript">
</script>

1. Add this code to the template where you want the button to appear. I use mine on single.php next to the title code.
2. You may need to add some styling to the button so it appears where you want it to. Because I also have the tweetmeme button I needed to float the share button to the right and give it a little bit of padding. I was lazy so instead of adding a class to the stylesheet I used some inline styling.
   

   <div style="float:right;padding-left:5px;">button here </div>

3. Upload the image or logo that you want to be used when your article is shared. The image should be no more than 100px by 100px. I’ve found that the most common reason for it not appearing is the size and you may need to make it even smaller, such as 80px by 80px. You can upload it to your media gallery or to your web directory via ftp. Make a note of the path to the image.
4. In your header.php add the following line of code before the tag.
   

   <link rel="image_src" href="http://yourdomain.com/logo.png" />

5. Be sure to change yourdomain.com/logo.png to the path and name of your own image or logo.

I’ve found that if the image doesn’t show up when you first test the share button, that it probably needs to be resized.

//alimunandar.com