Technicalideas FreeBooks Notes Programs Tips: Add Facebook Share Button in Blogger

Monday, December 17, 2012

Add Facebook Share Button in Blogger

How to Add Facebook Share/Like Button in Blogger Templates

Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook Share or Like button in each of your posts. This button will allow users to quickly share a post on Facebook.

Note: This tutorial is no longer working. Facebook has changed it's codes. Try it and if it doesn't work, please don't comment or email me as I don't know the solution yet. Thanks :)

Add Facebook Share/Like Button Below Post Title

To add Facebook Like button below post title, simply follow these steps:

Back up your Blogger template.
Open the Template section.

Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Check Expand Widget Templates option. The page will automatically refresh.

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>

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: Just 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>

That's it. Save your template. Open a post on your blog and see the Facebook button in action.

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>

After that, save your template. Open a post page on your blog and see the Facebook button in action :)