Чтоб Facebook хорошо понимал, добавляем The Open Graph protocol

+45
8.94K
И так. Стояла задача заставить сервис twitterfeed.com/ (сервис парсит RSS и постит в твиттер и в facebook) правильно размещать картинку в фейсбуке. Так как в нем используется протокол The Open Graph protocol, то необходимо к записи добавить информацию след вида:
  1. <html prefix="og: http://ogp.me/ns#">
  2. <head>
  3. <title>The Rock (1996)</title>
  4. <meta property="og:title" content="The Rock" />
  5. <meta property="og:type" content="video.movie" />
  6. <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
  7. <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
  8. ...
  9. </head>
  10. ...
  11. </html>
Тогда при постинге фейсбук берет именно тот тайтл, имено нужную картинку и правильный url.

Вы спросите ну и в чем загвоздка. Дело в том что в документации я не нашел как добавлять свой хедер, пришлось покапаться. Выяснилось, что есть замечательная функция $inPage->addHead.

С помощью нее сеошники могут творить чудеса, а фейсбук поймет нас.

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

Открываем теймплейт свой. Ищем файл template.php

в нем ищем:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
меняем на:

  1. <html xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
тем самым даем понять обработчикам, что у нас есть теги.

Кстати пока писал статью, понял что и для многих других вещей можно также генерировать все что угодно=) первым яндекс на ум пришел)


Не будет отвлекаться, сохраняем темплейт, закрываем файл. Идем далее

Файл \components\content\frontend.php

Ищем строку
  1. // Картинка статьи
  2. $article['image'] = (file_exists(PATH.'/images/photos/medium/article'.$article['id'].'.jpg') ? 'article'.$article['id'].'.jpg' : '');
  3.  
примерно 170.

Ниже Вставляем :

  1. $inPage->addHead('<meta property="og:type" content="website" />');
  2. $inPage->addHead('<meta property="og:title" content="'.htmlspecialchars($article['title']).'"/>');
  3. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
  4. $inPage->addHead('<meta property="og:url" content="'.HOST.'/'.$model->getArticleURL(null, $article['seolink']).'" />');
  5. $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
Сохраняем и радуемся, теперь добавляем задание в twitterfeed.com/ и в перед.

Да у фейсбуковцев есть страничка теста ваших манипуляций, пригодится:
developers.facebook.com/tools/debug/

Для версий 1.10.xxx
+5
Fuze Fuze 11 лет назад #
Немного поправлю вас
Ниже Вставляем :
Лучше делать так:
Код PHP:
  1. $inPage->addHead('<meta property="og:type" content="website" />');
  2. $inPage->addHead('<meta property="og:title" content="'.htmlspecialchars($article['title']).'"/>');
  3. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description']).'"/>');
  4. $inPage->addHead('<meta property="og:url" content="'.HOST.'/'.$article['seolink'].'.html" />');
  5. $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
кроме этого, желательно обрезать описание до разумных пределов, а так же формировать линк на статью посредством
Код PHP:
  1. $model->getArticleURL(null, $article['seolink']);
т.е. получится вот так:
$inPage->addHead('<meta property="og:url" content="'.HOST.'/'.$model->getArticleURL(null, $article['seolink']).'" />');
0
kirkr kirkr 11 лет назад #
Спасибо, подправил.
0
AndroS AndroS 11 лет назад #
Вообще, twitterfeed классная штука. Можно автопостинг в социальные сети настроить на свои профили
0
Бергал Бергал 11 лет назад #
Эт точна! Твиттерфид рулит smile я как-то зарегал акк и поставил на него рсс ленту с сайта. и, если честно забыл (забил) про акк. но через полгода акк нормально раскачался и теперь благодаря ему быстроробот сразу приходит на сайт :)
0
Ruchechnik Ruchechnik 11 лет назад #
тут решение на сколько я понял, для статей, а как сделать для блогов, порылся не нашел. в варианте с RSS берет только текст , без картинки..
0
Def Def 11 лет назад #
как сделать для блогов, порылся не нашел. в варианте с RSS берет только текст , без картинки..
тоже интересно как для блогов сделать
0
kirkr kirkr 11 лет назад #
Для блогов нет отдельной картинки (поля) т.е. ваши фото идут в тексте, но можно сделать выборку первой картинки. Если надо то чуть позже выложу решение.
0
Ruchechnik Ruchechnik 11 лет назад #
Для блогов нет отдельной картинки (поля) т.е. ваши фото идут в тексте, но можно сделать выборку первой картинки. Если надо то чуть позже выложу решение.
Выложи для блогов если не трудно, с первой картинкой в блоге
+1
Endroid Endroid 11 лет назад #
В "og:url" слэш в HOST.'/' наверно лишний? Иначе идет два слэша в URL после домена
0
wportal wportal 11 лет назад #
Да действительно лишний.
0
wportal wportal 11 лет назад #
Если делать как у Fuze
Код PHP:
  1. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description']).'"/>');
выдаёт ошибку.

