Coding website: FB code for blogger

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='box_count'/>  
</div>

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='box_count'/>
</div>

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;">
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:share-button expr:href='data:post.url' type='button_count'/>  
</div>

How to install Facebook Share Count Button on your Blogger Blog?

1.Select one of the Share Button Styles and copy the Corresponding Code.

2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and check the check box which says “Expand widget templates”

3.Find this piece of code

<div class='post-header-line-1'/>

and immediately after that place our Facebook share button code(that you copied) If you were unable to find this code in your template,then look for the first occurrence of

<data:post.body/>

and immediately before that paste our Facebook Share button code(that you copied).

4.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out

This is necessary for all FBML widgets using the fb tag. So if you have already added the namespace while adding some other FB plugin, then you can skip this.

5. Save the template and you should get a Facebook share count button near each of your blog post

Thursday, February 16, 2012

FB code for blogger

Code for Facebook Share Button Style 2

No comments:

Post a Comment