Integrate open graph with tumblr
Facebook Like button relies on Open Graph protocol to provide site information such as name, image and title.
With tumblr’s custom HTML theme, you can integrate open graph protocol in your theme. When user click on a like button, facebook will display your real site name instead of domain itself. If it is a photo post, in activity stream a nice thumbnail will be displayed.
Here is a tumblr theme fragment which includes required items. I also uploaded images for all post types.
<meta property="og:site_name" content="{Title}" />
<meta property="fb:app_id" content="FACEBOOK_APPID"/>
<meta property="fb:admins" content="FACEBOOK_USERID" />
{block:IndexPage}
<meta property="og:image" content="{PortraitURL-128}" />
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="YOUR_SITE_URL" />
{/block:IndexPage}
{block:PostSummary}
<meta property="og:title" content="{PlaintextPostSummary}" />
{/block:PostSummary}
{block:Permalink}
<meta property="og:type" content="article" />
<meta property="og:url" content="{Permalink}" />
{block:Posts}
{block:Text}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/mmHla8c7g/text.png"/>
{/block:Text}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}"/>
{/block:Photo}
{block:Photoset}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/ACBla8cb5/photo.png"/>
{/block:Photoset}
{block:Quote}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/kahla8ccw/quote.png"/>
{/block:Quote}
{block:Link}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/K6Vla8cek/link.png"/>
{/block:Link}
{block:Chat}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/9Ysla8cgl/chat.png"/>
{/block:Chat}
{block:Video}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/KiUla8chx/video.png"/>
{/block:Video}
{block:Audio}
<meta property="og:image" content="http://static.tumblr.com/vswwmyc/FyZla8c36/audio.png"/>
{/block:Audio}
{block:Answer}
<meta property="og:image" content="{AskerPortraitURL-128}"/>
{/block:Answer}
{/block:Posts}
{/block:Permalink}If you use Disqus comments system, you probably already have a facebook app id. You can find out both your app id and user id on facebook insights page. When you click “Insights for your Domain”, you will see a list of your apps and yourself. If you select any of them, the correct meta tag will be displayed.
RSS
Follow