Add Facebook Comments to Tumblr blogs (v3)

Glad this has been helpful to some of you. And thanks to those that have been willing to reply to some of those having problems getting things setup in the comments. If this page helped and if you want to say thanks, I hope you’ll take a moment to visit my wife’s site – LifeWithBoys.com

Update on July 5, 2013: It appears my new content management system is stripping out some text for some reason, so some of you that recently used these instructions may have run into a few issues. Primarily the {Permalink} code kept disappearing. Should be good now!

Updated November 29, 2012. (small changes on July 5, 2013)

(see previous version here and the original here)

I haven’t been a huge fan of Disqus for my Tumblr comments, so with the release of the new Facebook Social Plugins, I thought I would give it a try. So here is how I set it up…

Setup Facebook App

Sign up at the Facebook Developer site to obtain an App ID. Just sign up and Create New App.

https://developers.facebook.com/apps

Give the app an App Name and click Continue. (See Image 1.) Enter the Security Check (always a pain!) and click Submit. (See Image 2.)

Now you will be at the details form for your app. It looks overwhelming, but we only need to enter a few fields.

First is the Settings->Basic tab. Under Select how your app integrates with Facebook, click on Website. This should expand the Website section. Now for the fields to enter. Give your app an App Namespace – just a lowercase name for your app. Enter a Contact Email – probably has one of your email addresses already noted. Enter a Site URL(the full site for your blog) like http://blog.lifewithboys.com/. Also enter an App Domain where you will use your comments. If it is the same as your blog, you can enter that domain (blog.lifewithboys.com) or you can have it span your entire domain (lifewithboys.com). (Update due to Facebook change: Lastly, set Sandbox Mode to Disabled.) Click Save Changes. Now go ahead and write down that App ID you see on this page. We’ll need it later. (See Image 3.)

Go to the App Details tab (this was in the Settings->Advanced section when the screenshots were taken). You can enter a User Support email or web page. Click Save Changes. Don’t worry about the Privacy Policy URL error if it shows up. (See Image 4 and Image 5.)

Go to the Roles tab (Update due to Facebook change: This is now under Settings->Developer Roles). Here you can add additional comment moderators. Under Administrators, click Add. Choose a Facebook user of your liking. Your moderators will need to confirm the request to be an administrator. (See Image 6.)

Your Facebook configuration is complete.

Modify Tumblr Theme

Now let’s edit our Tumblr Theme. Go to your Dashboard, and click Customize on the right sidebar. Go to the Theme tab and set the theme to Custom HTML (you may already use custom HTML). [Tumblr update: It appears Tumblr moved the customization stuff around a bit. Now you will need to go into your Dashboard. Click the Settings (gear icon) button in the top navigation. Click your blog's name on the left side. And click Customize in the Theme section. Then click Edit HTML.]

At the top of the code, you should see the <head> tag; add the following after this tag.

<meta property="fb:app_id" content="111111111"/>

Change 111111111 to the App ID you created.

Add the following just after the above line.

<meta name="if:Facebook Comments On" content="1" />

This will allow you to enable/disable the comment feature.

Now, sift through the code and find the <body> tag (it may be something like <body onLoad=”blah”> as well). Add the following after this tag.

{block:ifFacebookCommentsOn}<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>{/block:ifFacebookCommentsOn}

Where you display the Comment Count (comments, not Tumblr Notes) on your listing and detail pages, you will want to add the following.

{block:ifFacebookCommentsOn}
<span><em><a href="{Permalink}#facebook_thread"><fb:comments-count href="{Permalink}"></fb:comments-count> Comments</a></em></span>
{/block:ifFacebookCommentsOn}

You can change the Comments text to whatever you like. As it is, it will show 0 Comments or 230 Comments.

Where you want the Comments to appear, add the following.

{block:ifFacebookCommentsOn}
<a name="facebook_thread" id="facebook_thread"><!-- --></a>
{block:PermalinkPage}
<fb:comments href="{Permalink}" num_posts="20" width="476"></fb:comments>
{/block:PermalinkPage}
{/block:ifFacebookCommentsOn}

You can adjust the Number of Posts (num_posts) and the Width (width).

If you are using a default template, it may be easiest to just track down where the Disqus code is, and add the Facebook code above or below it. It is usually found near something like {block:IfDisqusShortname}

When you are done, save the edits. [Tumblr update: With the recent update, now you just Update Preview. Then click Save.]

Tumblr Settings

Go to the Appearance tab, and remove any text from the Disqus Shortname if that exists. This will disable Disqus comments if you use those. And make sure Facebook Comments On is checked. – [Tumblr update: It appears Tumblr moved the customization stuff around a bit. Now you will need to go into your Dashboard. Click the Settings (gear icon) button in the top navigation. Click your blog's name on the left side. And click Customize in the Theme section. This will bring up some options and a preview of your theme. On the left, you will see the Disqus Shortname and the Facebook Comments On checkbox.]

Notifications Easy

Someone in the comments asked how you could receive notifications when you receive comments. Fair question. I’ll break this into two sections.

If you just want to be notified in Facebook, go to your moderation page: https://developers.facebook.com/tools/comments. Click on Settings on the right side. Add yourself as aModerator. Now when new posts are added, you should get a notice in your Facebook notifications section (the globe at the top of your Facebook page when you log in).

Most of you can consider yourself done at this point. If you want to enhance notifications, you can continue to the next section; but it is really not necessary for most!

Notifications Not So Easy

If you want email notification when new comments are added, it requires a bit more effort, including a web host that supports PHP. There are a few sites with notes on how to do this, but I will add a quick “how to” specific to our setup above. (and thanks to some folks like Juicy Scripter on stackoverflow for insight into this portion)

First, you need to get a copy of jQuery. You can download a copy and save to your host, or just use the Google hosted version. If you already load jQuery into your site for other purposes, you can skip this code snippet. We will assume you will use the Google version. So add this right before your closing head tag – </head>

{block:ifFacebookCommentsOn}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>{/block:ifFacebookCommentsOn}

Up above in our instructions, we added some code after the <body> tag. Here it is as a reminder:

{block:ifFacebookCommentsOn}<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>{/block:ifFacebookCommentsOn}

We need to replace that code with this:

{block:ifFacebookCommentsOn}<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '111111111',
status : true, cookie : true, xfbml : true
});
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>{/block:ifFacebookCommentsOn}

