Monthly Archives: October 2010

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.

CloudFlare free cdn service

CloudFlare is a new cloud service which provides free website security and caching. A quick test revealed that it uses anycast geodns technology with nginx reverse caching.

The setup process is very easy. You only need to change DNS server from domain registry. Setup wizard will automatically import old DNS setting. However multi tiered sub domain won’t be detected. Both CNAME and A host will be proxyed through by default.

Once DNS change finished, your website will be severed with transparent proxies. Unwanted visitor will be screened and static assets will be cached.


Here is the page loading timeline of my test page
Without CloudFlare
Without CloudFlare
With CloudFlare
With CloudFlare
The page is very simple, but still it clearly shows there’s no measurable latency with dynamic contents and notable improvement with static assets. However text assets like html, css and js have slightly bigger size. My original is compressed with gzip -9.

Pro:

  • Anycast GeoDNS hosting
  • Vistor security screen
  • Slick analytics
  • Transparent caching around world
  • Basic account is free
  • Very easy to setup

Con:

  • Http only, no video streaming
  • Slow in Asia
  • Suboptimal gzip compression ratio

Overall I am very impressed with the free features and performance.

A Simple OpenID Login Example on Appengine

I wrote a simple openid login example.

I used user api to do the real login.
Login Buttons

Here is source code.

The idea is very simple. Instead of redirecting main page, I use javascript to popup a small page. Most providers have webpage optimized for popup. Then this page will detect callback and refresh main page and close itself. A hidden iframe will also try previous login url if available.

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.