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

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

A-STEP 2

Click on “Customize your blog” button.

A-STEP 3

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.

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.

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.

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

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.

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

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}

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.

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?

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

thanks for this tutorial. It was very good and easy to rebuild. I still have a problem with the facebook debugger. I pasted the og:locate tag in the head of open graph but it still reports me problems with it. maybe you have an solution for this problem.

Thank your for being an incredible help to so many. I am writing here to you because Facebook debug says, “More than one OG URL Specified:Object at URL ‘http:// iamwillhooper.tumblr.com/post/22363080395/the-mascots-for-the-2012-summer-olympic-and…’ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: http:// iamwillhooper.tumblr.com/post/22363080395/the-mascots-for-the-2012-summer-olympic-and, /PhilosophyBeliefs, /Opinion, /Causes, /Political.

My Code is here http://pastebin.com/C3jQK8K6 if you can take a look and I would be very thankful. And thanks you for being a help to all of us. Cheers!

Hello! Thank you for the wonderfully written and immensely helpful post 🙂

Need your help as I am not being able to execute ‘Step B – Adding a Fb like button to my Tumblr theme’. I’ve tried as you’ve directed umpteen no. of times but, to no avail. I’ve to put the button on this blog : http://tareeshi.tumblr.com/

I have the weirdest problem… But first thanks for this really awesome post!

Now to my very odd problem… My like button is showing up in the preview and works just fine there… BUT in the “live” blog page there is no like button appearing at all (though view source shows the new code to be in the page).

Yes I cannot see the buttons in Firefox too. But I can’t get the problem, may be it’s because {block:IfDisqusShortname} tag is not closed? (line103) Also try to place the button before {block:NoteCount} see if that works.

Hi, uhm.. is it possible for me to identify who liked my posts? I already have this like button on every posts of my blog on Tumblr but it only indicates the number of likes that the post got. I want to know the specific persons who liked it. Is that possible? Thanks. 🙂

In the Facebook Like Button Docs we see that for fb:admins or fb:app_id we can use “A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.”

So I think logically you can use the same “app id” for both the sites, because the above statement never says that the application ID must be created for or related to only one site. So if you have an application that is not related to any of the sites you can use it’s ID for both here, but if you have already created the Application with only one site’s url in it, then it may pose a problem in future, because FB every now and then change the rules and regulations.

If you can’t decide, just use you Facebook Profile ID only! The buttons will still work.

Thanks for the thorough answer! You’re right: I tested it. I run a Fan Page on Facebook and tried to use an existing app I created a while ago for another website. Since this app was created and configured with only the URL of this website –let’s call it website A– it doesn’t work on the Tumblr website.

Now, could I create a new app, for the same Facebook Fan Page, but configure to work with the URL of the Tumblr website? The Fan Page would thus have two different apps, both configured for different website. The apps do nothing else than registering the “likes”.

Indeed, I can confirm: you can create two different apps (in order to get two distinct app ID) for a single Facebook Page and thus implement the Facebook Open Graph Protocol on two different websites (which will become “object” for the same Facebook Page).

Everything is working just fine and Facebook is scraping my posts correctly. However, it seems the code for the customization of the button itself is not registering: all I get is a classic “Like” button and I’m not able to customize it neither in HTML5 nor XFBML (changing the value for “show_faces” “send” or “data-layout” does nothing). I’ll run some more test in the meanwhile.

Like Button Warnings That Should Be Fixed Admins And App ID Missing: fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate. Open Graph Warnings That Should Be Fixed Extraneous Property: Objects of this type do not allow properties named ‘”og:title”’.

What you’ve suggested to make a new application is impossible because I have to be “authenticated”. Therefore, I do not know how to gain access to an “id”. Help. Thank you.

I had the same problem. If you go through everyone’s comments on this page, pretty much anything you run into has already been answered. The solution to your error was asked by Moe on Feb. 1st. Click the link Priyanka put in his response. Worked for me. Was pretty quick and painless.

I got the like buttons to show up under each post. Here’s what the debugger told me. Any idea what to do?

Like Button Warnings That Should Be Fixed Admins And App ID Missing: fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high clickthrough rate. Like Button Tag Missing: og:title is missing. The og:title meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

Open Graph Warnings That Should Be Fixed Inferred Property: The ‘og:title’ property should be explicitly provided, even if a value can be inferred from other tags.

Actually I didn’t understand what error you are getting? I checked a post of yours in Debugger, and I can see that it is showing the post image and the title correctly! But still you can check the updated code at A-STEP 4, may be that will solve the problem.

