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

7861
И так. Стояла задача заставить сервис http://twitterfeed.com/ (сервис парсит RSS и постит в твиттер и в facebook) правильно размещать картинку в фейсбуке. Так как в нем используется протокол The Open Graph protocol, то необходимо к записи добавить информацию след вида:
Код PHP:
  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

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

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

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


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

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

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

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

Код 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.'/'.$model->getArticleURL(null, $article['seolink']).'" />');
  5. $inPage->addHead('<meta property="og:image" content="'.HOST.'/images/photos/medium/'.$article['image'].'"/>');
Сохраняем и радуемся, теперь добавляем задание в http://twitterfeed.com/ и в перед.

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

Для версий 1.10.xxx
Работа с конструктором форм в InstantCMS 1.10 | Чтоб Facebook хорошо понимал Часть2 БЛОГИ
Комментарии (26)
Fuze 2 сентября 2013 в 11:41 +5
Немного поправлю вас
Ниже Вставляем :
Лучше делать так:
Код 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']).'" />');
kirkr 2 сентября 2013 в 11:47 0
Спасибо, подправил.
AndroS 2 сентября 2013 в 13:57 0
Вообще, twitterfeed классная штука. Можно автопостинг в социальные сети настроить на свои профили
Бергал 3 сентября 2013 в 09:02 0
Эт точна! Твиттерфид рулит smile я как-то зарегал акк и поставил на него рсс ленту с сайта. и, если честно забыл (забил) про акк. но через полгода акк нормально раскачался и теперь благодаря ему быстроробот сразу приходит на сайт :)
Ruchechnik 2 сентября 2013 в 19:04 0
тут решение на сколько я понял, для статей, а как сделать для блогов, порылся не нашел. в варианте с RSS берет только текст , без картинки..
Def 2 сентября 2013 в 21:07 0
как сделать для блогов, порылся не нашел. в варианте с RSS берет только текст , без картинки..
тоже интересно как для блогов сделать
kirkr 3 сентября 2013 в 05:32 0
Для блогов нет отдельной картинки (поля) т.е. ваши фото идут в тексте, но можно сделать выборку первой картинки. Если надо то чуть позже выложу решение.
Ruchechnik 3 сентября 2013 в 12:23 0
Для блогов нет отдельной картинки (поля) т.е. ваши фото идут в тексте, но можно сделать выборку первой картинки. Если надо то чуть позже выложу решение.
Выложи для блогов если не трудно, с первой картинкой в блоге
Endroid 3 сентября 2013 в 11:18 +1
В "og:url" слэш в HOST.'/' наверно лишний? Иначе идет два слэша в URL после домена
wportal 3 сентября 2013 в 13:40 0
Да действительно лишний.
wportal 3 сентября 2013 в 13:42 0
Если делать как у Fuze
Код PHP:
  1. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description']).'"/>');
выдаёт ошибку.

Автору +
Fuze 3 сентября 2013 в 13:47 0
В "og:url" слэш в HOST.'/' наверно лишний? Иначе идет два слэша в URL после домена
уберите, писал на ходу
Если делать как у Fuze .. выдаёт ошибку
добавьте закрывающую скобку
Код PHP:
  1. $inPage->addHead('<meta property="og:description" content="'.htmlspecialchars(strip_tags($article['description'])).'"/>');
wportal 3 сентября 2013 в 13:46 0
И еще. Если тестировать здесь 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.........
Это правильно?
kirkr 3 сентября 2013 в 20:14 0
wportal это нормально, в посте все ок будет.

По блогам сделал, на модерации пост сейчас, позже будет. Там картинку берем первую с поста.
wportal 4 сентября 2013 в 22:00 0
Проверила. Хорошая работа. Не только фейсбук, но и ВК и одноклассники теперь нормально берут картинки.
densvi 6 сентября 2013 в 08:26 0
Доброе время суток. Сделал все как написано, но не работает. Кроме того, перестала картинка вставляться и в Вконтакте. Использую AddShare.
kirkr 6 сентября 2013 в 09:06 0
Код откуда взяли? в какой файл вставили? добавили ли строку в действующий темплейт ваш?
densvi 12 сентября 2013 в 22:08 0
Код отсюда, все делал как тут описано. Проверил в дебагере FB
под og:image: выдает просто путь: сайт/images/photos/medium/ т.е. самой картинки нет как бы.
kirkr 30 сентября 2013 в 04:53 0
Версия CMS, а также какие хаки или плагины стоят, этот код актуален для 10.1.1 и 10.1.2
Freddie 31 августа 2017 в 11:51 0
Приветствую!
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/
Выполняешь "повторить скрапинг" - всё нормально. Есть какая-то асинхронность.

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

Подозреваю это из-за того, что код постинга в ФБ в плагине прописал, а не в этом компоненте.
kirkr 1 сентября 2017 в 05:18 0
Это не код постинга, а мета тег для правильности восприятия сайта при добавлении ссылки в соцсетях.
Думаю просто не видит переменной PATH, поэтому проверку и не проходит.
Петр 17 сентября 2013 в 12:35 0
отличная работа. нужная вещь в базовом функционале
Mademaster 24 сентября 2013 в 21:28 0
Дескрипшен я так понимаю берется из краткого описания статьи??? а можно переделать на то, чтобы дескрипшен брался из вкладки СЕО-Дескрипшен??? просто не использую краткое описание...
Dorimen 29 сентября 2013 в 14:30 0
Код отсюда, все делал как тут описано. Проверил в дебагере 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)