× Warning! This forum is in archival status. New contributions may not work.
Howto: Adding Facebook's new "Like" button to your templates
  • Hi all,

    I've just tried out the new Facebook "Like" button, which allows site visitors who are logged into Facebook to easily share an item from your site on Facebook. It's really easy to add this to your Campsite templates too.

    Clicking on "Like" doesn't send any messages to users' Facebook news feeds, only to a user's profile page, so it's not as prominent, but at least users can see others who clicked on the item.

    Facebook's documentation for the "Like" button is here: http://developers.facebook.com/docs/reference/plugins/like

    On that page, you can set the parameters you want for your "Like" button (size, color, etc.). Copy and paste a regular URL from your site into the URL field, click "Get Code" and it will come back with an <iframe> tag and copy this into your template. It will look something like this:

    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnetgazeti.ge%2FGE%2F7%2FNews%2F1395%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

    On the Campsite side, we will need to change a single parameter for "url" and add this into where Facebook expects its URL values, but escaped as HTML entities (those %2F thingies):

    The parameter looks like this (and thanks to Holman Romero for the advice on how to turn the slashes and colons into entities):

    {{ url|escape:"url" }}

    Put this where Facebook expects its URL and you should be good to go:

    <iframe src="http://www.facebook.com/plugins/like.php?href={{ url|escape:"url" }}&amp;layout=standard&amp;show_faces=true&amp;width=400&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:px"></iframe>

    You can see an example of this at this address: http://netgazeti.ge/GE/7/News/1395/

    Scroll down to the bottom of the page to see it in action.

    Happy templating! -- doug
    Douglas Arellanes
    Director of Innovation
    Sourcefabric, o.p.s.

    Find a way or make one.