Twitter Comments: JS Tweet Box

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.

In March I released a tutorial for adding Facebook comments to a Blogger site. It's been by far the most popular and active post on the site. At the same time I added a prototype implementation of Twitter comments. It wasn't smooth or pretty, the code was downright ugly to be honest, but at least readers could tweet if they wanted. A number of visitors expressed interest in adding the Tweet option as well, though that code was not ready for prime time

Over the past few months I've learned a great deal more about Twitter's @Anywhere platform. After much work I am now ready to offer a robust Tweet box with additional features of my own design and implementation. My implementation includes a listing of recent tweets linking to the current page and the ability to optionally include a Follow button as well as a shortened URL using Bit.ly. Let's begin with the basics.

Installing Twitter Comments - JS Tweet Box

In an effort to be as straight forward and simple as possible, I've broken my Tweet box into a single JavaScript file which includes the necessary CSS at run time automatically. The script then looks for one very specific tag as illustrated below.

<script src='http://code.jquery.com/jquery-latest.pack.js'></script>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'></script>
<div id='js-tweet-box'></div>

Those three lines include the latest JQuery library, my JavaScript, necessary CSS and the HTML element which to hold the Tweet Box. It may be installed anywhere you like, but only once per page to any web page you like. The implementation is completely platform neutral with just a single external requirement, a Twitter App setup and included on your site as outlined here: Registering a Twitter Application. Since this site has until now been dedicated to Blogger, I'll illustrate a couple possible ways to include this functionality.

Blogger: Possible Implementations

The simplest way to include the JS Tweet Box is via an HTML/JavaScript Gadget. Simply add a Gadget, then paste in the previously supplied code, include your @Anywhere library and locate it to your liking. However, keep in mind my implementation includes a few components which a fair amount of horizontal space to look correct and is most appropriately located in the Comments section below posts, hence Twitter Comments.

Another example is the setup I currently use for this blog. I've integrated the JS Tweet Box and Facebook Comments into the comment section below each post. They only appear on post pages and are arranged in clickable tabs. This gives visitors three comment system choices arranged in a pleasing fashion. Unfortunately, such an implementation is quite a bit more complex than the simplest version. As such I plan to dedicate an upcoming post specifically to this purpose, so stay tuned for that. In the meantime, feel free to experiment with your own design to include a JS Tweet Box on your blog.

Optional Configuration

I've included an optional Follow button as well as the ability to include a shortened page URL within a Tweet by default. This is done through data attributes attached to the js-tweet-box element. Those attributes are data-publisher for a Follow button and data-bitly-key, data-login to include a shortened url via Bit.ly. I hope to include additional URL shortening services in the future(goo.gl specifically). Now, let's take a look at a couple examples. The third line of the supplied code must be modified, first let's add a follow button like so:

<div data-publisher='JSBlogStop' id='js-tweet-box'></div>

As you can see I've simply included the data-publisher attribute with the Screen Name of the account I'd like readers to follow. Now, the next example further adds a shortened url to the tweet box by default. You are required to register your own Bit.ly application to use this feature. Once you have a Bit.ly account alter the previously mentioned line like so:

<div data-bitly-key='myBitlyKey' data-bitly-login='myBitlyLogin' data-publisher='JSBlogStop' id='js-tweet-box'></div>

Once again, I've added data attributes this time specifying my Bit.ly API key and the login associated to that account. Visitors should then see a Follow button for your account and the Tweet box starts out with a short url link to the current page. It's all automatic with that simple configuration. Here's what it should look like by default for those with modern CSS3 compatible browsers(transparent background under IE 9, Firefox 3+, Google Chrome, etc.)

The Recent Tweets section only displays if Twitter Search holds a tweet containing a link to the current page. Twitter Search only retains records for approximately 4 days, so older items are not shown. I'm currently researching a method to retain records oneself in a free cloud storage medium such as Google documents, for now though only recent records are retrieved.

Conclusion

The JS Tweet Box is an easy way to integrate Tweets into any website with a custom interface for your @Anywhere application. Just a few lines of code get you a Tweet box, Recent Tweets, a Follow button and shortened url integration with Bit.ly. In a coming post, I'll show exactly how I use this feature here on JSBlogStop with a whole new tutorial and code base for tabbed Blogger, Twitter and Facebook comments. So, give it a try and stay tuned for more to come.

Support JSBlogStop:

Donate with Dwolla