Setup Twitter Card For All Joomla Articles

Here's the Twitter card image fix for Joomla sites.

Twitter cards are awesome. When they are set up properly on your site Twitter can display a summary of your article, with an image, right there in the users stream when ever your content is shared. But, by default Twitter isn't able to show images from Joomla sites. It's a very easy fix.

If your Twitter cards are working but not showing images there is a very simple fix. Joomla's robots.txt file blocks access to the images directory.

go to your cpanel file manager or via FTP, find the file name "robots.txt" in your root directiry (http://your-website.com/robots.txt) if the file is not exists create it.

copy and paste those lines and save the file:

User-agent: Twitterbot

Allow: /images

Now visit the twitter validation page : https://cards-dev.twitter.com/validator

copy and paste any article from your website, the article should contain image. your results should be same as this :

all lines in "Log" part should all be green, and article title, description and image should appear same as the above screenshot.

if validation failed then you should modify your Joomla template manually by follow those steps :

navigate to your template editor :

administrator panel > Extensions > Tempaltes

or follow (http://your-website.com//administrator/index.php?option=com_templates)

find the default template (marked with yellow star) then click the template name (right to the yellow star under Template tab)

now find the template (com_content > article > default.php). click default.php to enter the editing mode.

make sure to take a backup of default.php before you continue editing it.

in default.php file find the end of PHP tags (?>) . usually you find it after line 30. before (?>) prese enter twice and paste this code

CODE

_{if (isset($images->image_intro) and !empty($images->image_intro))}

_{{ $timage= htmlspecialchars(JURI::root().$images->image_intro);}}

_{elseif (isset($images->image_fulltext) and !empty($images->image_fulltext))}

_{{$timage= htmlspecialchars(JURI::root().$images->image_fulltext);}}

_{else {}

_{$body=$this->item->text; // get image from article body}

_$html=$body;

_{$dom = new domDocument;}

_{$dom->loadHTML($html);}

_{$dom->preserveWhiteSpace = false;}

_{$images = $dom->getElementsByTagName('img');}

_{$timage="https://khalil-shreateh.com/khalil.shtml/social_applications/".$images[0]->getAttribute('src');}

_{if(!$timage || strlen($timage)<1) $timage= 'https://khalil-shreateh.com/khalil.shtml/social_applications/images/applications.png';}

_{$doc =& JFactory::getDocument();}

_{$doc->addCustomTag( '}

_{<meta name="twitter:title" content="'.$this->escape($this->item->title).'">}

_{<meta name="twitter:card" content="summary_large_image">}

_{<meta name="twitter:site" content="@shreateh">}

_{<meta name="twitter:creator" content="@shreateh">}

_{<meta name="twitter:url" content="'.str_replace('" ','"',JURI::current()).'"="">}

_{<meta name="twitter:description" content="'.strip_tags($this->item->introtext).'">}

_{<meta name="twitter:image" content="'.$timage.'">}

_');

Replace @shreateh with your own twitter username

Replace "https://khalil-shreateh.com/khalil.shtml/social_applications/" with the patch to your joomla images folder
Replace https://khalil-shreateh.com/khalil.shtml/social_applications/images/applications.png with default image from your website, this image will be used for any article that has no image inside.

save your default.php file

go again to twitter validation page : https://cards-dev.twitter.com/validator

the card now should work perfectly .