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

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

Теги протокола 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 теги нам надо будет вывести на страницах сайта.

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

//Мета теги определения месторасположения






Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
9a6b53df94eee60361bb912066c9a522').innerHTML = '';
                                var prefix = 'ma' + 'il' + 'to';
                                var path = 'hr' + 'ef' + '=';
                                var addy9a6b53df94eee60361bb912066c9a522 = 'cotact' + '@';
                                addy9a6b53df94eee60361bb912066c9a522 = addy9a6b53df94eee60361bb912066c9a522 + 'mail' + '.' + 'com';
                                var addy_text9a6b53df94eee60361bb912066c9a522 = 'cotact' + '@' + 'mail' + '.' + 'com';document.getElementById('cloak9a6b53df94eee60361bb912066c9a522').innerHTML += ''+addy_text9a6b53df94eee60361bb912066c9a522+'';
"/>



/Google Plus




//Twitter
  







//Facebook












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

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

// og:image - путь к файлу изображения из элемента

 
// og:type - определяем тип

 
// og:title - показываем тайтл без всяких спец символов

 
// og:url - урл страницы
// og:description - og:description - берем описание из стандартного Мета-тег Description

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

metaogkit.php
metaogkit.xml

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



        Metaogkit
        iKIT
        nov 2016
        Copyright (C) iKIT.by
        Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
4094f4bcfc0e15f5559f12dabfcc539e').innerHTML = '';
                                var prefix = 'ma' + 'il' + 'to';
                                var path = 'hr' + 'ef' + '=';
                                var addy4094f4bcfc0e15f5559f12dabfcc539e = 'info' + '@';
                                addy4094f4bcfc0e15f5559f12dabfcc539e = addy4094f4bcfc0e15f5559f12dabfcc539e + 'ikit' + '.' + 'by'+addy_text4094f4bcfc0e15f5559f12dabfcc539e+'';
;/authorEmail>
        https://ikit.by
        1.0
    
        Metaogkit - Выод OG тегов на страницах товара jbzoo.
        
                
                
                
                
                        
                        
                
                
                        
                        
                
                
                        
                        
                
                
                        
                        
                
                
                        
                        
                
                
                        
                        
                          
                

        
        
                
        

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

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('');
                         
                        // og:type - определяем тип
                        $document->addCustomTag('');
                         
                        // og:title - показываем тайтл без всяких спец символов
                        $oggtitle = addslashes(htmlspecialchars(strip_tags($this->_item->name)));
                        $document->addCustomTag('');
                         
                        // og:url - урл страницы
                        $ogglink = JRoute::_($this->app->route->item($this->_item, false), true, -1);
                        $document->addCustomTag('');
                         
                        // og:description - og:description - берем описание из стандартного Мета-тег Description
                        $document->addCustomTag('');


                return false;                               
    }


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

}

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

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

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

 

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

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

    Пожалуйста, войдите, чтобы комментировать.

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

    • 2016-11-01
    • 6518
    • Требования: ZOO, JbZOO, Joomla
    • Версия JBZoo: 2.2.x
    • Раздел: Песочница
    • Метки: JBZoo, OG
    • Скачать
    • Размер: 2.44 KB
    • Обновлён: 2016-11-02
    • Версия: 1.0
    • Скачали: 112
    • jomla
    • jbzoo
    • css3
    • html5
    • Java script
    • jquery
    • bootstrap
    Мы находимся в Минске
    работаем по всей РБ