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).
No comments:
Post a Comment