Adding Facebook Share or Like Button in Blogger Templates(New Blogger Layout) ~ ZikkO's Info Blog

As a blogger, one of the ways of promoting your blog's 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:

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.
Click the Edit HTML button.

A new window will be opened. Click on the Proceed button and start editing.

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

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.

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>

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!

1 Responses to “ Adding Facebook Share or Like Button in Blogger Templates(New Blogger Layout) ”

ambreen11 said... December 31, 2013 I simply would like to offer you a big thumbs up for your great info you have got here on this post. I am returning to your site for more soon.

*Important - If you want to be informed of any replies to your comment, check the "Subscribe By Email" before submitting. Please Do Not Spam

October 1, 2012