GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Discuss Search Engine Optimization in relation to Joomla! 3.x. This forum will also have discussions on SEF/SEO Joomla! 3.x extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
User avatar
kregus
Joomla! Intern
Joomla! Intern
Posts: 61
Joined: Wed Apr 06, 2011 2:18 pm
Location: Amsterdam, The Netherlands
Contact:

GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by kregus » Tue Jan 15, 2013 9:44 pm

Hello everyone!

I tried several plugins which promised to add Open Graph META data (used by Facebook when you share a page) to my Joomla site, but they all displayed the wrong urls and titles. Twitter also has a cool feature named Twitter Cards, which creates a 'Summary' button beneath tweets which contain links to your website. This summary then shows a picture, a title, a description and the author of the article.

Stuff like this can greatly increase the click through rate of your tweets, or tweets of others who share your articles. Unfortunately, I was only able to find one plugin which crashed my entire website..

So I took matters into my own hands. Here is the code:

Code: Select all

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.example.com/default-image.jpg';
	    }
$doc =& JFactory::getDocument();
$doc->addCustomTag( '
<meta name="twitter:title" content="'.$this->escape($this->item->title).'">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@TwitterUsernameOfWebsite">
<meta name="twitter:creator" content="@TwitterUsernameOfAuthor">
<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:title" content="'.$this->escape($this->item->title).'"/>
<meta property="og:type" content="article"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:url" content="'.JURI::current().'"/>
<meta property="og:image" content="'.$timage.'"/>
<meta property="og:site_name" content="Your Website Name Here"/>
<meta property="fb:admins" content="johndoe.3"/>
<meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');
Add the above code in components/com_content/views/article/tmpl/default.php at line 22 (so before the ?> tag)

BE SURE TO REPLACE THE EXAMPLE WITH YOUR OWN INFORMATION, e.g. your own website title.

This code takes the url and title of the current article and makes it readable for Twitter and Facebook. It also looks if there is an intro image set, otherwise it uses the full text image, or as a last resort a default image you have specified. As a description, it uses the intro text of your articles (but strips it of all HTML tags first).

Adding this code will make your website appear way better on Twitter and Facebook. Hope this was useful!

Thetjo
Joomla! Explorer
Joomla! Explorer
Posts: 499
Joined: Fri Nov 13, 2009 1:33 pm
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by Thetjo » Mon Jan 21, 2013 3:21 pm

Wow, great feature! I always thought this was some kind of 'authority website' kind of thing!

However, hacking the Joomla core is never a good idea. You might want to look into creating a plugin out of this so that the information can be displayed without having to hack the core.
http://www.conversionreview.com/ - Start improving your conversion rate with an expert review

User avatar
kregus
Joomla! Intern
Joomla! Intern
Posts: 61
Joined: Wed Apr 06, 2011 2:18 pm
Location: Amsterdam, The Netherlands
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by kregus » Mon Jan 21, 2013 6:56 pm

Dear Thetjo,

You do not have to hack the Joomla core, you could use a template override by creating com_content/article/default.php in the HTML folder of your Joomla template. And I've never looked into creating plugins, so that's a bit out of my league still.

However, the code I posted above can be shortened. I found out that Twitter can fall back on some of the Open Graph META tags. Check out the META data on my website http://www.valuespreadsheet.com or else in the HEAD of http://www.fastcompany.com.
Some webdesign/Joomla tutorials I created:
http://www.webdesign4me.nl/knowledge-base

Thetjo
Joomla! Explorer
Joomla! Explorer
Posts: 499
Joined: Fri Nov 13, 2009 1:33 pm
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by Thetjo » Tue Jan 22, 2013 10:16 am

I know about the template overrides, but that wasn't the advice you gave in the original post :) Definitely gonna check this out further!
http://www.conversionreview.com/ - Start improving your conversion rate with an expert review

SelimAnteros
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Mar 02, 2013 4:43 am

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by SelimAnteros » Sat Mar 02, 2013 4:45 am

Hello,
When image "Invalid Url: og:image; value=/images/ ..." I get the error. please help me.

ricopoulos
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Fri Jan 06, 2012 7:56 am

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by ricopoulos » Thu Mar 28, 2013 8:38 am

Thanks a LOT !!! you make my day.

since I'm not a big code expert, I cant find the right way to add the created date bellow the title.

your code is :

<meta property="og:title" content="'.$this->escape($this->item->title).'"/>

and I'm trying to add this after : $this->item->created, JText::_('DATE_FORMAT_LC3')

to get something like that : MyArticleTITLE - CreatedDate

Thanks for your help

User avatar
kregus
Joomla! Intern
Joomla! Intern
Posts: 61
Joined: Wed Apr 06, 2011 2:18 pm
Location: Amsterdam, The Netherlands
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by kregus » Thu Mar 28, 2013 9:57 am

Dear ricopoulos,

If you want to add two string variables together, in this case the title and the creation date, you can concatenate them by using a dot (".").

For example:

content="'.titlevariable.' - '.datevariable.'"

See this link for more info http://phphowto.[URL banned].com/2006/12/co ... rings.html
Some webdesign/Joomla tutorials I created:
http://www.webdesign4me.nl/knowledge-base

sxsw
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Fri Mar 08, 2013 5:47 pm

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by sxsw » Sat Oct 12, 2013 8:59 pm

this is not work with joomla 2.5
kregus, you can post code for joomla 2.5?

ankur_akku
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Feb 17, 2014 6:35 am

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by ankur_akku » Mon Feb 17, 2014 6:40 am

Hi,

In twitter description content how to get the meta description content rather than the article content. Since its displaying the whole article content. So how could i get the meta description content in it. Also tried the php get_meta_tags function but was unable to get out the results.

JB2U
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Fri Dec 21, 2012 1:47 pm
Location: UK
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by JB2U » Mon May 19, 2014 11:22 am

Tried this and it made no difference - it removed all styling to article pages when I downloaded the core default.php and made the changes and then uploaded that to template com_content/articles directory. Then I tried adding it to my template's com_content/articles/default.php file, and it made no difference whatsoever. Shouldn't the ability to add og tags (and choose where it's a property or name) be in Joomla core? To whom can I make this suggestion ... or are they thinking about it already?
Jenina Bas
Backup today to cope with tomorrow

User avatar
modernmagic
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Mon Aug 10, 2009 3:58 pm
Location: Laguna Beach, CA, USA
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by modernmagic » Mon Apr 27, 2015 4:33 pm

Can someone help me with the coding in my template override (It is located here: /templates/base3/html/com_content/article/default.php)?

I tried this but it messes up the page layout.

Code: Select all

<meta property="og:image" content="'<?php echo JLayoutHelper::render('joomla.content.fulltext_image', array('item' => $this->item, 'params' => $params)); ?>'"/>
It is located here: /templates/base3/html/com_content/article/default.php

Do you see what I'm doing wrong with the coding?
Joomla! Website Designer http://www.modernmagic.com
Joomla! User Group Leadership Team http://www.ocjoomlausergroup.org/

User avatar
modernmagic
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Mon Aug 10, 2009 3:58 pm
Location: Laguna Beach, CA, USA
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by modernmagic » Mon Apr 27, 2015 5:06 pm

Or can it go in the fulltext_image.php layout?

Code: Select all

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image article-image article-image-full">
		<img
			<?php if ($images->image_fulltext_caption): ?>
				<?php echo 'class="caption"' . ' title="' . htmlspecialchars($images->image_fulltext_caption) . '"'; ?>
			<?php endif; ?>
			src="<?php echo htmlspecialchars($images->image_fulltext); ?>"
			alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>" itemprop="image"/>
	</div>
Joomla! Website Designer http://www.modernmagic.com
Joomla! User Group Leadership Team http://www.ocjoomlausergroup.org/

User avatar
modernmagic
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Mon Aug 10, 2009 3:58 pm
Location: Laguna Beach, CA, USA
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by modernmagic » Wed Apr 29, 2015 8:34 pm

kregus wrote:
How do I get the <meta property="og:image:type" content="image/???" /> to be automatically set using the $timage ?

The reason being that some are png and some are jpg. I noticed that if I do not have this set correctly FB's Open Graph Object Debugger will detect and issue and display the wrong image.
Joomla! Website Designer http://www.modernmagic.com
Joomla! User Group Leadership Team http://www.ocjoomlausergroup.org/

fizznotch
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Sat Oct 25, 2008 7:50 pm

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by fizznotch » Wed May 13, 2015 8:27 pm

Really great and useful original post
I routinely use com_content over-rides and so including this code has allowed me to easily include facebook tags and customize them appropriately.
For those who don't know, facebook debugger is a great resource for testing these otherwise frustrating tags!

siflaar
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun Sep 18, 2005 4:01 pm

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by siflaar » Fri May 15, 2015 8:29 am

Hello,
Great code. I was just wondering what will happen if I use quotes in my article description or contents. Will that give problems?
Greetings ,Patrick

lilysmith22
I've been banned!
Posts: 69
Joined: Sat Feb 21, 2015 6:25 am
Location: Augusta
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by lilysmith22 » Tue May 19, 2015 10:40 am

Hey,
Informative post and great code. I didn't suffer from this kind of error before but am sure if in future will happen so I will definitely shout it out.

GladToLink
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Fri May 15, 2015 5:28 am
Location: Palma de Mallorca
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by GladToLink » Wed May 20, 2015 8:32 am

lilysmith22 wrote:Hey,
Informative post and great code. I didn't suffer from this kind of error before but am sure if in future will happen so I will definitely shout it out.
ye, gonna try this out next...

Bigjohn
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 239
Joined: Mon Aug 22, 2005 5:41 pm

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by Bigjohn » Mon Sep 07, 2015 4:47 pm

did anyone ever get this for Joomla 2.5.x?

Also - would this not go best into index.php for the site default template?

thanks.
John

User avatar
darb
Joomla! Hero
Joomla! Hero
Posts: 2038
Joined: Thu Jul 06, 2006 12:57 pm
Location: Stockholm Sweden

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by darb » Fri Oct 09, 2015 10:16 am

anyone know if there exist a solution for this with a plugin etc ? similar like wordpress have? http://ogp.me/

http://forum.joomla.org/viewtopic.php?f=712&t=895772

Bigjohn
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 239
Joined: Mon Aug 22, 2005 5:41 pm

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by Bigjohn » Tue Feb 16, 2016 8:14 pm

Still trying to find a way to do this with 2.5x....

floyd1616
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Sat Sep 20, 2008 10:28 am
Contact:

Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla

Post by floyd1616 » Thu Aug 11, 2016 4:33 pm

Hi all,

you use this code in "article" page. ok

And in Home page? In the layout Blog? Nothing?

The open graph tag they should be used in all pages. Or not? The solution It is equal to that of

https://www.dart-creations.com/joomla/j ... oomla.html

Regards


Locked

Return to “Search Engine Optimization (Joomla! SEO) in Joomla! 3.x”