Saturday, 22 June 2013

Add facebook like button to every post and blog


The Like button is a simple plugin that lets people quickly share content on Facebook.
Clicking a Like button on a site creates a connection in the graph between the content and the person who clicks the button. Clicking the Like button also publishes an Open Graph Like action, and displays stories on that person's timeline and their friends' news feeds. This story will link back to the site and drive distribution of content.

To add facebook like button to every post

  •  open your blogs dashboard 
  •  select Template option

Before editing your template Back up your Template in your PC
  • Click on Back / Restore option in top right corner
  • Click Download full template
  • Click on Edit HTML

  • Click on the html text 
  • Press Ctrl+F key and search for "<data:post.body/>"

    You will get 2 or 3 of these. The required one has this piece of code before it
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
     
  • Paste the following code just above <data:post.body/>
    code:
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px;'/> </b:if>


  •  Save template
     
  • This will add facebook like button just below posts title



 To add facebook like button to your blog page

  • Copy your blogs link
    you find it in settings tab of your blog under Publishing

    in my case its "http://arnab-how-to-do.blogspot.in/"

  • Go to facebook developers > social plugin > Like Button
  • paste your blog link
  • Select layout of the button which suits you
  • click Get Code

  •  A window will popup displaying the script and the plugin code

  • Save these code
  • Go to your Blogs Layout tab
  • Click on "Add a Gadget" where you want the like button



  • A window will popup displaying all gadgets
  • Add HTML/JavaScript gadget by clicking the  Add  button

  • Next leave the Title Blank  
  • In the content box first paste the script which we copied earlier then paste the plugin code and save it

  • Click Save Arrangement option in the top right corner
Now view your blog and you will see that we are done with adding facebook like button . Cheers !!


For any doubt leave comment below









No comments:

Post a Comment