Close Menu
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
Facebook X (Twitter) Instagram
My SiteMy Site
  • Home
  • Reviews
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact
    • Advertise
    • About Us
My SiteMy Site
Home»Blogging»How to Add Facebook Like and Share buttons to Blogger
Blogging

How to Add Facebook Like and Share buttons to Blogger

Oscar FrankBy Oscar Frank3 Mins Read
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email

How to Add Facebook Share or Like Button in Blogger Templates

As a blogger, there is no doubt that social media plays a major role in oyur building of traffic. With facebook share and like buttons, you readers can easily share your articles with their friends on facebook, thereby increasing your readerbase and your chances of making money online.

Add Facebook Share/Like Button Below Post Title

To add 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.

Add 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.

Blogger tips facebook Share Buttons

Related Posts

Meta Now Has a New Video Call Avatar Feature

July 13, 2023

Meta to Lay Off and Compensate 11,000 Employees

November 17, 2022

Facebook To Rebrand The Company To Focus On The Metaverse

October 26, 2021
View 1 Comment
Leave A Reply Cancel Reply

Recent Posts
  • 6 Sports Apps You Must Have On Your Phone
  • Valencia Travel Guide: All You Need to Know About This Spanish Gem
  • TikTok Faces Unexpected Ban in Senegal, Sparks Global Curiosity
  • The Apple GPT & Apple’s Chatbot Mysterious Debut
  • Triller Takes on TikTok: Filing for Public Listing
Get Exclusive Tech Insights!
My Site
Facebook X (Twitter) Instagram YouTube
© 2025 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.