How to add facebook like-button in tumblr posts with opengraph protocol

Visit this link to view the post: http://eyedealab.com/?p=5837
Posted on: 158 Comments
fb-like-tumblr-blog

Its pretty simple to add the new facebook like button to each of your tumblr posts. Just pay attention and copy and paste the following codes as I progress. You can now also have more control over how your tumblr post snippets look on a Facebook profile’s latest wall updates when someone likes or shares your post, i.e how the image shows up and what is written in the title and description of that post. We will use Facebook’s open graph meta property tags to customise this look according to our choice. You can customise the code more as per your requirement for individual text, photo, audio, video post listings.

Now what you need before you start: → Please login and keep your facebook profile and your tumblr account open.


A. Add Facebook opengraph code to Tumblr Theme

A-STEP 1

fb-tumblr-01 In your tumblr dashboard visit the “preferences” link as the picture above.

A-STEP 2

fb-tumblr-02 Click on “Customize your blog” button.

A-STEP 3

fb-tumblr-03

3a. Click on the theme button to open the theme editor.

3b. Add the following code as suggested below in the theme editor. In the top of the <head> section find the OLD code and replace with the NEW highlighted code below which has the additional xmlns:fb and xmlns:og values for using the Facebook XFBML and Open Graph Protocols.

OLD code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

NEW code – to enable Facebook Open Graph Protocol (COPY & PASTE)

<!-- //Updated code// -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">

3c. Now press the green “save” button.

A-STEP 4

Again start with step 3a. In the theme editor, before the closing </head> tags, add the code mentioned below. You will find some existing “meta” tags there too (of tumblr), do not delete them.

Open Graph protocol’s “meta property” tags

<!-- START For Facebook Open Graph -->
{block:PostSummary}
<meta property="og:title" content="{PostSummary} - {Name}" />
{/block:PostSummary}
<!-- //New UPDATED 17-03-12 code -->
<meta property="fb:admins" content="YOUR PROFILE ID" />   
<meta property="og:type" content="article" />
{block:IndexPage} 
<meta property="og:url" content="http://YOURBLOG.tumblr.com/" />
<meta property="og:title" content="{Name}" />
{/block:IndexPage}
{block:PermalinkPage}
<meta property="og:url" content="{Permalink}" /> 
{/block:PermalinkPage}        
{block:Pages} 
<meta property="og:url" content="{URL}" />
<meta property="og:title" content="{Label} - {Name}" />
{/block:Pages}
<!-- New UPDATED 17-03-12 code// -->
{block:Posts}
{block:Photo}<meta property="og:image" content="{PhotoURL-250}" />    {/block:Photo}
{block:Text}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Text}
{block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}
{block:Quote}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Quote}
{block:Link}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Link}
{block:Chat}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Chat}
{block:Audio}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Audio}
{block:Video}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Video}
{block:Answer}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Answer}
{/block:Posts}
<meta property="og:description" content="{MetaDescription}" />
<!-- For Facebook Open Graph END -->

UPDATE 17-03-12:
In place of “YOURBLOG” write your blog’s name, and please add your facebook profile ID in place of “YOUR PROFILE ID”, other wise the Facebook debugger will throw lots of errors as mentioned by commentators below.

If you are already familiar with facebook opengraph protocol, you can see, I have customised the opengraph code to include the tumblr variables like {PhotoURL-250}, {Permalink}, {MetaDescription}, {PortraitURL-128} etc. specifically for customising the post display which you will see later in the facebook updates. To customize and know more about the tumblr variables you can visit the tumblr docs.


B. Add Facebook Like Button code to Tumblr Theme

B-STEP 1

In the <body> section find <div class="bottom"></div>{/block:Posts}. Now COPY & PASTE any one only of the Facebook Like Button Codes given below, just before that! To be specific you only need to find the {/block:Posts} code, and name of the other div mentioned above may vary theme to theme, i.e in “the minimalist” theme you can place the code before </article>{/block:Posts}. If you are okay with getting your hands dirty, you can always customize your theme as you wish.

Now coming to the Like-button codes, Tumblr supports html5, so you can happily add the new HTML5 code, given in point 1a.

1a. Facebook Like Button Code (HTML5)

