Skip to main content

Add Facebook Like Button to Blogger Posts

To add Facebook Like button to your blogger blog posts simple follow the below steps:

1- Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says "Expand Widget Templates
2- inside the html code look for the tag: <data:post.body/> Directly after this tag add the below code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like layout='button_count'/>
</div>
</b:if>
3- Save changes


You may change the feel and look of your like button by changing and adding attributes to the fb:like tag, those attributes are:




  • layout - there are three options.
    • standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels




  • show_faces - specifies whether to display profile photos below the button (standard layout only)



  • width - the width of the Like button.



  • action - the verb to display on the button. Options: 'like', 'recommend'



  • font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'



  • colorscheme - the color scheme for the like button. Options: 'light', 'dark'



  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
    • fb_ref - the ref parameter
    • fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.
  • Comments

    Popular posts from this blog

    Coldfusion Facebook Graph API publish to your wall and your friends walls

    In this tutorial we will learn by full coldfusion Graph API code example how to publish on your wall and your friends walls. This application uses new oauth authentication method.

    The code is divided into four files: we will first start with a file called index.cfm:

    <cfoutput>    
        <!--- Your FB application IDS --->
          <cfset api_key = ""/>
        <cfset secret_key = ""/>
        <cfset appID = ""/>
    <!--- create a connection to the fb graph cfc --->
        <cfset graphCFC = createObject("component", "graph").init(#appID#, #api_key#, #secret_key#) />
        <!--- If user is authenticated or his access token is set create a cookie --->     <cfif not isdefined("cookie.access_token") and isdefined("url.access_token")>
            <cfset cookie.access_token=url.access_token>
        </cfif> <!--- If the user is authenticated and access token is set, then make the action…

    Error: Write to Disk Access Denied - Troubleshooting - BitTorrent

    I have downloaded Bit Torrent software and when trying to download I got an error after few seconds saying:

    Error: Write to Disk Access Denied
    Solving this problem is so simple:
    Shut down BitTorrent program.
    Go to Start and in the small search box on top of windows start button start typing Bittorrent and the program will show, right click with the mouse on the icon and Run as Administrator.
    All ur problems are sorted out now and you can enjoy downloading...
    Good Luck.

    Implementation of Facebook Graph API in Coldfusion

    Facebook has launched a new FB API called Graph that simplifies FB applications development, the new Graph API allows website owners to create Single Sign On (SSO) with Facebook and allow websites owners to be able to import a lot of users information but after their permissions.


    The code below written in Coldfusion gives an example on how to Create FB login/logout button and then how to retrieve the created cookie, and use it for further development:

      <body>
      <cfoutput>
    <!--- Your FB application IDS --->
        <cfset api_key = "XXXXXXXXXXXXX"/>
        <cfset secret_key = "XXXXXXXXXXXXXX"/>
        <cfset appID = "XXXXXXXXXXXXXX"/>
    <!--- Facebook login/logout button --->
        <p><fb:login-button perms="email,user_birthday" autologoutlink="true"></fb:login-button></p>
        <!--- Facebook login/logout button that publishes to your wall--->
        <p><fb:like></fb:like…