Blog

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

Priyanka Naskar Majumder
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}

Last modified on March 19th, 2012 at 6:04 pm.

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

157 Comments

One Trackback

Leave a comment.

Please do not spam and all * fields are required.
Email *
http://

Allowed HTML tags: <strong> <em> <pre> <code> <a href="" title="">

Send us your requirements

×
My Contact Form
Your name is required
Email is required
Please write a message

Please leave this field empty.

All fields are required