<br /><!-- adding single line space -->
<div id="fb-root"></div>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#appId=236186013100076&xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-href="{permalink}" data-send="true" data-width="450" data-show-faces="true"></div>

1b. Facebook Like Button Code (XFBML)

<br /><!-- adding single line space -->
<div id="fb-root"></div>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#appId=236186013100076&xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:like href="{permalink}" send="true" width="450" show_faces="true"></fb:like>

1c. Facebook Like Button Code (iFrame)

<br /><!-- adding single line space -->
<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

It is advised to take the HTML5 code, as all modern browsers now support HTML5 although you can also go for the XFBML code if you hate HTML5 ;) . But both of them are async code (load asynchronously to avoid full page reloads) and will also adjust the space under the button as required whereas the iFrame code keeps an unnecessary space (height wise) under it.


C. TEST and DEBUG the codes

C-STEP 1

Open your tumblr page i.e http://yourpage.tumblr.com. Your Like-button now looks like below.

fb-tumblr-04

1a. If you do not want the send button too, just change send="true" to send="false" in your like button code in your theme editor.

1b. If you are Ok with the button, go to the single post page (like I am clicking on the “Posted 4 hours ago” grey box area in the above picture).

C-STEP 2

2a. After you finished C-STEP 1, you will find the single post URL from the single post page, copy that and visit: https://developers.facebook.com/tools/debug. Paste the copied URL in the input box (see pic below).

fb-tumblr-05

2b. You should see an output like the screenshot below. If not, check the whole code addition process again.

fb-tumblr-06

UPDATE 30-09-11: If you are getting “Inferred Property – The og:locale property should be explicitly provided, even if a value can be inferred from other tags” warning in the debugger, you need to explicitly add the following meta property tag also in your theme head along with the other opengraph meta property tags:

<meta property="og:locale" content="en_US" />

Here the content property denotes en_US, en_GB for Locale(“language”, “COUNTRY”)!
For internationalization you can add more languages as per your use/choice in the document head like below:

<meta property="og:locale:alternate" content="fr_FR" />

C-STEP 3

If everything looks OK now, finally click on “like” button in tumblr to test the actual facebook output it will generate. It should look something like this below in facebook. If you are confident with the usage of tumblr variables you can always change the output as you want for each post type.

fb-tumblr-07

If this post helps you, or you want any more information related to this, just throw me a comment below.

NOTE 1: Please don’t add your tumblr theme’s HTML codes in the comment box. I won’t be able to look at it that way! Use any of the code sharing tools mentioned here – http://www.1stwebdesigner.com/freebies/paste-share-code-snippets/ and post the link in your comments.

NOTE 2: Vanishing photos issue – As some commentators mentioned below about this (which I also identified lately), please check if those disappearing images are showing up again or not by removing this following code for photosets meta tag from the header area. {block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}


Priyanka Naskar Majumder - the Owner, Eyedea LAB. Graphic & Web Design Studio, lives in Kolkata, India. Interested in: Usability research, Graphic Design, Web Design & Development.

158 responses ↓



    • Yes, for some image posts somewhere I have seen this issue too. But I think the post is looking OK at my end… it shows 7 illustrations in black and white, isn’t it?

      • I deleted the text you … now it works
        only used this code:


        {block:PostSummary}

        {/block:PostSummary}

        {block:IndexPage}

        {/block:IndexPage}

        {block:Permalink}

        {block:Posts}

        {block:Photo}

        {/block:Photo}

        {/block:Posts}

        {/block:Permalink}

  1. i have done all wat is told. i got 10 likes for my post. its showing “xxx, yyy, and 8others like this”
    i want to see who all liked my post, i mean that 8 others names. im talking about likes in tumblr not in fb.

  2. Hi there,

    Thank you for the tutorial. I got the like button to show up but I’m having some problems with the output on facebook. The image that is displayed on facebook is the tumblr profile picture/favicon of the blog and not the image on the post that I “like”. Do you have any idea why that might be happening?

    Thanks for your help!
    Himani

  3. I got the notification below. How can I fix this error.
    Please help me out…Thank you

    Errors That Must Be Fixed
    More Than One OG URL Specified: Object at URL ‘http://timbut.tumblr.com/post/26399431715/gian-nhau-trong-tich-mon’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.