Archive

Posts Tagged ‘tumblr’

Add QR code to Tumblr Posts

October 24th, 2010
No comments

It’s super simple to add a QR code to each Tumblr post. Just add this to anywhere between {block:posts} in your custom template.

{block:posts}
<img src="http://chart.apis.google.com/chart?cht=qr&chs=116x116&chl={ShortURL}"/>
{/block:posts}

Here is an Example on my tumblr.

Bookmark and Share  
 

Yejun Web ,

Integrate open graph with tumblr

October 13th, 2010
No comments

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.

My test page
Facebook with open graph

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.

Bookmark and Share  
 

Yejun Web , , , ,