How To: Add Open Graph and Twitter Card Meta Tags to Joomla

I am so sick of searching through that Joomla Extension directory. Even though they've updated the site for better search, it still takes a lot of testing various plugins to get the right one. And some of them can crash your site. Compared to OSCommerce Addon directory (which has been the same for years! Still the same mess!) it is great, but compared to WordPress's plugin directory, it is still put to shame. In my opinion.

UPDATE

Some glorious person/company has created a free plugin for Joomla that creates Open Graph Meta Tags for Virtuemart and regular Joomla! You don't even have to read this article! Woohoo! Thanks, Abhishek Das!

Get The VM OG Meta Tag Plugin

Anyways! I needed to get in on the Twitter Card scene. Facebook/Google Plus/LinkedIn Open Graph tags were easy to use. When these Twitter Cards came into view, you would figure that there's a simple plugin for this. Nope! Still all crap if you're looking for free.

So I've done all of the Google searching for you. I have the code that works for adding Open Graph tags and Twitter card tags for your site. It's very simple! Most sites have missed just one line, so here it is. This is adding the tags for Joomla 2.5.6.

Step 1: Find the Right File

Login to your FTP. You may want to get a developer's help so that you don't mess things up. As always, backup your site! Both the files and database, as always. Don't say I didn't warn you!

When you're logged in, go to public_html/templates/YOUR_TEMPLATE/index.php. This file normally includes the head tag that you are looking for. HOWEVER, it is not recommended to edit this file, because it is part of your main template, and updates may get rid of your changes. Therefore, consider going to public_html/templates/YOUR_TEMPLATE/html/ instead. Either one can add tags to the head. The HTML folder holds your customizations. I will continue on with this one, to add the tags for articles.

In here you should have a folder named com_content. If not, you may need to create the path. One thing that is helpful to do, in case of updates, write down EVERYTHING that you change in your site, especially it's files, into a document. This way, if you change your template or upgrade Joomla with a fresh install or whatever, you can go to this doc and reference what you need to customize. Saves you money if you use a developer for this.

Create the path if it's not there, or go to it:

public_html/templates/YOUR_TEMPLATE/html/com_content/article/

In this path, you need to edit/create the file default.php. I'll place in the whole thing for you!

Step 2: Paste in this Code in the File

In the code below, you need to add your own information. This will be noted in capital letters. Here, I am using code for a Large Image Summary Twitter Card. If you want another type, read through their docs on the various Twitter Card Types.

/* BEGIN: Open Graph and Twitter Card Tags */
$images = json_decode($this->item->images);
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 {
	$timage= 'http://www.developerzblock.com/images/developerz-block-share-image.jpg';
}
$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="@YOUR_TWITTER_HANDLE">
<meta name="twitter:creator" content="@YOUR_TWITTER_HANDLE">
<meta name="twitter:url" content="'.JURI::current().'">
<meta name="twitter:description" content="'.strip_tags($this->item->introtext).'">
<meta name="twitter:image" content="'.$timage.'">

<meta property="og:site_name" content="YOUR_SITE_NAME"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="'.JURI::current().'"/>
<meta property="og:title" content="'.$this->escape($this->item->title).'"/>
<meta property="og:image" content="'.$timage.'"/>
<meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');
/* END: Open Graph and Twitter Card Tags */

Save this file. Clear your caches just to be sure. Then refresh your site! You should see something like below in your head tag through the code Inspector.

Your work is not done! You have one more step to ensure that you can use Twitter Cards. Your Open Graph items should already be set.

Step 3: Validate Your Twitter Cards and Whitelist You Site with Twitter

Twitter only lets the elite and complete into their club of Cards. Since I was already signed up for Twitter Developers, I am not sure whether you need to sign up for it to whitelist your cards (This may have changed since I've added Twitter Cards). Try going here to the Twitter Cards Validator and logging in with your current Twitter login. If that doesn't work, you may need to sign up to join Twitter Dev area.

Enter a blog post or page that you would like to have a Twitter card into the Card URL input field. Press Preview Card to get some results.

If your card is accepted, you will get a message in green noting that your site has been whitelisted for use of Twitter Cards. If you're missing any items, the log on the bottom right will let you know.

You should be all set! try posting a tweet from your blog. For Twitter Large Image summary cards, the image and description may not be displayed right away. There will be a "View Summary" link at the bottom of your tweet that users can click to read more about the page. Click on that, you will see all of the information that you entered in the Twitter meta tag fields.

Enjoy! Remember, this was for Joomla 2.5.6, but it can most likely work with future versions, maybe even previous ones. (You should really upgrade!).

Add comment


Security code
Refresh

Search

Visit fbetting.co.uk Betfair Review