A collection of web design related ramblings and nonsense

Facebook Open Graph Protocol on a Tumblr Blog

September 18th, 2011

When a post gets shared or ‘liked’ on Facebook you want it to have the best possible chance of getting noticed and more people to ‘like’ it for the viral explosion that everyone dreams of! You want the news item on Facebook to have a nice thumbnail, sadly Facebook doesn’t always pick up the right picture, so adding some meta content to the head of your tumblr theme allows you to set either your profile picture or photo post as the thumbnail.

On tumblr, it’s really simple, just customise your theme, go to the theme tab and add some custom HTML. Where you see all the tags, add the following code above or below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{block:Posts}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}" />
<meta property="og:image" content="{PhotoURL-400}" />
<meta property="og:image" content="{PhotoURL-250}" />
<meta property="og:image" content="{PhotoURL-100}" />
<meta property="og:image" content="{PhotoURL-75sq}" />
<meta property="og:image" content="{PhotoURL-HighRes}" />
<meta property="og:url" content="{Permalink}" />
<meta property="og:title" content="{Title} - {Name}" />
<meta property="og:type" content="article" />
<meta property="og:description" content="{MetaDescription}" />
{/block:Photo}
{/block:Posts}

In this case I’ve only applied it to the photo type posts as this is the only content i’m interested in generating ‘likes’. You’ll also need to add a Facebook Like button to your posts, some themes give you this option or you add it into the code yourself.

You’ll also notice that I’ve added multiple image items, this is fine by Facebook as you’re effectively listing all the images related to that post.

To see the generated HTML in action, visit one of my posts on my tumblr site and press ctrl+U to view the source.

It is possible to add your facebook username and app ID but when testing it, it always said it had a problem with the domain, even though I had added the URL of my site in the options, if anyone knows a solution to this, please let me know!

3 Responses to Facebook Open Graph Protocol on a Tumblr Blog

  1. This domain appears to get a large ammount of visitors. How do you advertise it? It offers a nice unique twist on things. I guess having something useful or substantial to talk about is the most important factor.

    Pat Dittemore - Sunday December 4th, 2011 at 01:17
  2. Another update on this – recently someone got in touch with me having problems getting a thumbnail to appear when posting links to her video posts on Facebook. She eventually found that ‘addthis’ plugin was causing a conflict. Thanks for http://tamarasaul.tumblr.com/ for letting me know.

    Rich - Saturday May 26th, 2012 at 12:57
  3. Commercial Keyless Entry Offers Superior Security to Doctors Offices and More.
    Career advancement depends on exposure to a wide
    range of tasks, besides enhanced skill-sets and a
    motivation to perform. Just because you don’t have tons of space doesn’t mean you
    can’t enjoy a functioning home office (or area).

    disenodeoficinas.tumblr.com - Wednesday August 20th, 2014 at 21:40

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>