Since I don’t know about all tumblr themes, I can’t comment on your situation, provided all your codes did not come to me properly. So don’t post your entire theme code here in this comment box, but use a code sharing tool as mentioned in the post. The post has everything clearly written, and you can see that others who are using it, can make it work in their themes, too.

By the way did you can check the updated code at A-STEP 4? Hope that helps solve the error!

Everything worked just fine. I decided to put the buttons within the post, but I’m only now concerned with making the buttons line up with the left edge of the content itself. It’s just too close to the left edge of the post. Please, and thank you.

This question has nothing to do with this post but still… 😉 Place your like-button-code inside this html code and I think it will look fine now. <div style="padding-left: 30px;">YOUR LIKE BUTTON CODE HERE</div>

Hi there Priyanka! I have followed the tutorial but i can’t seem to keep the Like button from the top (which worked correctly as a Like button for the whole page) unlinked from the Like buttons for every different post. I did get the Like button for the whole page about two months ago and it worked like a charm… Problems started when i got Like buttons for every post. My problem is this: If i click on any of the Like buttons beneath the posts, they work as if they served the same purpose as the one above… Is there any way to unlink these two? Is there any script to keep the Like button for the whole page working AND keep the specific Like buttons which can relate just for a particular post?

I have read similar troubles in past inquiries and i wish you could help me with this one. Thank you very much, Priyanka! I’ll be waiting for your help!

Thank you for all the work you put into this!! All your answers to everyones to questions were super helpful too!! Had a quick unimportant question, if your still taking questions on this. Everything is working, but when I click “Like”, it has me sign into facebook even I’m signed in, and Facebook is open in another window. Is that normal?

First of all thank you so much for the thorough guide. It helped a lot!

I do however experience the same problem as Quinn. The website is the above link and I figured you wouldn’t like all my coding to be pasted into this post, so if you could help me find the problem via the source code it would be greatly appreciated.

the popup window facebook normally prompts when clicking “like” to something comes up as expected. BUT fb wants me to log in even though i already am. Maybe theres a conflict with cookies due to the fact that im coding it as well as using is. If i log in via the pop up window it allows the like to be registered, but I cannot comment or anything like that. Also when I’ve logged in the window closes immediately rendering me unable to specify my “like”. Can you replicate the problem? And is there any solution? I’ve been cruising the net for days now unable to find a solution…

Hi, I got the like button to work, but I have to leave out the “meta property” tags. If I add those in, all the content in my tumblr posts disappears except for the notes. However without adding the meta tags, the posts look terrible in the facebook news feed and have tons of debug warnings that needs to be fixed.

So to be clear, all I am using right now is your code at the very beginning and the HTML 5 like button code at the end.

Hi I have added the FB like button but when its liked it adds my logo in as the pic on FB and not the pic that is related to the post on the blog. Why is this and where in my code should I be looking to find this fix?

Other than “Photo” Posts, all other posts will add the PortraitURL (ex: your logo) because, you can’t call the pics from the text posts etc. as a easy variable. If you don’t like to display the logo, you can always change the code to not include the PortraitURL.

Thanks for the guide, I just have one little issue….. my like button works for each post, but it is showing underneath the blog post just before the next post, and not in the actual blog post itself…. I think I copied everything right and double checked it, I am just using the default blue background skin you get when you join Tumblr, any ideas on how I can move it into the blog post?

