The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 17 posts ] 
Author Message
PostPosted: Tue Jan 15, 2013 9:44 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Wed Apr 06, 2011 2:18 pm
Posts: 60
Location: Amsterdam, The Netherlands
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:
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!


Top
 Profile  
 
PostPosted: Mon Jan 21, 2013 3:21 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Fri Nov 13, 2009 1:33 pm
Posts: 500
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


Top
 Profile  
 
PostPosted: Mon Jan 21, 2013 6:56 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Wed Apr 06, 2011 2:18 pm
Posts: 60
Location: Amsterdam, The Netherlands
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


Top
 Profile  
 
PostPosted: Tue Jan 22, 2013 10:16 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Fri Nov 13, 2009 1:33 pm
Posts: 500
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


Top
 Profile  
 
PostPosted: Sat Mar 02, 2013 4:45 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Mar 02, 2013 4:43 am
Posts: 1
Hello,
When image "Invalid Url: og:image; value=/images/ ..." I get the error. please help me.


Top
 Profile  
 
PostPosted: Thu Mar 28, 2013 8:38 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Jan 06, 2012 7:56 am
Posts: 2
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


Top
 Profile  
 
PostPosted: Thu Mar 28, 2013 9:57 am 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Wed Apr 06, 2011 2:18 pm
Posts: 60
Location: Amsterdam, The Netherlands
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


Top
 Profile  
 
PostPosted: Sat Oct 12, 2013 8:59 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Mar 08, 2013 5:47 pm
Posts: 3
this is not work with joomla 2.5
kregus, you can post code for joomla 2.5?


Top
 Profile  
 
PostPosted: Mon Feb 17, 2014 6:40 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Feb 17, 2014 6:35 am
Posts: 2
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.


Top
 Profile  
 
PostPosted: Mon May 19, 2014 11:22 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Dec 21, 2012 1:47 pm
Posts: 28
Location: UK
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


Top
 Profile  
 
PostPosted: Mon Apr 27, 2015 4:33 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Aug 10, 2009 3:58 pm
Posts: 279
Location: Laguna Beach
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:
<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/


Top
 Profile  
 
PostPosted: Mon Apr 27, 2015 5:06 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Aug 10, 2009 3:58 pm
Posts: 279
Location: Laguna Beach
Or can it go in the fulltext_image.php layout?


Code:
<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/


Top
 Profile  
 
PostPosted: Wed Apr 29, 2015 8:34 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Aug 10, 2009 3:58 pm
Posts: 279
Location: Laguna Beach
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/


Top
 Profile  
 
PostPosted: Wed May 13, 2015 8:27 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 25, 2008 7:50 pm
Posts: 18
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!


Top
 Profile  
 
PostPosted: Fri May 15, 2015 8:29 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Sep 18, 2005 4:01 pm
Posts: 4
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


Top
 Profile  
 
PostPosted: Tue May 19, 2015 10:40 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Feb 21, 2015 6:25 am
Posts: 32
Location: Augusta
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.


Top
 Profile  
 
PostPosted: Wed May 20, 2015 8:32 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri May 15, 2015 5:28 am
Posts: 8
Location: Palma de Mallorca
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...


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 17 posts ] 



Who is online

Users browsing this forum: No registered users and 14 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group