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

  • Thanks so much for this tutorial! I’m not always so confident with CSS, but you made this super simple.

  • hi!
    great tutorial, but I have a problem…
    when I add A-STEP 4 text, in some posts content disappears (not in all), like this: http://macchiasnc.tumblr.com/post/31116845351/tutti-i-pong-3
    can you help me to understand what is happened?
    thanks a lot

    • 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}

  • 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.

  • dude you’re a hero. by far the best explanation i’ve seen so far.

  • 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

  • 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

  • Christian Kirberg |

    Hello Priyanka,

    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.

    I realy appreciate this. Thank you very much.

    Here is my code:

    http://pastebin.com/bEneJwWX

    Thank you very much.

    Kiri.

  • Worked great! Thanks for the detailed instructions!

  • Priyanka,
    Every time I click on “Like”, the icon simply dissapears and anything happens. I already removed the “{block:Photoset}” of the code, but the problem persists.

    Do you have any idea to solve that?

    Thanks in advance.

  • Hey! this is great, but im having a lttle trouble

    when i follow the above directions i end up with like 6 like buttons at the top of the home page, but none at the bottom of each post. why would that be?

    here is my code – http://slexy.org/view/s21m4zQWT9

    thanks so much

  • it’s nice to see this post, i love ur blog!
    however, i have gone through” B. Add Facebook Like Button code to Tumblr Theme”, but nothing happened….
    here’s my code link would u please check it for me ?

    please, i need your help!

    http://dl.dropbox.com/u/51811647/stickerholic%20%20%20.rtf

  • Hi thanks! for this post! i did it but receive and error when “Like” got any advice on what i did wrong?

  • Hi,
    Thanks for the tutorial. Everything seems to work perfect, but I still have one problem.
    While clicking on the like button inside the post counts the likes:
    http://bzemer.tumblr.com/post/22449201625/tutorial-solidworks-curved-helix
    At the main page the like button acts as a separate like:
    http://bzemer.tumblr.com/
    I think this has something to do with the the code looking for the post permalink.
    can you advise me how to solve this issue?
    Thanks ahead.

  • 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!

    • Also I will be sure to include your name in the credits at the bottom of my tumblr after getting this all figured out!

  • 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/

    Awaiting your reply. Thanks!

  • Hi!

    Thx for a great post! It really helped out.

    I just have one problem. I cant get the buttons centered. Do you have any idea what to do?

    It’s this blog I’m working on: thespectacularones.tumblr.com

    Can you help me?

    Thx in advance!

    BR // Max

    • Add your button in between <div class="clear">&nbsp;</div><!--
      //YOUR FB BUTTON HERE --> </li>

      I think you have some errors in your theme, please check them also:
      1) Your closing </head> tag is missing.
      2) You have 2 <html xmlns... > tags in your page.

  • Hi,

    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).

    Any ideas how I can fix this? I have been trying all afternoon! :(

    /Thanks, Hass

  • 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. :)

  • Could I use basically the same Facebook application and therefor the same code on two different website (one is simply mirroring the other)?

    Thanks!

    P.

    • 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.

      • Hi,

        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”.

        Thanks again,

        P.

        • Yes, I think this will work, you can create two apps for the same page for different purposes.

          • Hi,

            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.

            Thank you for your help.

            P.

  • Highly appreciated. Thanx a mill!

  • I get this error:

    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.

    • Use the updated code at A-STEP 4, so most of your errors will go away now.
      To get your facebook profile id for the fb:admins meta check this post

  • 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.

  • Hi!!

    I have followed your instructions but when I share a post on facebook , the image coming up is a photo i dont even have on the my site ..and the site title is wrong too.

    Help help help! My travel blog is http://www.fishtravels.co.uk.

    Ideally, when I share a post, the image of that post appears on FB.

    Many many thanks!

    Cheers
    Fatima

  • I’ve done everything it says to do and I’m not seeing any change.

    I didn’t know where to add the …code because my theme doesn’t have a or the other codes you listed. where should I place it?

    here’s my code… [Your TUMBLR code has been deleted !!! Use a code sharing site mentioned in post]

    • 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?

    • Did you solve this? I can’t replicate the problem in my end :(.

      • Hi,

        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…

        Thank a lot!

        ps. just in case website box doesn’t work, heres the site: http://www.hipsterdebonair.tumblr.com

  • i’ve bug problem
    https://developers.facebook.com/tools/debug/og/object?q=www.emingko.com
    i’ve change meta og:title n og:url but still it is so.. :(

  • 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?

    cheers

    dan

    • 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.

      • Is there a way to make a custom image show up when posting what u liked or want to send? I keep getting the grey blog image.

        Like Button Tag Missing: og:image is missing. The og:image meta tag is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

  • Hey,

    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?

    Many thanks,
    Morgan

    • Please check the “B-STEP 1″ again above, i.e. you need to add the like button code before the closing “</div>” or “</article>” just before the “block:Posts” variable.

  • 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..

    Could you please help me?
    Thanks, Hassan

  • I can’t seem to get the og:locale error in the debugger to go away even after adding:

    What happens if I leave it as is?

  • Object at URL ‘http://myurl.com/’ of type ‘article’ is invalid because the given value ” for property ‘og:url’ could not be parsed as type ‘url’.

    how do i fix this ???

    • Can you send the link to your site, for me to check?

      • 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?

  • hey im a noob here trying to get this done on my site but im not sure how to get my api key or where to add it on so it would work with my page ? please help

    • 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” />

  • Hi,

    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?

    • Also, on the description, it includes the title of my post, but I don’t need that there. How can I fix that? I’m currently using the minimalist theme.

    • 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.

  • New issue:

    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!).

    Thanks in advance.

  • 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}

    Hope someone can help!

    • Sorry, missed the meta code I mentioned:

      • Ok, that doesn’t work in a code box, this is it:

        • :(

          That is crashing IE, every time I post. Right, I changed meta property og:title to {title} !!

          • And the body code again which didn’t fully show, happy for someone to tidy up this thread.

            {block:IfHeaderImage}{/block:IfHeaderImage}
            {block:IfNotHeaderImage}{Title}{/block:IfNotHeaderImage}
            {block:Description}One of those creative types…{/block:Description}

          • og:title must be og:title , {title} not allowed there! I assume you want to do something like this? <meta property="og:title" content="{title}" />

            • Thank you for your swift reply, that is the code that I’ve used, which resolved the debug error on facebook.

              I’ve also tried removing that line from the code and the issue with the title still remains, which is why I wonder if I’ve accidentally done something else.

              Unfortunately the HTML box in tumblr was covering where the title displays on the preview so I didn’t notice when it occurred :(

              • 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.

        • Raw HTML is not allowed in comments. So website is automatically stripping all your codes, please convert your code: from http://www.plus2net.com/html_tutorial/tags-page.php, before you paste it here.

          • Thank you.

            Body code mentioned:

            {block:IfHeaderImage}<a href="/"><img src="{image:Header}" alt="{Title}" /></a>{/block:IfHeaderImage}<br />
            {block:IfNotHeaderImage}<a href="/">{Title}</a>{/block:IfNotHeaderImage}<br />
            {block:Description}<div class="description">One of those creative types…</div>{/block:Description}<br />

  • Hi, most most excellent tutorial! Very thorough. Thanks!

    So I’m getting this dialogue warning in the debugger:

    Inferred Property: fb:admins and fb:app_id missing. fb:admins or fb:app_id is necessary for Facebook to render a News Feed story that generates a high clickthrough rate.

    The problem is, the Facebook account that this site is associated with is for a Brand Page with no admin user — just the login credentials for the page. There is now separate user account. Thoughts?

    Thanks!

  • Hi there, this guide is great but I cant seem to get past the problem of inserting that extra meta thing. I put it in but that error code still remains. Please help!

    O.

  • 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?

    Thanks so much in advance!

    • 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.

    Thanks,
    Steve

    • 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.

  • Hi,
    I’m having the same problem as Armando Ciprian and Moto Mondiale. The like button and send button error out when I click them, and the Facebook Linter is giving me this:

    Error Parsing URL: Error parsing input URL, no data was scraped.

    I’ve tried both the HTML5 and IFrame implementations, same result on each.

    Page has been a great help, it would be wonderful if someone could figure out this last piece.

    –Doug

  • @Lucho, @Artem, @Armando, sorry am a little busy, this week. So I will only be able to get back to you after some time (because I have to go though your issues, before replying) :(

  • when trying to debug, the following message shows up:

    Error Parsing URL: Error parsing input URL, no data was scraped.

    What should I do from here?

  • when trying to debug, I get the following message and don’t know what to do. Please help:

    Error Parsing URL: Error parsing input URL, no data was scraped.

  • Hi, Priyanka! First, i want to say thank you for your helpful manual.
    But I’m afraid i have the same problem as Moto Mondiale
    http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fgirls-in-flower.tumblr.com%2Fpost%2F13448431124
    Do you have a solution?)

  • Hi, thanks for this guide.
    I’m having some trouble, http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fbarelysinful.tumblr.com%2Fpost%2F14197368641
    Instead of one image per post, all my tumblr images appear on there, but no image when i click “like”. Facebook posts only have the title of my tumblr, the picture is missing.

  • Thanks it works ;)
    So simple explained

  • 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 again,
    I’ve managed to resolve this problem with a more accurate reading of what you’ve written !

    Thanks again Priyanka !

  • 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 ?

    Thanks for all the help your blog as provided me so far !

    Tahiana.

  • Do you have plans for a post on the google +1 button ?

  • 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 (I found a similar topic here).

      • 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!

  • Thank you very much, this worked great!!

    • 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.

  • Hi, I seem to be getting an error in the object debugger on this url http://getmehomeintimefortea.tumblr.com/post/12569028593/mcdonald-giles-flight-of-the-ibis

    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’.

    I got the error after addding to the page. Can you help?

  • 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?

    • Sorry a bit late. But I could only check it today. I think you must have sorted out the issue as your like button properly captured the post url when I tested!

      Your posts are nice :) too.

  • 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}

  • Hi,
    first off all thanks a lot for your post!
    Then.. I have to kind of problems:
    1) the Facebook debug page gives the following Warnings: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmotomondiale.tumblr.com%2Fpost%2F10742127822%2Fphotojojo-leave-it-to-a-designer-photographer
    in fact in the Facebook wall the image doesn’t appear.
    2) In the blog fornt end, Facebook buttons are far from the related post and near to the successive post. Please see http://motomondiale.tumblr.com/. I have removed " adding single line space " but the problems persist.
    Can you help me? :-) Thanks in adavance,
    best, Moto Mondiale

    • 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.

  • 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…

    Are you able to help?

    Thanks!

    • 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

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