Learn More

Contributors

Sunday, December 16, 2012

How To Put Facebook Follow Plugin Correctly

follow plugin
We believe you very like if someone is interest with your article and then following you on Facebook. At least this is a sign that you are very appreciated by other people because of your ability. They believe with what you have done and what will you do next. We never talk this trick previously, but now we share how exactly put Facebook Follow Plugin correctly. Meaning correctly because this Follow Plugin will never wrong showing the name of current article. This trick is very good if your blog has many authors. So, the Follow Plugin must shown based on the name of current article. See the example on this blog, Follow Plugin will shown based on the name of Threelas author (Ibnu Syuhada or Putri Arisnawati). For increasing more traffic on your Facebook Page, we also add this trick with Follow Plugin of your Facebook Page.

To do this is simple, just go to your Blogger Dashboard, then choose Template tab, then click Edit HTML. After that you will see the sentence

Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features. We recommend using the Template Designer first, where you can Add CSS under the Advanced section.


Below this sentence click Proceed button, then give "check" on Expand Widget Templates. After that, find the code below


<span class='post-author vcard'>
     <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>                   
                </a>
              </span>                       
          <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
          </b:if>
     </b:if>
</span>

Then put the following code before the code above (you also can put below the code above, but our advice you should able with HTML5 and CSS)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Putri Arisnawati&quot;'>            
<table><tbody><tr style='none repeat scroll 0 0 #C9C9C9'><td width='50%'><div class='fb-follow' data-href='https://www.facebook.com/putri.arisnawati' data-show-faces='true' data-width='250'/></td><td width='50%'><div class='fb-follow' data-href='https://www.facebook.com/ThreelasCommunity' data-show-faces='true' data-width='250'/></td></tr></tbody></table>
<b:else/>
<table><tbody><tr><td><div class='fb-follow' data-href='https://www.facebook.com/ibnusyuhadap3' data-show-faces='true' data-width='250'/></td><td><div class='fb-follow' data-href='https://www.facebook.com/ThreelasCommunity' data-show-faces='true' data-width='250'/></td></tr></tbody></table>
</b:if>
</b:if>

What you should to do is just change Putri Arisnawati with your first author, change https://www.facebook.com/putri.arisnawati with your first author Facebook Url. Then also change https://www.facebook.com/ibnusyuhadap3 with your second author Facebook Url. Of course, change https://www.facebook.com/ThreelasCommunity with your Facebook Page Url.

Don't forget to put the following code after <body>

<div id="fb-root"></div>
<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&appId=APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then save your work. Finish and start to fun.

Post a Comment