Add a Facebook Share Button to Blogger
Blogger Tips

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 /><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 /><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 /><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 /><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




- How To Add A Floating Sticky Footer Bar In Blogger
I have seen that many of those using toolbars such as Wibiya have had to remove it because of interfering with the performance of some scripts like Scriptaculous and Prototype, while others have chosen to remove these scripts just to continue using the...

- Add Floating Social Media Sharing Buttons To Blogger
The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks. This floating social bar has the following...

- How To Add Facebook Like/fan Box To Blogger
A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. Once subscribing (by pressing the like button), visitors will receive your most recent...

- How To Create A Facebook Fan Page For Your Blog
What is a Facebook Page? Sometimes referred to as a "Fan Page," a Facebook page is a single page where you can share & talk about any particular subject you want: a celebrity, a blog or whatever your heart desires. Think of it as a one-page meeting...

- Add Social Bookmarking Buttons Near Adsense Ads
The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive. Adding the social bookmarking buttons at the top...



Blogger Tips








.