How to add a Facebook "Like" button to your Blogger posts

By Dora -
This is a short tutorial with 7 steps that teaches you how to embed a Facebook "Like" button to each of your Blogger posts.

If you completed the 7 steps successfully, you will be able to see a "Like" button that looks like the one below.

Interested to know how? Its easy, so read on!

A Facebook "Like" button at the end of a Blogger post


Step 1
  1. Log in your Blogger Account
  2. Go to Blogger Dashboard. 
  3. Click on your Blog Title.
  4. Navigate to Template tab.
Step 2
  1. Click on Edit HTML button
  2. Click Proceed button to view Template Editor.

    Step 3
    1. Check  "Expand Widget Templates"

      Step 4
      1. Type "Ctrl-F" to look for the keywords "<data:post.body/>" in the template


      Step 5
      1. Once you have located the position of "<data:post.body>", refer to the screenshot above to add the code below at the correct position
      <br/>
          <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_layout&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;'/>

      Step 6
      1. Click the "Save Template" button

      Step 7
      1. Visit your blog to view the changes!


      Comments

      Post a Comment

      Popular posts from this blog

      How to create an organizational chart in your webpage using Google Organization Chart Tools

      By Dora -
      Image
      https://developers.google.com/chart/interactive/docs/gallery/orgchart While googling for some information on organizational charts of various companies, I came across this cool visualization tool on Google Developers. If you are comfortable with JavaScript and want a quick and easy way to churn out a simple organizational chart that displays on a webpage, this tool is quite useful. Organizational chart churned out using Google's Visualization OrgChart object To use it, follow these few steps Step 1: Include this tag in your <head> tag in your HTML file <script type = 'text/javascript' src = 'https://www.google.com/jsapi' ></script> Step 2: Load visualization package and set callback method when page loads In this case, the callback method is "drawChart". <script type = 'text/javascript' >       google . load ( 'visualization' , '1' , { packages :[ 'orgchart' ]});     ...
      Read more

      Embed JSX code with if condition in React app

      By -
           renderPrice(pt)  {    if (pt.amountpaid!="") {        let ctrl = (           <>             <div>                 <label>Price</label><br/>                 <input type="text" readOnly name="amountpaid" value={pt.amountpaid} />             </div>           </>          );          return ctrl;     } //end if } //end renderPrice render () {   const   priceElement  =  this . renderPrice ( purchasetransaction ); return  (                  < div   style = { { marginTop :   '5em' , marginLeft : '2em' } } >  ...
      Read more