Hi Priyanka, first of all – thanks you very much for this great tutorial! I do have a question concerning the position of the like button (which has been asked before, i know). In my theme the like button is bewlow the post and too close to the next post which confuses. I tried what you suggested, adding a behind the button_code but it doesn`t change anything..

hii… the button is successfully installed, but in PAGES, when i press recommend button, it do posts on fb, but when i click on links (those posted on fb when i press recommend button) they show error. The shared links works fine when they are of posts. But they dnt work in PAGE Links. Kindly take this as urgent. http:// loremate.tumblr.com/girlfriend this is a page. try recommending and then clicking on shared link frm fb.

This url is showing “not found” when I visit the link directly (u r getting a Response Code 404 in Facebook debugger too), I checked with another page named virus, here ur getting “Object Invalid Value Object at URL ‘http://loremate.tumblr.com/virus’ of type ‘article’ is invalid because the given value ” for property ‘og:url’ could not be parsed as type ‘url’,” please correct that.

By the way I see you are also getting an error in each post page “Object at URL ‘http://loremate.tumblr.com/post/18071094996’ of type ‘article’ is invalid because the given value ‘208428712565552’ for property ‘fb:admins’ could not be parsed as type ‘fbid'” in facebook debugger. Please check that too!

i think it is fine now… the 404 error was due to i changes the urls last nite, must have not been updated by that time t ur end. Also help me in one thing. I have added fb comments also. The comments work fine on posts. but u can see on PAGES, they shw “The comments plugin requires an href parameter.” The href parameter is set to {permalink}. Comments works only when i replace {permalink} with any url. but again, that will then take comments for one url only. How can i fix that?

First try to add your facebook profile id to just to see if that works or not. <meta property="fb:admins" content="XXXX" /> in the place of XXXX or create an application in facebook as suggested here: by Artem and get it’s app_id and add in place of XXXX<meta property=”fb:App_id” content=”XXXX” />

I tried the steps above but I get a whole list of like/send buttons over the home page of my tumblr as well as under the specific posts. So I deleted step 4 B 1a again to eliminate this. Would you know what could go wrong?

Hi there! I think this is a great tutorial. Best I’ve found. Though, I keep hitting the same problem – the og:image is my avatar image (on the debuggin link). I tested it out by liking a post, and the avatar image appears on my fb, not an image from the post. I don’t know how to get it to be the image that coincides with the particular blog post. Help please?

If it is a photo post then the post photo will show up, but for text posts your site’s avatar will only show.

For the description part tumblr provides the variable {MetaDescription}, which I included in the meta property, and this generates the title by default. Please check tumblr documentation for more customization if required.

I’ve replaced the meta data with everything used in this tutorial, og:title defined as variables “post-summary” and “name” as suggested.

When debugging facebook tells me the following: Object Missing a Required Value Object at URL ‘http://www.derekkirkup.co.uk/post/16024153291’ of type ‘article’ is invalid because a required property ‘og:title’ of type ‘string’ was not provided.

When I replaced og:title variable with {title}, this resolved the debug error, but it meant the link shared on facebook would only show my blog title, not the post title.

Any ideas? I am using a modified version of ‘Minimal’ theme, (not ‘The Minimalist’).

RE: My previous issue, it looks like some error was occurring as various settings in the tumblr control panel had changed. Possibly something to do with using such an old version of IE, (have no choice where I am at the mo!).

Thank you for this tutorial, but I have encountered a problem. My concern is that although it occurred while doing this tutorial, it may not relate to this code!

My title on my blog has disappeared and been replaced by an image placeholder! I have not specified there to be a header image in my theme. The only changes I made to the tutorial instructions was to replace the following meta property code with {title} as instructed by FB debug, as well as adding locale detais.

This is the body code for the title block: {block:IfHeaderImage}{/block:IfHeaderImage} {block:IfNotHeaderImage}{Description}{/block:IfNotHeaderImage}

This issue is completely related to the tumblr theme. I am unable to answer this question, as I will not be able to trackback, what code got missed, but maybe hopefully someone else here can. Specifically check the Tumblr forums related to theme variables. And it’s always better to do any changes to your installed theme, after you keep a backup of the original in a text file, on your desktop.

Create an application in facebook as suggested here: by Artem and get it’s app_id which will solve your problem, or you can first try to add your facebook profile id to just to see if that works or not.

This is an amazing guide! Thank you so much for posting. I have a couple of very short questions… I’m using the rank & file theme on tumblr. 1. any way to add a bit of space below the like button? It looks like it is part of the next post. 2. When you click on “like,” the overlay has no background and goes over the post below it. I thought it was supposed to adjust the height automatically?

1. Add a <br/> tag after the button code to add some space. 2. Did you take the “HTML5” code or the “iframe” one. For the iframe one add ‘height:50px’ or something like that, as per your requirement. But as I can see, the HTML5 code automatically resizes.

When I follow your instructions for adding a facebook like button to tumblr everything works great except that any posts with multiple images disappear from my blog. The only thing that shows up in its place is simply the “posted x days ago” line.

Only when I use limited meta property tags is it possible to view the blog fully.

Can you show which post of yours, you were getting the error, as I can’t seem to replicate it at my end. Previously this was an issue with another commentator too, so I would like to know what changes in the meta property tags you made to solve this, so this may help others.

dut i still have a question – what if I want to use one of photos from photoset to open graph? cos this {block:Photoset} put my avatar as image for photoset post? Priyanka i need your proffesional adwise)

First, thank you!!! Finally something that works! But I have onw question: How can I share a youtube video to facebook when I click the “like button”? I mean, what I want is to watch that video on facebook. Thanks in advance!

Hello, I’ve recently tried to put a “like” button on my blog “leblogdolive.com” following your steps but I end up with a problem : The different buttons for the articles on the main page all act as one button. Once one is hit to like an article on the main page, all the others appear as if they’d been hit as well. This problem doesn’t appear if you’re on the article specific page, though. Do you, please, know if there’s a way to fix this ?

Hi there, this is a great plugin!! I just put it on 2 blogs I work on. The first one works well. The second one (url listed above), placing it 100% the same way, makes people “confirm” when they Like a post.

So they click Like, then they have to click text that says Confirm? Why is this? I can’t figure it out.

The confirm button is a response to the recent batch of like-jacking attacks on the Like buttons. In certain cases when they suspect a page might be involved in like-jacking based on usage patterns, Facebook include the additional Confirm step. Facebook like Conformation Button is function of how users interact with the Like button on particular Web pages/blogs/ as well as with the generated stories in their feed.

So this weird situation is blog specific and if you need more information please check the Facebook Forums.

Thanks for responding so quickly. So there appears to be no way to make the “Confirm” go away. It’s just based on how the users are interacting with it. I read most of the forum threads which at least clears up why it’s happening. Thanks!

Firstly, please add the code snippet “START For Facebook Open Graph” till “For Facebook Open Graph END” i.e mentioned in A-STEP 4 in my post above just before your </head> not after it.

Secondly, please do not drag and copy the code it is taking the 1,2,3,4 line numbers too. Just mouse-over the code boxes. You will see four buttons are visible now. Click on the view source button and copy the code, then paste it in your tumblr theme page.

The error is as follows; Object Invalid Value Object at URL ‘http://getmehomeintimefortea.tumblr.com/post/12569028593/mcdonald-giles-flight-of-the-ibis’ of type ‘article’ is invalid because the given value ‘en_en’ for property ‘og:locale:locale’ could not be parsed as type ‘enum’.

Everything works great, the only problem I seem to have is the Like and Send buttons only link to the base url (http://songbookunbound.tumblr.com/) rather than the permalink for the post. Not sure what I’m doing wrong?

For photosets, you can also generate the og:image property for each one of your pictures, so you can choose wich one will appear in the shared post: {block:Photoset}{block:Photos} {/block:Photos}{/block:Photoset}.

Hello! Thank you for these instructions. I have been looking for this everywhere. I have done the Like button in my profile already but when my friends like my posts, it doesn’t show the right picture. So I was happy to see your instructions here. But still, I encountered a problem.. I have followed your instructions very closely.. But I still get the following errors as shown here in this link: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fthe23rdfirefly.tumblr.com. Sadly, some of my posts which have photos have disappeared on my wall. I don’t know what to do next. Please help?

If you still have problem, you can check the updated code at A-STEP 4.

For the vanishing photos issue (which I also identified lately with the photosets meta), you can remove this following code from the header area and check if those disappearing images are showing up again or not. {block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}

For your query 1: I think you have copied the code in a wrong manner 🙁 . I can see some line numbers in your code too! Please visit the opengraph meta code panel in this post again, and mouse-over it. You will find four buttons coming up. Click on the view source button and copy the code, then paste it in your tumblr theme page and test again with the FB debug tool. Hope it will work now. For your query 2: Please add the facebook like-code above <div class="bottom"></div>. Then only the Facebook buttons will be near the related post.

About query 1: Please see in post, I have added an “UPDATE 30-09-11”. Let me know if it works!For query 2: I don’t get if this issue has any relation with the FB like button right now. But will let you know if I find something 🙂

just wanted to say a HUGE thank you thank you thank you — i have been googling trying to find the answer to this for days, without much luck… and this was brilliant. exactly what i needed, and worked perfectly. so happy.

Hi there, I’m using the Minimalist theme and can’t find where the {/block:Posts} is located in the code. I pasted the FB code in and a whole bunch of like buttons appeared at the top of the screen but not at the base of each post…

Hi, I have checked “the minimalist” (Free) theme in my profile and I could see the {/block:Posts} code! So please check again. You have to paste the button code just before the </article>{/block:Posts} closing div. Hope this helps. 🙂

One Trackback

[…] to know your facebook profile ID, suppose for adding a Facebook plugin in wordpress or adding the facebook like button with opengraph protocol (to place in fb:admins meta) in your website etc. But what may be the case, sometimes finding petty things becomes too tough or […]