Page 1 of 1
GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Tue Jan 15, 2013 9:44 pm
by kregus
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!
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Jan 21, 2013 3:21 pm
by Thetjo
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.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Jan 21, 2013 6:56 pm
by kregus
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.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Tue Jan 22, 2013 10:16 am
by Thetjo
I know about the template overrides, but that wasn't the advice you gave in the original post
Definitely gonna check this out further!
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Sat Mar 02, 2013 4:45 am
by SelimAnteros
Hello,
When image "Invalid Url: og:image; value=/images/ ..." I get the error. please help me.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Thu Mar 28, 2013 8:38 am
by ricopoulos
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
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Thu Mar 28, 2013 9:57 am
by kregus
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
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Sat Oct 12, 2013 8:59 pm
by sxsw
this is not work with joomla 2.5
kregus, you can post code for joomla 2.5?
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Feb 17, 2014 6:40 am
by ankur_akku
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.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon May 19, 2014 11:22 am
by JB2U
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?
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Apr 27, 2015 4:33 pm
by modernmagic
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?
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Apr 27, 2015 5:06 pm
by modernmagic
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>
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Wed Apr 29, 2015 8:34 pm
by modernmagic
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.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Wed May 13, 2015 8:27 pm
by fizznotch
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!
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Fri May 15, 2015 8:29 am
by siflaar
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
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Tue May 19, 2015 10:40 am
by lilysmith22
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.
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Wed May 20, 2015 8:32 am
by GladToLink
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...
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Mon Sep 07, 2015 4:47 pm
by Bigjohn
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
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Fri Oct 09, 2015 10:16 am
by darb
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
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Tue Feb 16, 2016 8:14 pm
by Bigjohn
Still trying to find a way to do this with 2.5x....
Re: GUIDE: add FB Open Graph & Twitter Cards META to Joomla
Posted: Thu Aug 11, 2016 4:33 pm
by floyd1616
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