Автору +
0
Fuze Fuze 11 лет назад #
В "og:url" слэш в HOST.'/' наверно лишний? Иначе идет два слэша в URL после домена
уберите, писал на ходу
Если делать как у Fuze .. выдаёт ошибку
добавьте закрывающую скобку
Код PHP:
  1. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
0
wportal wportal 11 лет назад #
И еще. Если тестировать здесь https://developers.facebook.com/tools/debug/
то у меня
Meta Tag: <meta property="og:title" content="&#x427;&#x438; &#x448;&#x43a;&#x456;&#x434;&#x43b;&#x438;&#x432;&#x438;&#x439; &#x43e;&#x440;&#x430;&#x43b;&#x44c;&#x43d;&#x438;&#x439; &#x441;&#x435;&#x43a;&#x441;?" />
Meta Tag: <meta property="og:description" content="&#x41e;&#x.........
Это правильно?
0
kirkr kirkr 11 лет назад #
wportal это нормально, в посте все ок будет.

По блогам сделал, на модерации пост сейчас, позже будет. Там картинку берем первую с поста.
0
wportal wportal 11 лет назад #
Проверила. Хорошая работа. Не только фейсбук, но и ВК и одноклассники теперь нормально берут картинки.
0
densvi densvi 11 лет назад #
Доброе время суток. Сделал все как написано, но не работает. Кроме того, перестала картинка вставляться и в Вконтакте. Использую AddShare.
0
kirkr kirkr 11 лет назад #
Код откуда взяли? в какой файл вставили? добавили ли строку в действующий темплейт ваш?
0
densvi densvi 11 лет назад #
Код отсюда, все делал как тут описано. Проверил в дебагере FB
под og:image: выдает просто путь: сайт/images/photos/medium/ т.е. самой картинки нет как бы.
0
kirkr kirkr 11 лет назад #
Версия CMS, а также какие хаки или плагины стоят, этот код актуален для 10.1.1 и 10.1.2
0
Freddie Freddie 7 лет назад #
Приветствую!
ICMS 1.10.3 та же проблема:

og:image: выдает просто путь: сайт/images/photos/medium/

подозреваю здесь $article['image'] = (file_exists(PATH.'/images/photos/medium/article'.$article['id'].'.jpg') ? 'article'.$article['id'].'.jpg' : '');
срабатывает, что файла картинки ещё нет на сервере, срабатывает второе ''.

У меня в плагине p_ping встроен код автоматического постинга в ФБ через API. Все нормально работало до начала июля. Теперь не скрапер ФБ не может с первого раза правильно определить нужную картинку, только со второго раза.
В их отладчике перепостов https://developers.facebook.com/tools/debug/ так и указан путь без файла сайт/images/photos/medium/
Выполняешь "повторить скрапинг" - всё нормально. Есть какая-то асинхронность.

Подскажите, как это грамотно исправить?
0
kirkr kirkr 7 лет назад #
Асинхронности не может быть, скорее всего при повторном запросе у вас фейсбук пробует вторую картинку на сайте.
Если бы скинули сайт я бы подсказал.
Какой компонент используете?
0
Freddie Freddie 7 лет назад #
Убрал проверку существования файла картинки - уже три новости нормально прошли.
Код PHP:
  1. // Картинка для facebook
  2. $image_facebook = 'article'.$article['id'].'.jpg';
  3. $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$image_facebook.'" />');
Теперь всё нормально.
Всё это в components\content\frontend.php

Подозреваю это из-за того, что код постинга в ФБ в плагине прописал, а не в этом компоненте.
0
kirkr kirkr 7 лет назад #
Это не код постинга, а мета тег для правильности восприятия сайта при добавлении ссылки в соцсетях.
Думаю просто не видит переменной PATH, поэтому проверку и не проходит.
0
Петр Петр 11 лет назад #
отличная работа. нужная вещь в базовом функционале
0
Mademaster Mademaster 11 лет назад #
Дескрипшен я так понимаю берется из краткого описания статьи??? а можно переделать на то, чтобы дескрипшен брался из вкладки СЕО-Дескрипшен??? просто не использую краткое описание...
0
Dorimen Dorimen 11 лет назад #
Код отсюда, все делал как тут описано. Проверил в дебагере FB
под og:image: выдает просто путь: сайт/images/photos/medium/ т.е. самой картинки нет как бы.

Я сделал так: if ($article_image) { $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$article_image.'"/>'); }

(P.S. InstantCMS 1.9)

Еще от автора

Политика безопасности и соглашение
Много споров было что в текст публиковать.
Google & Yandex баннеры в компоненты Banners
Добрый день! Была поставлена задача добавить возможность выводить через позиции {Баннер=номер позиции} баннеры гугла и яндекса.
Готовим сервер VDS Nginx + php7.0-fpm +MySQL для Inst2
Добрый день! Данная записка более чем напоминание о том, что не забыть при установке и настройке VDS Nginx + php7.0-fpm +MySQL для Inst2.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.