Sunday, May 9, 2010

Add a Facebook Share Button to Blogger

An easy way to have your readers share your articles on Facebook is to add a Facebook Share Button to your Blogger blog (Blogspot blog). It only takes a few minutes to put a Facebook Share Button on your Blogger blog.

Sharing your content on Facebook is an excellent way to attract many more visitors to your Blogger blog. By adding a Facebook Share Button to Blogger you will allow your content to be shared with all the friends of your blog visitor through their Facebook account.

When a visitor to your blog clicks on the Facebook Share Button Facebook collects post details like your blog name, post title and the first few lines of the content including the images and other media.

The Facebook Share Buttons look and act very similar to the Twitter Retweet buttons by Tweetmeme.

Steps to Put a Facebook Share Button on Blogger (Blogspot)
There are 2 different Facebook Share Button styles to choose from: a large button and a compact button. The following codes will place the Facebook Share Button at the top of the post only on the post page. If you wish to have the button appear on the homepage as well you will need to remove the if statement.

<b:if cond='data:blog.pageType == "item"'>
Facebook Share Button Code
</b:if>
  1. Login to Blogger
  2. At the Dashboard go to Layout >> Edit HTML
  3. Check the Expand Widget Templates box on the right
  4. Using CTRL + F find this code: <data:post.body/>
  5. Copy and paste the following codes depending on your choice of Facebook Share Button style immediately before the line <data:post.body/>

    Note: If you have trouble finding <data:post.body/> alternatively you can paste the code directly below:
    <div class='post-header-line-1'/>

    Large Facebook Share Button (right aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:right;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Large Facebook Share Button (left aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:left;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Compact Facebook Share Button (right aligned)

    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:right;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->


    Compact Facebook Share Button (left aligned)


    <!-- Facebook Share Button -->
    <b:if cond='data:blog.pageType == "item"'>
    <div style='float:left;padding:4px;'>
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
    </div></b:if>
    <!-- End Facebook Share Button -->

  6. Click Save
  7. View a blog post to see your new Facebook Share Button in action

Summary
Today you have learned how to add a Facebook Share Button to your Blogger blog. The Facebook Share Button will allow your readers to share your content which will attract new visitors to your blog. Adding a Facebook Share Button to your post pages only takes a few minutes.



Related Links
Add a Follow Me Twitter Icon Button to Blogger
How to Remove the Blogger Navbar
How to Change the Color of the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
Set the Date of a Blogger Post to a Future or Past Date
How to Remove Blogger Labels Counter
Making Money From Banners with Blogger
How to Get More Adsense Clicks with Blogger
Blogger Guide to Google Adsense Placement
Easy Ways to Put Banners on Blogger



Subscribe to Blogspot Blogger Guide Full RSS Feed

Subscribe to Blogspot Blogger Guide by Email

Print this post

Add To Google BookmarksStumble ThisFav This With TechnoratiAdd To Del.icio.usDigg ThisAdd To Reddit

Bookmark and Share

4 comments:

  1. That is great post. It's very nice. Thanks for shearing your ideas.

    ReplyDelete
  2. Thank you for the information. Great job you have done and keep it up.

    ReplyDelete
  3. Thanks for the tutorial..
    thanks for sharing..

    ReplyDelete
  4. Nice article, with lots of great ideas! Thanks for sharing.

    ReplyDelete