Пробуем и тестируем

Рецепты на все случаи жизни

Теги протокола Open Graph для ZOO + JBZoo

Теги протокола Open Graph для ZOO + JBZoo

Вот прям вот с сего вечера я решил разобраться в тегах протокола Open Graph, так как именно они определяют правильность подгружаемой в социальную сеть информации:

ТЭГОПИСАНИЕ
og:title Заголовок вашей статьи, но без брэндинга.
og:site_name Название вашего сайта (но не его адрес)
og:url URL как уникальный идентификатор вашей статьи. Он должен совпадать с каноническим URL, используемым для SEO, и он не должен включать в себя какие-либо переменные сессии, параметры идентификации пользователя или счетчики.
og:description Детальное описание контента, обычно 2 — 4 предложения.
og:image Абсолютный URL картинки, которую вы хотели бы предложить соцсети, когда люди будут «лайкать» или делиться ссылкой на ваш статью. Мы предлагаем вам использовать картинки с размерами не менее 1200×630 пикселов.
fb:app_id Уникальный ID который позволяет Facebook идентифицировать ваш сайт. Наличие этого тега критически важно для корректной работы Facebook Insights.

Помимо добавления в соцсети, данная информация берется популярными мессенджерами. Такими как Viber или Skype. 

Согласитесь, всегда приятнее видеть от собеседника не просто ссылку, но картинку с рекламой товара.

Значит будем разбираться, как это работает.

Прежде всего определимся какие OG теги нам надо будет вывести на страницах сайта.

А тегов существует множество:

//Мета теги определения месторасположения
<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Название улицы"/>
<meta property="business:contact_data:locality" content="Город"/>
<meta property="business:contact_data:postal_code" content="Индекс"/>
<meta property="business:contact_data:country_name" content="Страна"/>
<meta property="business:contact_data:email" content="Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра."/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

/Google Plus
<meta itemprop="name" content="Название сайта"/>
<meta itemprop="description" content="Описание сайта"/>
<meta itemprop="image" content="https://website.com/image250X250.png"/>

//Twitter
<meta name="twitter:card" content="summary"/>  <!-- Тип окна -->
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
<meta name="twitter:creator" content="автор"/>
<meta name="twitter:image:src" content="https://website.com/image250X250.png"/>
<meta name="twitter:domain" content="website.com"/>

//Facebook
<meta property="og:type" content="profile"/>
<meta property="profile:first_name" content="Имя"/>
<meta property="profile:last_name" content="Фамилия"/>
<meta property="profile:username" content="Ник"/>
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="https://website.com/image250X250.png"/>
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
<meta property="og:see_also" content="http://www.website.com"/>
<meta property="fb:admins" content="Facebook_ID"/>

//До кучи это все дело понимает VK. Так что все пойдет на пользу

Мы обойдемся только следующими:

// og:image - путь к файлу изображения из элемента
<meta property="og:image" content="***" />
 
// og:type - определяем тип
<meta property="og:type" content="website" />
 
// og:title - показываем тайтл без всяких спец символов
<meta property="og:title" content="***" />
 
// og:url - урл страницы
<meta property="og:url" content="'***" /> // og:description - og:description - берем описание из стандартного Мета-тег Description <meta property="og:description" content="***" />

Для начала создадим в папке metaogkit два файла:

metaogkit.php
metaogkit.xml

Начнем с конфига элемента. Вот содержимое файла metaogkit.xml

<?xml version="1.0" encoding="utf-8"?>
<element type="tritext" group="ikit.by" orderable="true">
	<name>Metaogkit</name>
	<author>iKIT</author>
	<creationDate>nov 2016</creationDate>
	<copyright>Copyright (C) iKIT.by</copyright>
	<authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;/authorEmail>
	<authorUrl>https://ikit.by</authorUrl>
	<version>1.0</version>
    <license></license>
	<description>Metaogkit - Выод OG тегов на страницах товара jbzoo.</description>
	<params>
		<param name="@advanced_label" type="jbspacer" default=""/>
		<param name="og_image" type="jbelementlist" default="" label="Картинка" description="Выберите элемент картинки" types="jbimage"/>
		
		<param name="og_image_show" type="radio" default="1" label="Показывать og:image?" description="Показывать тег image">
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</param>
		<param name="og_type_show" type="radio" default="1" label="Показывать og:type?" description="Показывать тег type">
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</param>
		<param name="og_title_show" type="radio" default="1" label="Показывать og:title?" description="Показывать тег title">
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</param>
		<param name="og_url_show" type="radio" default="1" label="Показывать og:url?" description="Показывать тег url">
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</param>
		<param name="og_description_show" type="radio" default="0" label="Показывать og:description?" description="Показывать тег description">
			<option value="0">JNO</option>
			<option value="1">JYES</option>
		</param>
		<param name="og_description_mode" type="radio" default="0" label="og:description из?" description="От куда брать description">
			<option value="0">META</option>
			<option value="1">Элемента</option>
		</param>		
		<param name="og_text_def" type="jbelementlist" default="" label="Описание og:description из элемента" description="Выберите элемент описания страницы вместо стандартного дескрипшена" types="text"/>

	</params>
	<params group="render">
		<param name="og_type_def" type="text" default="website" label="Тег tipe" description="Значение тега tipe по умолчанию" />
	</params>