Change 111111111 to the App ID you created way up above.

Right before your closing </body> tag, you need to add this:

{block:ifFacebookCommentsOn}<script type="text/javascript">
$(window).bind("load", function() {
FB.Event.subscribe('comment.create',
function(response) {
$.post('http://mysite.com/folder/notify.php', {
"actionis": "comment was added", "urlis": response.href, "idis": response.commentID
});
}
);
});
</script>{/block:ifFacebookCommentsOn}

Change http://mysite.com/folder/notify.php to the URL of your notify script you make below.

Now create a PHP file on your web host. Name it whatever you noted above. It should contain the following script.

<?php
$admin_email = 'demo@gmail.com';
$actionwas = $_REQUEST['actionis'];
$commentID = $_REQUEST['idis'];
$page_href = $_REQUEST['urlis'];
$message = "A new {$actionwas} to your site. \n\n Web site: {$page_href} \n Comment ID: {$commentID}";
mail($admin_email, 'New Comment left on your site.', $message);
?>

Change demo@gmail.com to your email address.

These notifications instructions need to be tested a bit more, but seem to be working for us so far.

 

Good luck and Enjoy!

6 comments

Leave a Reply

  1. Mark Taylor · November 29, 2012

    having facebook app is good way of socializing your business, many companies are offering services of Facebook Applications Development development so it is no more difficult to get developed the desired app.

  2. Charlie Evans · November 29, 2012

    Hi there, this doesn’t seem to be working anymore. I can’t see the walkthrough just the people saying how wonderful it is. Can you repost or fix please? Thanks

  3. Victoria Miller · November 29

    Hi. This works! I have just one question:

    My “easy notifications” do not work. So I add the “not so easy”. Thing is:

    When I add

    {block:ifFacebookCommentsOn}{/block:ifFacebookCommentsOn}

    right BEFORE the tag, it messes up my whole theme. I tried several themes, by different developers, all with the same result. If add the code right after the , this does not happen, BUT the notifications do no work. Any ideas? thank you so much!!!

    • Roy · November 29

      Hi, Victoria. Without a link, I’d have a hard time troubleshooting. I will say that many themes already use jquery, so it may be redundant to add the code you noted. Thanks!

  4. growwlerband · November 29

    Hey SRCCD, if we had a question about this facbook comment plugin article in regards to our bands website tumblr, how could we present it to you? do you have an email or would you prefer if we just asked you the ? in this comments section??
    thanks,
    growwler
    growwlersounds@gmail.com

    • Roy · November 29

      Email sent. Post here or reply via email. Cheers!