Saturday, April 26, 2014

// // 2 comments

How To Add Facebook Like and Share Button in Every Posts

Adding a facebook like and facebook share button in each and every posts of blogger blogspot has become a common task of the professional blogger. In this post i am going to tell you “How to add facebook like and share button in all posts of blogger blog?”. If you add the like and share button below the blogger posts then the visitor of your blog will able to know the popularity of your post and will be more effective to read your posts and stay your site for long time. So your bounce rate will be decreased and your traffic will be increased. You may think that the coding knowledge such like HTML, CSS, JavaScript will be needed to add facebook like and facebook share button with the blogger posts. If you are more serious about that then the declaration for you that you

do not need the coding knowledge to add the buttons to your blogger blog. Just follow the tricks provided below and win to add facebook like and share button into every posts of your blogger blog. :)


Let's See The Simple Trick

Step 1 Html Tag

  • Go to Blogger.com
  • Choose your Blog where you want to add Facebook Like & Share Button
  • Click on Template on Left Side Menu
  • Now Click Edit Html
  • You will see the HTML tags in the beginning of the template coding Like this

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  • Now add the below code at the end of the <html> tag. As shown in the image

 xmlns:fb='http://ogp.me/ns/fb#'

Step 02: Editing Body Tag

Now find out the <body> tag [Click anywhere in the code box then press Ctrl+F]. Now type <body in the box and press “Enter” then you will get the <body> tag
Now add the below code just under the <body> tag. As shown in the picture.

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now find out the <div class='post-footer'> tag [Click anywhere in the code box then press Ctrl+F. A Now write the code <div class='post-footer'> in the box and press “Enter” then you will get the <div class='post-footer'> tag ]
Now add the below code just after <div class='post-footer'> As shown in the picture


<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-width="450" data-show-faces="true"></div>

Now Click on “Save template”

You have done if you need more help please let me know i will help you.

2 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Coinomia


    You've decided to get out of your comfort zone and to start learning the internet. Where do you go to get the education you want? What do you look for? How do you go about it all? What should you be asking before you decide this is the place where you can really learn to become an Internet Marketer (or for some, a Master Internet Millionaire Marketer)?

    ReplyDelete

Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.

Note: Please do not spam. Those type of comments will be deleted upon our review.