Posted by: Qasim Virjee on Wednesday, 30 December 2009

There are so many reasons to making your site easily visible on Social Networking websites and platforms - they raise general visibility and offer access to communities which may not otherwise find the information you spend time publishing in your posts.

Of course, one of the most agile word-of-mouth Social platforms on the web is Twitter and you may have recently noticed a pretty cool widgety thing people are using on their blogs/sites to include a 'retweet' link and counter of how many times a post has been tweeted - its powered by a site called 'Tweetmeme' and installs pretty easily on any website - whether using static html or a CMS like Joomla.

When you take a peek at the tweetmeme page containing the necessary embed code it may not be too easy to tell how to use it with your Joomla site - and though there's a couple of plugins/extension floating around Joomla, it may not offer the flexibility you require for clean theming/templating.  However, there's an easy way to go about embedding this and all it takes is a small modification of the de facto embed code. 

All you have to do is:

• copy the following code(s),
• replace 'http://mysite.com' with your own root URL and:
• replace 'twitterhandle' with your twitter handle (if you want reweets to automagically incude @yourtwitterhandle - you can opt to delete that line from the code otherwise.

For individual article template files (eg 'templates > your_template  > html > com_content > article > default.php'):

<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = 'http://mysite.com<?php echo $this->article->readmore_link; ?>';
tweetmeme_source = 'twitterhandle';
</script>

For article list pages - like section or category template files (eg 'templates > your_template  > html > com_content > category > blog_item.php'):

<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = 'http://mysite.com<?php echo $this->item->readmore_link; ?>';
tweetmeme_source = 'twitterhandle';
</script>

The trick then is to take this code and include it in the appropriate version of your theme's template files - Of course, you can see I've wrapped the code in a div called 'tweetmeme' so you can then add in some css for that div wherever you want in your template to style the tweetmeme widget.  You can learn more about Joomla templates and the files which they can comprise of in the official documentation wiki.

Basically what we've done here is include some php to tell the embed code the specific URL for each post - so the widget works cleanly on individual article pages as well as displays showing multiple articles at once.

*You can see the widget in action here on this site above - just below the title of each post. Try it out and retweet this post to see how it works!

Comments

Add New Search RSS

Twitter widgets posted by Tanika on 2010-01-23 Thanks for this useful tip, Qasim! I was planning to enrich my website with some twitter widgets and found your tut quite detailed and easy to follow. Quote

Thanks posted by John on 2010-02-12 Great guide, thanks for sharing. Quote

Useful Information posted by Joomla Web Designer on 2010-03-03 Thanks Qasim for such a useful information.I was trying to link Twitter with my Joomla site for a long time but was finding it difficult.Your information proved very helpful Quote

Write comment
Name:
Email:
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Powered by !JoomlaComment 4.0 beta2