Breaking News
Loading...
Sunday, 23 March 2014

Add Facebook Send Button To Your Blog Posts


Facebook is always been enhancing it's sites and also don't miss a chance to increase it's domain. Facebook has launched Send Button option for your website or blog. It allows your readers to sen the posts to their groups or friends which they wish worth to be shared.
This tutorial will be guide you in installing this send button to your blog's post.


■ Open Blog Dashboard → Template → Html editor
■ Expand the widgets and find

<data:post.body/>


■ Add the below given code just after/below it.

XFBML

<!-- Facebook Send script Start -->
<b:if cond="data:post.isFirstPost">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js , fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</b:if>
<!-- Facebook Send script End -->

<!-- Facebook Send button Start -->
<div style='float:left;padding:5px 5px 5px 0;'>
<fb:send expr:href='data:post.url' font='' colorscheme='light'></fb:send>
</div>
<!-- Facebook Send button End -->

■ On preview you will find a send button appear below all the posts of your blog.
■ Hit the save button.

Installing a Like Plus+ Send Button


■ Go through the similar steps as above.
■ And replace the above given code with the code given below.

XFBML

<!-- Facebook Like+Send script Start -->
<b:if cond="data:post.isFirstPost">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</b:if>
<!-- Facebook Like+Send Script End -->

<!-- Facebook Like+Send button Start -->
<div style='float:left;padding:5px 5px 5px 0;'>
<fb:like expr:href='data:post.url' font='' layout='standard' send='true' show_faces='false' width='450' colorscheme='light'></fb:like>
</div>
<!-- Facebook Like+Send button End -->

■ Hit the save button and you're done.

Enjoy :)

0 comments:

Post a Comment

 
Toggle Footer