Thursday, May 16, 2013

How to add a Facebook Like button to your Tumblr blog


Before you start, it might be a good idea to save a copy of your Tumblr theme as it is, just in case you mess up completely, because you'll be tinkering under the hood. If you don't know how to customize your Tumblr theme to begin with, you'll have to read up here: go to the Tumblr help page and search for "customize theme".
  • Go to http://developers.facebook.com/docs/reference/plugins/like/
  • Scroll a bit down and fill in the form
    • fill in the home URL of your Tumblr (http://bartvanaudenhove.tumblr.com for instance, where you change "bartvanaudenhove" into your own username, otherwise you'll be directing people to my blog which is very kind but not the idea I guess)
    • choose your settings, ticking and unticking the checkboxes (you can see the result immediately to the right)
  • Press the "Get Code" button
  • Copy the upper part (nr. 1, the "Javascript SDK") into your Tumblr theme HTML right after the <body blabla> statement (where "blabla" is of course some HTML code). To find this statement, click once inside the HTML code of your Tumblr theme (near the beginning), press Ctrl+f, and type in the search field "<body" (without the brackets). If it's not the right result, click after the highlighted result and repeat the search.
  • Copy the lower part (nr. 2, the plugin) where you want it to appear on your blog. In my case I put it in my navigation bar. I found it easily because in my theme it was marked "<!-- NAVBAR -->". If you're not that lucky, you can try to do a search on some of the words in your Tumblr navigation bar (i.e. "about" or "ask me anything" etc.), or you can copy the plugin in various places and do "Update Preview" (on top) regularly and see what happens until you get it right.
  • Save your theme ("save" button on top), go back to your blog, and have a look (don't forget to refresh your page in order to see the changes).
More info on the Tumblr theme details here: How to create a custom HTML theme.

No comments:

Post a Comment