</element>

Теперь имеем файл настроек элемента и будем ваять собственно простой элемент вывода тегов.

<?php
// Запрещаем прямой доступ к файлу
defined('_JEXEC') or die('Restricted access');

// Регистрируем ElementRepeatable class

class ElementMetaOgKit extends Element { //создаем класс элемента.

	//Проверка наличия значения
	public function hasValue($params = array()) {
		return true;
	}
	
	/* добавление в поиск данных элемента */
	protected function _getSearchData() {
		return value;
	}
	
    /* Добавляем возможность подачи и редактирования в админке */
    public function edit() {

	}

    /* Вывод результатов */
	public function render($params = array()) 
	    {
			$document = JFactory::getDocument(); 

			$params			= $this->app->data->create($params);
			$og_image      	= $this->_config->get('og_image');	//получаем элемент картинки из конфига
			$og_image      	= $this->_item->elements->$og_image;//докапываемся до нашей картинки в этом элементе 
			$og_image		= $og_image[0]['file'];	//выбираем первую
			$og_image		= $this->app->jbimage->resize($og_image, '300', '')->url; //формируем превьюшку при помощи обертки от jbzoo с жесткой шириной 300 пикселей

			

			$og_description_mode = $this->_config->get('og_description_mode');//Получаем из конфига редим работы описания
			
			
			if ($og_description_mode == 1) {
				$og_text_def   	= $this->_config->get('og_text_def');//получаем из настройки элемента значение описания по умолчанию
				$og_text_def   	= $this->_item->elements->$og_text_def;
				$og_text_def   	= $og_text_def[0]['value'];//и докапываемся до него
			}
			else {
				$og_text_def 	= $this->_item->params->get('metadata.description');//берем стандартное значение из дескрипшена
			}

			// og:image - путь к файлу изображения из элемента
			$document->addCustomTag('<meta property="og:image" content="'.$og_image.'" />');
			 
			// og:type - определяем тип
			$document->addCustomTag('<meta property="og:type" content="website" />');
			 
			// og:title - показываем тайтл без всяких спец символов
			$oggtitle = addslashes(htmlspecialchars(strip_tags($this->_item->name)));
			$document->addCustomTag('<meta property="og:title" content="'.$oggtitle.'" />');
			 
			// og:url - урл страницы
			$ogglink = JRoute::_($this->app->route->item($this->_item, false), true, -1);
			$document->addCustomTag('<meta property="og:url" content="'.$ogglink.'" />');
			 
			// og:description - og:description - берем описание из стандартного Мета-тег Description
			$document->addCustomTag('<meta property="og:description" content="'.$og_text_def.'" />');


		return false;				    
    }


//Валмдация элемента
	public function validateSubmission($value, $params)
		{
			return array('value' => $value->get('value'));
		}

}

Вот и все. Теперь, мы можем выбрать какие OG теги показывать на странице. Выбрать из какой картинки будет браться изображение для превьюшки. По умолчанию я установил размеры картинки в 300 пикселей. Если надо будет больше - подправьте.

Стоит обратить внимание, что элемент будет работать только в оболочке JBZoo. Так как я использовал не только его обертку для создания картинки-превьюшки, но и для полувчвания в настройках списка выботра элементов картинки и описания.

Выложу готовый элемент прямо здесь.. и до кучи продублирую в файлах на сайте. 

 

Комментарии (0)

Оставить комментарий

Вы комментируете как Гость.

Статус материала

  • 2016-11-01
  • 3653
  • Требования: ZOO, JbZOO, Joomla
  • Версия JBZoo: 2.2.x
  • Раздел: Песочница
  • Метки: JBZoo, OG
  • Скачать
  • Размер: 2.44 KB
  • Обновлён: 2016-11-02
  • Версия: 1.0
  • Скачали: 73
  • jomla
  • jbzoo
  • css3
  • html5
  • Java script
  • jquery
  • bootstrap
Мы находимся в Минске
работаем по всей РБ
  • mts+375 29 779-72-95viber
  • vel+375 44 779-72-95
  • email: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
  • skype: tirby_kat
Индивидуальный предприниматель
Кулак Сергей Николаевич
УНП: 590816946
зарегистрирован Зельвенским районным исполнительным комитетом
от 01.06.2010
Свяжитесь со мной