Due to an Upcoming change by Twitter in their API, Twitter comments will cease to function sometime early in 2013 at the latest. Unfortunately, this cannot be fixed reasonably and no further support will be available. I hope everyone that's used my script over the past year and a half has enjoyed it, but regretfully Twitter is no longer friendly to this type of usage and I've ceased development for their service.
Twitter and Facebook have come to dominate social media in the past few years. Although many other services exist, these two have grown to mammoth proportions dwarfing most others. As such there's a fair chance your blog readers have an account with one or both, though they may not have an account compatible with Blogger comments. In order to increase interactivity of your blog, wouldn't it be nice to broaden your reach by utilizing these two social titans?
In this post I detail how to implement both Twitter and Facebook comments into each blog post along side Bloggers own comment system. This tutorial results in comments which look and function exactly as those active on this blog at the time of publication. End result being a three tab paged comments section with active counts for the number of comments under each for the page.
|Preview of this Tutorials Results in CSS 3 compatible browsers, includes color customization for this template|
Twitter and Facebook AppsEach Social Network offers Applications for developers. Although most of us certainly are not programmers, it's still quite helpful and useful to register apps of your own. Facebook Comments, fortunately, do not require an application to function. However, one is needed to access all available features such as comment administration and Facebook notifications. As yet I do not have a tutorial, but you may register your own app at Facebook Developers.
Installation: Include Necessary ScriptsNow, we must add the scripts necessary to support each comment system. Open your blog template in Design->Edit HTML and check the Expand Widget Templates box. Using your browsers search function, hit Ctrl+F, to find <head>. One line below insert the following script includes:
Adding the Comments TabsNext, we must add Tabs from which a reader may choose their preferred comment system. Each tab is styled to reflect the color scheme of the associated service and includes a readily identified icon for easy use. Search with Ctrl+F for class='comments' and place the following code on the line below the found text:
<div class="comments-tab" id="blogger-comments" title="Comments from Blogger">
<div class="comments-tab" id="twitter-comments" title="Comments with Twitter">
<span class="js-page-tweet-count" expr:href='data:post.url'/> Tweets
<div class="comments-tab" id="fb-comments" title="Comments made oFacebook">
<fb:comments-count expr:href='data:post.url'/> Comments
Choosing Default CommentsI've upgraded the code since the Facebook Comments box post to make choosing which page displays by default simple. My code makes Blogger comments visible out of the box, however you may choose another by including the class, js-default-tab, on the comment tab of your choice. For instance to display Twitter comments by default change the following line:
<div class="comments-tab" id="twitter-comments" title="Comments with Twitter">The same can be done for Facebook comments as well, just add the js-default-tab class and you're set. Keep in mind, this only functions for 1 tab at a time and always the first encountered in the code.
<div class="js-default-tab comments-tab" id="twitter-comments" title="Comments with Twitter">
Setting up Comments PagesInclude this code just below the previous addition to create space for both Twitter and Facebook comments as well as creating a correctly styled Blogger comment section.
<div class='comments-page' id='twitter-comments-page'>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments expr:href='data:post.url' num_posts='10' width='400'/>
<div class='comments comments-page' id='blogger-comments-page'>
Optional ConfigurationTwitter Comments have a few options you may wish to configure. The changes are easy enough to make, simply alter the 2nd line of the page code above as outlined in the JS Tweet Box tutorial. This allows you to add a Follow button and include short urls using a Bit.ly application.
Facebook comments include three options as well. If you notice in the line above beginning <fb:comments there is a num_posts and width number set. The first sets how many Facebook comments are shown by default, alter this to your liking. The second is the width of the comments box. I recommend setting it near to the width of your blogger comments. Finally, if you've chosen to forgo a Facebook App you may still moderate the comments by including the following line below the <head> tag as this tutorial began:
<meta content='YOUR_FB_ID' property='fb:admins'/>Replace the YOUR_FB_ID item with your actual Facebook ID and so long as you're logged into Facebook you may moderate the comments. However, you will not receive notifications of comments despite Developer documentation otherwise, at least I have not. In order to get both moderation and notifications you'll need to register a Facebook App and include this meta tag below the <head>
<meta content='YOUR_APP_ID' property='fb:app_id'/>