Installing Facebook Share Button.

Encourage your Facebook Fan to share your Blog page to achieve giant traffic from it.It will also help you to gain PR as Social media is also one component of PageRank(PR).After installing this share button just visitor need to click on that button to share the page.So Facebook Share button should be place where Visitor sight can reach properly.

Lets install Facebook Share Button.

The matter is that where do you want to install share button.Is it below the post or below the post header or in widget.You can do it as your wish.

Facebook Share Button Codes.

The Codes of Facebook Share button is given below(Only favorable for Blogger not for Wordpress)

<!—Facebook Share Button by Bloggerrounder.blogspot.com -–>
<div id="br-fsb"><a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script></div>
<!—Facebook share button ends –->

Just you need to place the code where ever you like.Its good for blogger because it will works on all type of page as it detect the page URL automatically.How ever you can replace box_count like this

Facebook Share Button	Share button code
	box_count
	button_count
	button
	icon

Remember count will only show after the content is shared otherwise it will not be shown.

Implementing code in Blogger.

In Main Post Zone.

It means we are going to add share button either below post or below post Titles.To implement code in Blogger just add like this.

1. Go to Blogger Dashboard>Template
2. Back up your Blog.
3. Click on Edit HTML
4. Tick on expand widget.
5. Find this lines.

   <data:post.body/>

6. After finding line just add the code.If you add code before it then Facebook share button will be shown below Post Title.If you add below of then Facebook Share button will be shown below Post.
7. Click on Orange Save Template Button

In Widget.

1. Go to Blogger Dashboard>Layout.
2. Click on add a Gadget
3. Select HTML JavaScript
4. In Content box add the Facebook Share button code.(After adding remove expr: from iframe code)
5. Click on Save Template

Some Tricks for Making effective implementation.

If you want to make effective Share then try this.

If you want to hide the code from static page then wrap facebook share button code like this.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Facebook Share Button Code here
</b:if>

If you want to add distance inside and outside of Facebook share button then add this CSS(if you don’t know how to add CSS then read more at below ) in your Template

#br-fsb {
padding:5px;
margin:5px;
}

Change padding for inside share button and change margin for outside border.

If you want to position right then add this in CSS

#br-fs {
float:right;
}

You can change float right to left as your wish.

Styling the Share button.

If you want to style the widget then add CSS like this;

#br-fs {
/* Styling codes here*/
}

If you don't know how to add CSS then refer here.

Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.