Wednesday, June 15th, 2011
I wanted a nice and simple way to offer a quick tweet button on each article in the same style and positioning as the email/print/pdf icons, which gives a very smart look, especially to section/category lists or blog articles.
I’m not sure how relevant being able to open up articles as pdf files is to most joomla installations, it certainly isn’t to any I have done, so I thought I’d re-use and re-hash the pdf code, the code responsible for supplying the icon and link to the pdf file, and adapt that to make a very neat twitter icon with dynamic title link.
First thing was to actually edit the typography.png file, which you will find in various places in a joomla installation. But if your template has one (most do), that is the one to edit. Open it up in photoshop or similar and carefully cut the pdf icon and replace it with the icon you want, in this case the standard blue twitter t icon.
I used photoshop guidelines to ensure positioning was correct, as the icon css is very precise. Just make sure that the new icon fits in the same space as the old PDF one.
Next I needed to edit the icon.php file which is located in the html/com_content folder of your theme.
The relevant section begins:
function pdf($article, $params, $access, $attribs = array())
{
I basically commented out the original pdf function and added a new one:
function pdf($article, $params, $access, $attribs = array())
{
// Get Article Title
$option = JRequest::getCmd('option');
$view = JRequest::getCmd('view');
// If article view get title based on article id
if ($option=="com_content" && $view=="article") {
$ids = explode(':',JRequest::getString('id'));
$article_id = $ids[0];
$tdarticle =& JTable::getInstance("content");
$tdarticle->load($article_id);
// Add that to tweet status and encode it for proper url
$td_tweet=urlencode($tdarticle->get("title"));
}
else
{
// Else in list view get title based on article slug
$tdarticle =& JTable::getInstance("content");
$tdarticle->load($article->slug);
// again add to tweet status and encode
$td_tweet=urlencode($tdarticle->get("title"));
}
// Build URL to article (may differ depending on your setup)
$menuitem=$article->slug;
$arturl = JRoute::_(ContentHelperRoute::getArticleRoute($menuitem));
// Need to add a dummy section to force page into own view (not front page)
$lastslash=strrpos($arturl,'/');
$firsthalf=substr($arturl,0,$lastslash);
$lasthalf=substr($arturl,$lastslash);
$newarturl=$firsthalf . "/a" . $lasthalf;
$url="http://cotswoldfood.co.uk" . $newarturl;
// Build first part of tweet URL
// NB using new twitter intent format
$td_tweeturl = 'http://twitter.com/intent/tweet?status='.$td_tweet.'+on+<name of your site>:+';
// shorten URL to actual article
// Using tinyurl NB Curl must be enabled on your web server
$urlapi = "http://tinyurl.com/api-create.php?url=".$url;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $urlapi);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$shorturl = curl_exec($ch);
curl_close($ch);
// Set full tweet url including shortened url to article
$td_tweetfull=$td_tweeturl . $shorturl;
// Following line was left as is
$status = 'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no';
// checks template image directory for image, if non found default are loaded NB This is where it looks for typography.png. If your template doesn't have one you will need to edit the default png file.
if ($params->get('show_icons')) {
$text = '<span></span>';
} else {
$text = JText::_('tweet').' ';
}
// Attributes to open new window, size etc. Left as is except for 'title'.
$attribs['title'] = JText::_( 'tweet' );
$attribs['onclick'] = "window.open(this.href,'win2','".$status."'); return false;";
$attribs['rel'] = 'nofollow';
// Return and Display The Icon And Link
return JHTML::_('link', JRoute::_($td_tweetfull), $text, $attribs);
}
// Done
With some trial and error you should be able to utilise this code, even adding a completely new icon and keeping the pdf one, to pretty much do whatever you want in that top right hand icon area.
