Tag Archives: twitter

Write a simple Google Chrome extension

An extension is a small piece of programm which add features to your web browser. In Google Chrome we will simply use HTML/CSS & Javascript to build our own extention.

The first step to build your extension is to declare a manifest.json file. JSON is a simple data exchange format (you can see a JSON file like a XML file if you want). This manifest.json file contains information about our extension: its name, description, or version. But, more importantly it will declare which libraries/api we will use and how we want to display it into the browser.

In this article we will create a simple extension to display the tweets from someone, lets started with the manifest.json file:

{
	"name": "Chrome Tweets",
	"version": "1.0",
 
	"description": "Displays tweets of someone.",
	"icons": { "128": "icon.png" },
 
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "Chrome Tweets",
		"popup": "index.html"
	},
 
	"permissions": [
		"http://twitter.com/*"
	]
}

Most of those declarations are easy to understand. Look more precisely the brower_action and the permissions blocks:

  • Our extension will be a browser action which means we want it to be available in the browser and not in a webpage (for instance subscribe to a rss feed is a page action, check regularly your gmail account is a browser action). We define an icon for our extension, and we also set the page to open when the user will click on our icon.
  • Then we have to declare permissions. It this example we will need the twitter api.

Once you have done this manifest.json file you have all you need to deploy your extension, the rest is only html/css & JavaScript like you do to develop a web site.

Now you have got to load your extension, to do that just go to the extensions management page: chrome://extensions/, enable the developer mode and load an unpacked extension.

We will see how to interact with the twitter API to retrieve all the tweets from someone and we will use a simple list template to display those tweets. To see where we are going you can take a look at the final result:

The HTML page of our extension

<html>
	<head>
		<script src="tweets.js" type="text/javascript"></script>
		<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
    <body>
        <h1 id="mainTitle">Chrome Tweets</h1>
		<div id="loader"></div>
		<div id="profile">
			<img />
			<p></p>
		</div>
		<div id="tweets">
			<ul id="timeline" />
		</div>
 
		<ul id="template">
			<li>
				<div class="text">
					<span></span>
					<a></a>
				</div>
			</li>
		</ul>
    </body>
</html>

You can easily understand this code when you compare it with the preview. The main code will be in JavaScript, if you want you can use a library like jquery to work with JSON object faster, in this example I have done it without any library.

var timeline;
var author;
var image;
 
var template;
var content;
var link;
 
var req;
var tweets;
 
onload = setTimeout(init, 0);
 
function init() {
	displayLoader(true);
 
	/* Retrieve various part of the page */
	timeline = document.getElementById('timeline');
	template = xpath('//ul[@id="template"]/li', document);
	author   = xpath('//div[@id="profile"]/p', document);
	image    = xpath('//div[@id="profile"]/img', document);
	content  = xpath('//div[@class="text"]/span', template);
	link     = xpath('//div[@class="text"]/a', template);
 
	/* Send the request */
	req = new XMLHttpRequest();
	req.open('GET', 'http://twitter.com/statuses/user_timeline/flhacqueba.json');
	req.onload = process;
	req.send();
}
 
function process() {
	var res = JSON.parse(req.responseText);
	tweets = res.concat(tweets);
	update();
}
 
function update() {
	displayLoader(false);
 
	var user;
	var item;
 
	for(var i in tweets) {
		user = tweets[i].user;
 
		/* Profile : only on the first tweet to fill the profile div */
		if (i == 0) {
			author.innerHTML = user.screen_name;
			image.src = user.profile_image_url;
			image.alt = user.name;
		}
 
		/* Add a tweet */
		content.innerHTML = tweets[i].text;
		item = template.cloneNode(true);
		timeline.appendChild(item);
	}
}
 
function xpath(expression, node) {
	return document.evaluate(expression, node).iterateNext();
}
 
function displayLoader(bool) {
	var loader = document.getElementById('loader');
	if (bool) {
		document.getElementById('tweets').style.display = 'none';
		loader.innerHTML = '<img src="ajax-loader.gif" alt="loading..." />';
	}
	else {
		document.getElementById('tweets').style.display = 'block';
		loader.innerHTML = '';
	}
}

As you can see, this is a simple Javascript code using an XmlHttpRequest object. Most of the hard work is done by the Twitter API.

First of all we initiated the request to retrieve the tweets, once twitter gave us our answer (a JSON file) we parse it and generate our list item.

Furthermore you can add more features: add an input box to give the user the ability to choose the tweets to get, get your friends list tweets or add a text-area to add a new tweet to your account. To do that you will have to use OAuth, check out the Twitter API documentation to get more info on this subject.

Add a ‘Share this on twitter’ link

In this article we will discuss about how to add a link which allow your visitors to immediately share an article from your website to their twitter account. Nowadays it is a very common feature on website and it will bring new audience. You will see that it is actually pretty simple.

First step: find a nice twitter icon. When it is about icons, I always check this website: http://www.iconfinder.net. You have plenty of choice just pick up one, for this example I choose this icon:

Ok, now we are ready to create our ‘share this on twitter’ link.
Twitter is almost making all the work for us, the only thing we have to do is to access the http://www.twitter.com/home page and add some parameters like the URL to your article.

In this example the link I should use to share this article on twitter would be:

http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113

You just need to give the link to your article. This link has to be permanent, otherwise it will not work if any changes are made.

Here is the final code to display the image and link it with twitter:

<a href="http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113">
     <img src="twitter_button.png" alt="share this article on twitter" />
</a>

Here is the result of our example:

Of course what you can do is display a pop-up towards Twitter so your visitors can still browse your website. Here is a snippet code to do so:

<html>
	<head>
		<!-- other smart stuff here... -->
		<script type="text/javascript">
			function popup_share(url, width, height)
				{
					day = new Date();
					id = day.getTime();
					eval("page" + id + " = window.open(url, '" + id + "', 'toolbar=0,scrollbars=1,location=1,statusbar=0,menubar=0,resizable=0,width=" + width + ", height=" + height + ", left = 363, top = 144');");
				}
		</script>
	</head>
 
	<body>
		<!-- other smart stuff here... -->
		<a href="javascript:popup_share('http://twitter.com/home?status=http://www.florian-hacquebart.eu/?p=113',800,320)" title="Share on Twitter">
			<img src="twitter_button.png" alt="share this article on twitter" />
		</a>
	</body>
</html>

This is the basic idea you can add other parameters to indicate a title, etc. I choose twitter for the article, but you can easily adapt it for other social network websites like Facebook, MySpace, etc it is the same pattern expect that you will have to modify the URL and its parameters (which are indeed specific to each platform).