Поскольку facebook является неотъемлемой частью продвижения для любого ресурса и всякие кнопки поделиться и кнопки лайкнуть просто жизненно необходимы. Но какую именно информацию должен подхватывать не понятно. Все сайты разные по своей структуре не говоря уже о классах поэтому, что бы робот facebook не хватал что попала со страницы существует протокол Open Graph. Что это такое и как он облегчает жизнь роботам соц сетей читайте здесь.
К сожалению очень мало информации по этому вопросу в интернете особенно в рунете. Все что нам может предложить google для решения задачи по вставке open graph protocol в joomla? это парочка плагинов которые позволяют вставлять свои meta и теги head. Один из популярных являет ITP Meta. Принцип работы его бесплатной версии мягко говоря странный. После того как вы создали статью, вам необходимо отдельно для каждого материала прописывать мета теги. Не желая мирится с такой рутинной работой я предлагаю вам воспользоваться моим методом.
Итак для начала чтоб стало совсем понятно почему надо ставить Open Graph protocol для facebook в head Joomla. Вот как выглядит материал без специальных записей.
А вот так он выглядит со всеми необходимыми записями. Под необходимыми я подразумеваю основные. Так как записей очень много некоторые из перечисленных meat тегов протокола Open Graph которые будут в этой статье не очень нужны facebook-у, но они являются обязательными для скажем pinterest.
Добавление Open Graph protocol в Joomla
Итак данный этап будет первым на пути к счастью и красивых окошек «Поделиться на Facebook». Не проверял на Joomle 2.5 так что не обессудьте. Но для Joomla 3.2 работает идеально. Итак для начала нам понадобиться отредактировать файл статьи.
- Идем сюда: /components/com_content/views/article/tmpl
- Открываем файл: default.php
- Далее ищем 14-ую строчку с комментарием: // Create shortcuts to some parameters.
- Далее необходимо определить переменную для даты создания статьи. Для этого добавляем следующую строчку куда угодно в список переменных. В итоге должна появится новая переменная $datepubl. Для примера вот как это у меня.
$user = JFactory::getUser();
$datepubl = $this->item->created;
$info = $params->get('info_block_position', 0);
Далее перед закрывающимся знаком « ?> » примерно строчка 25, вставляем следующий код
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://komarovdesign.com/images/logo_12x.png';
}
$doc =& JFactory :: getDocument();
$doc -> addCustomTag( '
<!-- Open Graph data -->
<meta property="og:title"content="'.$this -> escape($this -> item -> title).'"/>
<meta property="og:type"content="article"/>
<meta property="og:url"content="'.JURI :: current().'"/>
<meta property="og:image"content="'.$timage.'"/>
<meta property="og:site_name"content="Blog about web design, css & code."/>
<meta property="article:published_time"content="'.$datepubl.'"/>
<meta property="article:author"content="Artem"/>
<meta property="fb:admins"content="100007059401635"/>
');
Как видите все просто. Что касается картинок то идет следующий порядок если нет картинки для вступительной части материала, берется картинка полного материала, если и ее нет то берется логотип сайта. Его разумеется надо указать заменив на свой в строчке 'http://komarovdesign.com/images/logo_12x.png'
Далее так же ручками необходимо прописать описание вашего сайта в строке "og:site_name". Указать автора статьи "article:author". В строке "fb:admins" необходимо прописать ID вашего профиля на facebook.
Если внимательно читали то заметили что тут нет основного тега "og:description" он добавляется в другом файле.
- Идем сюда: libraries/joomla/document/html/renderer/
- Открываем файл: head.php
- Ищем примерно 106 сточку с комментарием: // Don't add empty descriptions
- И после основного description вставляем мета тег Open Graph protocol. В итоге должно получиться следующее.
{
$buffer .= $tab . '<meta name="description" content="' . htmlspecialchars($documentDescription) . '" />' . $lnEnd;
$buffer .= $tab . '<meta property="og:description" content="' . htmlspecialchars($documentDescription) . '" />' . $lnEnd;
}
Вот и все. После всех этих манипуляций вы сможете проверить все ли вы правильно сделали воспользовавшись специальным инструментом facebook Debugger.https://developers.facebook.com/tools/debug/ . Он позволяет поверить правильность разметки и в случае чего скажет вам где у вас ошибка.
пока даже статью не смог прочесть - дизайн вырвиглазовый, не надо так.
ОтветитьУдалитьА мне статья очень помогла, хорошо что нашел в поиске. А то замучался бодаться с Джумлой, что бы она правильно картинки в ogg давала. Здесь очень хороший и рабочий код, тем более с выбором из трех картинок, в зависимости от наличия. Просто супер.
ОтветитьУдалить