May 4, 2014

Add Facebook Like Button to Individual Posts In Blogger

Face book is a popular social network. Many bloggers get so much traffic from Facebook than Google search engines. So i thought about adding like button below the post titles in order to get more likes and recommendations from Facebook users.

The new Facebook like and comment button can be added after each individual post title or before the body of the post in blogger. 


Add Facebook like Button Social Plugin to Blogspot Blog
Add Facebook like Button Social Plugin to Blogspot Blog


How To Get Like Button To Blogger

Go to All 11 Facebook Social Share Plugins For Blogspot Blog and follow the steps correctly. After that do the following steps.

CSS code to copy

/*---Name:Ship Me This Url: http://www.shipmethis.com/2017/04/all-social-plugins-blogger.html --- */ .shipmethis {font-size: 12px;}

Where to Paste the Copied Code

Paste the below CSS before skin code  ]]></b:skin>
You can use CTRL+F to find the code.

HTML code to copy

The like button code is shown below;


<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/><div class="shipmethis"><a href="http://www.shipmethis.com/2017/04/all-social-plugins-blogger.html">Get Widget</a></div></b:if>

This code uses iframe so that it may mildly slow down the speed of website. Copy the HTML code

You can also use HTML code without iFrame as below;

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-like" expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div><div class="shipmethis"><a href="http://www.shipmethis.com/2017/04/all-social-plugins-blogger.html">Get Widget</a></div></b:if>


Where to Paste the Copied Code

Go to blogger template find the below Code by ctrl+F,

<div class='post-body entry-content'>
Or

 <div class='post-header1'>

Paste the like button code Before it. Just save the template. Now the button will appear in every post. 

If you are unable to find the <div class='post-header-line-1'/> code, then find the below code.
<data:post.body/>
Paste the HTML code before that.


Hope this post helps. Please Subscribe to the Ship Me This.