Using Twitter to Easily Enable Comments in Your Blog

I have been asked a few times how to use Twitter in a similar way as Facebook Comments Box. I prefer Twitter for work related stuff. If you do the same then this is an easy way to use Twitter Tweet Button and Embedded Timelines to enable comments in lightweight websites without the support of a back-end.

The Button

The idea is to start with the link provided by Twitter to build your own tweet button. With a few lines of code you can customise it show a counter and to open a popup that we'll use to tweet a comment.

HTML

<a class="twitter-share-button-custom" href="https://twitter.com/share"
                  data-via="LucaBusin">
<span class="text"><span class="icon social twitter"></span></span>
<span class="count badge" style="display:none;">0</span>
</a>

Inside the <a> tag we can use different data attributes to set the tweet-comments. I used a similar approach to what is defined for the Tweet Button. In this example I only used data-via to automatically mention my account in the tweet-comment. As we'll see, the javascript code will initialize the tweet-comment with the current page URL and the the current title. If you want to change this behaviour you can set data-url and data-title.

I used a glyphicon instead of text for the button. You can use a simple label or a picture. The last element is a placeholder for the counter. By default it has a value of 0 and it is hidden. This is because I don't want to show any value until the javascript has retrieved and set the real value.

CSS

.twitter-share-button-custom {
  display: block;
  padding-top: 10px;
}

.twitter-share-button-custom .text{
  font-size: 20px;
}

At this point you want to set your own style for the button. In my example I display the whole thing as a block and increase the size of the label (affecting the glyphicon too, of course). The counter has the class badge from Bootstrap. None of this is mandatory.

Javascript

var API_URL = "http://cdn.api.twitter.com/1/urls/count.json";
var url = "";
var title = "";
var via = "";

function initTwitter(){
  url = encodeURIComponent($(".twitter-share-button-custom").data("url") || document.location.href);
  title  = escape($(".twitter-share-button-custom").data("title") || document.title);
  via = escape($(".twitter-share-button-custom").data("via"));
}

// Twitter Button
$('.twitter-share-button-custom').on('click', function(e) {
  //We tell our browser not to follow that link
  e.preventDefault();

  // Initialize values again if a script might have changed them since loading.
  // initTwitter();

  //We trigger a new window with the Twitter dialog, in the middle of the page
  window.open('http://twitter.com/share?url=' + url + '&text=' + title + '&via=' + via + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

initTwitter();

// Set Twitter count
// Get count and set it as the inner HTML of .count
$.getJSON(API_URL + "?callback=?&url=" + url, function(data) {
  $(".twitter-share-button-custom .count").text(data.count);
  $(".twitter-share-button-custom .count").show();
});

Most of the work is done by javascript. The function initTwitter set the values of the three variables URL, title and via from the data attributes in the <a> tag. If a data attribute is not present, URL and title will be set to the current page values. The function is called when loading the script. You may want to call it from the button click event handler if you set the button dinamically after loading the page.

Finally a call to the Twitter API retrieves the counter value for our url. Once retrieved, the counter value is set and it is made visible.

Comments

One way to show tweets about your page is to use the Search Timeline. This approach could fit the needs of a website with only a small number of pages (e.g. home, about, contact). Search widgets do not have any rate limit and you don't need any server application to run it. Unfortunately you cannot override search queries. To embed it in your page you have to create a widget. If you want to change the query you have to edit the widget. Similarly, when you want to create a new page with its own Twitter comments you have to create brand new widget.

If you (intend to) have several pages, this approach will get convoluted pretty quickly. In that case you might want to consider using the REST API. Since version 1.1 the API requires the request to be authenticated and it is not reccomend that you do that via client-side javascript for security reasons.

HTML

<div class="post-comments">
<h2>Comments on Twitter</h2>
<!-- Twitter widget -->
<a class="twitter-timeline" href="https://twitter.com/search?q=lucabusin.com" data-widget-id="548..."
data-link-color="#AD141E"
data-chrome="nofooter noheader transparent"
data-tweet-limit="20">Tweets about lucabusin.com</a>
<script>!function(d,s,id){...}}(document,"script","twitter-wjs");</script>
<!-- /Twitter widget -->
</div>

The first step is to create a new search widget. In this case the query should be the url of your page. Once the search query is set and the widget created, just copy the generated code and paste it to the bottom of you page. I put it inside a div block to make it easier to apply my style with Bootstrap. At this point you only need to give it some style.

CSS

.post-comments {
  border-top: 1px solid rgba(228, 229, 233, 0.96);
  margin-top: 50px;
  padding-top: 40px;
}

.twitter-timeline{
  width: 100% !important;
}

Again, this style is just an easy example. What this does is to apply margins and to make it obey to the responsiveness of the page.

Conclusion

This is not meant to be a complete solution for comments but it is an easy solution to let people talk about your page, especially when you don't have (or don't need) a server-side application.

Comments on Twitter