June 14th, 2011
While using Tumblr, I found a really neat way of incorporating Facebook Comments.
Feel free to check out the tumbelog at http://didgeridoodles.tumblr.com. It was used as a travel blog my partner and I kept while we traveled throughout Australia.
Adding Comments to your Tumblr Blog:
First go to the Facebook Developers Page. If you haven’t experimented with this side of Facebook yet, you should check it out. Add your web address into the URL box, adjust the extra options to your own preferences and hit the “Get Code” button so that the window opens up with your code. Copy this bit of code and move onto tumblr.
NOTE: Some people suggest replacing the “href” attribute with Tumblr’s “{Permalink}” tag to get comments for specific posts, but so far we have returned no comments using this method.
Next, log in to your tumblr account and open up your dashboard. Click your blog name next to your dashboard link to open your tumblelog and click “customize appearance.” Next, click “Theme” and open up your theme’s code. Scroll down almost to the very bottom and look for {/block:Posts} this tag tells you that you are at the end of your post. This section contains all of the content for your site, so don’t alter anything unless you know what you’re doing.
We’re going to add that bit of Facebook code into our theme now.
For this specific blog, we’ve linked to each post with a {Permalink} for the comment and some styles to match the rest of the site. The code itself is commented for the sections to be recognizable if we ever need to come back to it again in tumblr. It’s been pasted just before the footer information in each post, before the code for the post date and post tags. The Facebook comments in Tumblr code that we used looks like this:
<! —–LEAVE A COMMENT —–>
<div id=”facebook-login”>
<p><a href=”{Permalink}” style=”color: #FA7D1B;” title=”Comments” alt=”Comments”>Leave us a Comment</a> <span style=”font-size: 12px; color: #FA7D1B;”>(login required)</span></p>
</div>
<!—– END LEAVE A COMMENT —–>
This section above gives us a link to the post with comments and styled to the websites colours.
<!—– FACEBOOK COMMENTS —–>
{block:PermalinkPage}
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:comments href=”YOUR-WEB-ADDRESS” num_posts=”10″ width=”500″></fb:comments>
{block:PermalinkPage}
<!—– END FACEBOOK COMMENTS —–>
This section above gives the facebook comments we copied from the Facebook Developers site.
At this point you should make sure that your preview has been updated and your site is still functioning normally. If it is and you’re happy with the update you just made, hit “Save” to save your changes and stay within the theme editor or “Save + Close” to return to your dashboard.
You have now successfully added Facebook Comments to your Tumblr blog.
An optional modification is to add your tumblelog to the Facebook App documentation. This will help you moderate your comments if you choose to do so. Add this code to the head of your theme just before the closing </head> tag. Make sure you have an App ID from Facebook Developers.
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘YOUR-APP-ID’, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
Thanks for following along, we hope that this information has been useful in adding comments to your Tumblr blog with Facebook Comments. Check out the travel blog at http://didgeridoodles.tumblr.com. If you have further questions, feel free to write to us. Remember, Bowe is here to help by creating user friendly websites and connecting you to social media. Feel free to ask us a question or leave a reply below.
This article covers a simple process to set you up with and use a Google Analytics account on your website. At Bowe, we are always asked about Google Analytics and how to use it and why it’s important. This article will discuss how set up Google Analytics for your website.
Recent Comments