Tag Archives: tumblr

Add QR code to Tumblr Posts

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.

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.

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.




{block:IndexPage}
    
    
    
    
{/block:IndexPage}
{block:PostSummary}
    
{/block:PostSummary}
{block:Permalink}
  
  
  {block:Posts}
      {block:Text}
        
      {/block:Text}
      {block:Photo}
        
      {/block:Photo}
      {block:Photoset}
         
      {/block:Photoset}
      {block:Quote}
        
      {/block:Quote}
      {block:Link}
        
      {/block:Link}
      {block:Chat}
        
      {/block:Chat}
      {block:Video}
        
      {/block:Video}
      {block:Audio}
        
      {/block:Audio}
      {block:Answer}
        
      {/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.