Open Graph Meta Tags

7 months 2 weeks ago - 7 months 1 day ago #71728 by iamrobert
This is the code used to set up Open Graph for FB & Twitter:

blog.kissmetrics.com/open-graph-meta-tags/

If the meta-description is blank - it will take the intro-text - and sets it up as the page's meta description.

I have created a file called open-meta.php (however you could put it into your item.php file):
$document = JFactory::getDocument();

// GET OPENGRAPH TYPE:
//https://developers.facebook.com/docs/reference/opengraph/
$fb_og_type = $this->params->get('fb_og_type');

//GET TITLE
$page_title = $document->getTitle();

//GET CURRENT PAGE URL;
$current_page_url = JURI::current(); 

//SET URL
$document->setMetaData( 'og:url', "$current_page_url", 'property' );

$document->setMetaData( 'og:type', "$fb_og_type", 'property'  );
$document->setMetaData( 'twitter:card', "summary_large_image" );

//SET TITLE
$document->setMetaData( 'og:title', "$page_title", 'property'  );
$document->setMetaData( 'twitter:title', "$page_title" );


/* + SET DESCRIPTION
	======================================================================*/	
//GET META DESCRIPTION:
$meta_description = $document->getMetaData("description"); 


/* + GET INTRO TEXT 
(If meta description hasn't been set - we can run with intro text)
======================================================================*/	
//SET INTROTEXT LENGTH
$intro_text_cut_text = $this->params->get('intro_text_cut_text','160');

$intro_text = JHtmlString::truncate($item->introtext, $intro_text_cut_text, true, false);
$intro_text = str_replace('...', '', $intro_text);



if ( !empty( $meta_description ) ) {
	$document->setMetaData( 'twitter:description', "$meta_description" );
	$document->setMetaData( 'og:description', "$meta_description", 'property'  );	
} elseif ( !empty( $intro_text ) ) {
	$document->setMetaData( 'og:description', "$intro_text", 'property'  );
	$document->setMetaData( 'twitter:description', "$intro_text" );
	$document->setMetaData( 'description', "$intro_text" );
}
	
/* + SET IMAGE FIELD NUMBER
======================================================================*/	
$imagefield = 40;

if ( isset( $item->fieldvalues[ $imagefield ]) ) {
	$siteURL = 'http' . ( empty( $_SERVER[ 'HTTPS' ] ) ? '' : 's' ) . '://' . $_SERVER[ 'SERVER_NAME' ];
	$siteURL = $siteURL . $item->fields[ 'image' ]->{"display_large_src"};
	$document->setMetaData( 'twitter:image', "$siteURL" );
	$document->setMetaData( 'og:image', "$siteURL" );
	$document->setMetaData( 'image', "$siteURL", 'itemprop');
}

I have also added to the item.xml file:

	<field name="show_open_graph" type="radio" default="1" label="Show Open Graph Meta Tag" description="To improve facebook + Twitter shares" class="btn-group btn-group-yesno">
        <option value="">FLEXI_USE_GLOBAL</option>
        <option value="0">FLEXI_HIDE</option>
        <option value="1">FLEXI_SHOW</option>
      </field>
		
<field name="fb_og_type" type="text" size="15" default="product" label="fb og type" description="FB og type" />

<field name="intro_text_cut_text" type="number" size="3" default="160" min="0" max="300" label="OG description length" description="Set to similar to meta description" />


In my item.php I call it:
if  ( $this->params->get( 'show_open_graph', 1 )) {
require_once(JPATH_SITE.DS.'components'.DS.'com_flexicontent'.DS.'templates'.DS.'iamrobert'.DS.'open-meta.php');
}

Finally in your frontend template index.php you need to call fb:admin ID and Twitter username - you could also put in your item.php
if (isset($fb_admin_id )) { if ($fb_admin_id != '123456') { $document->setMetaData( 'fb:admins', ''.$fb_admin_id.''); } } 

if (isset($twitter_user_name )) { if ($twitter_user_name != '123456') { $document->setMetaData( 'twitter:creator', ''.$twitter_user_name.''); } }


and your frontend xml:
<field name="fb_admin_id" type="text" default="123456" label="Facebook Page ID" description="Change 123456 to be your FB Admin/Page ID" size="15" />
<field name="twitter_user_name" type="text" default="123456" label="Twitter User Name" description="Change 123456 Twitter User Name" size="15" />

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
© 2018 Flexicontent. All Rights Reserved.