Adding Facebook Share or Like Button in Blogger Templates New Blogger Layout

Adding Facebook Share or Like Button in Blogger Templates New Blogger Layout


As a blogger, one of the ways of promoting your blogs content are through social media sites!
Sites like facebook brings more traffic when properly linked in 1 way or the other to facebook...

Adding Facebook Share/Like Button Below Post Title

To add the Facebook Like button below post title, simply follow these steps:
    1. Login to your blogger dashboard, firstly, it is necessary that you backup your blogger template before you try editing it incase you mess up with the template.
    2. Click the Edit HTML button.
Blogger Edit HTML Button
  1. A new window will be opened. Click on the Proceed button and start editing.
Blogger Proceed Button
  1. Check the Expand Widget Templates option.
  2. Find <head> in your template and replace it with the following code:<head> <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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  3. Now find the following code:
    <b:includable id=post var=post> <div class=post hentry itemscope=itemscope itemtype=http://schema.org/BlogPosting> <a expr_name=data:post.id/> <b:if cond=data:post.title> <h3 class=post-title entry-title itemprop=name> <b:if cond=data:post.link> <a expr_href=data:post.link><data:post.title/></a> <b:else/> <b:if cond=data:post.url> <b:if cond=data:blog.url != data:post.url> <a expr_href=data:post.url><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>
    You might see multiple codes similar to the above code. However, make sure that the code you find has <b:includable id=�post� var=�post�> in it.
    Tip: Search for <data:post.title/> and you�ll find the above code lines.
  4. Place the following code right AFTER the code in previous step:
    <b:if cond=data:blog.pageType == &quot;item&quot;> <div class=fb-like data-send=false data-show-faces=true data-width=450/> </b:if>
    The result should look something like this:
    <b:includable id=post var=post> <div class=post hentry itemscope=itemscope itemtype=http://schema.org/BlogPosting> <a expr_name=data:post.id/> <b:if cond=data:post.title> <h3 class=post-title entry-title itemprop=name> <b:if cond=data:post.link> <a expr_href=data:post.link><data:post.title/></a> <b:else/> <b:if cond=data:post.url> <b:if cond=data:blog.url != data:post.url> <a expr_href=data:post.url><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <b:if cond=data:blog.pageType == &quot;item&quot;> <div class=fb-like data-send=false data-show-faces=true data-width=450/> </b:if>
  5. Save your template and view posts on your blog, your facebook like button would appear.

Adding Facebook Share Button Below Post Body

To place the Facebook share button under each post, you have to follow the first 3 steps given above. Then find the code given in step 4 above. Scroll down a bit and you�ll see the following code:
 <div class=post-body entry-content expr_id=&quot;post-body-&quot; + data:post.id itemprop=articleBody> <data:post.body/> <div style=clear: both;/> <!-- clear for photos floats --> </div>
Warning! Do not use �Ctrl + F� to find the above code. You have to find the code given in step 4 and then you can find the above code by scrolling down a bit.
After finding the above code, place the following code right AFTER it:
<b:if cond=data:blog.pageType == &quot;item&quot;> <div class=fb-like data-send=false data-show-faces=true data-width=450/> </b:if>
The result would look something like this:
 <div class=post-body entry-content expr_id=&quot;post-body-&quot; + data:post.id itemprop=articleBody> <data:post.body/> <div style=clear: both;/> <!-- clear for photos floats --> </div> <b:if cond=data:blog.pageType == &quot;item&quot;> <div class=fb-like data-send=false data-show-faces=true data-width=450/> </b:if>
Now, save your template. You can now view your blog and that�s it.


I hope this helps.

If you have anything to say or ask, Kindly make use of the comment form below. If you also want me to post a short review of your company or product, on this blog, do not hesitate to contact me.

Please, do not forget to SUBSCRIBE to this blog, so that you can be receiving future articles, freebies DIRECTLY into your email inbox, even when you are not online.

CLICK HERE TO SUBSCRIBE NOW!

Cheers!

go to link download