MaxHub
Служба Заботы MaxSite CMS

Как сделать чтобы анонс записи расшаривался в социальные сети с изображением?

Статьи / 6 февраля 2015

Все мы знаем, что расшаривание публикаций наших сайтов благотворно сказывается на трафике. Поэтому стоит задуматься над вопросом - будет ли выглядеть анонс достаточно привлекательно, чтобы друзья нашего посетителя тоже захотели перейти на наш сайт? Если анонс состоит из кучи букв, то ответ - вряд ли это привлекательный анонс. Нужна картинка. По умолчанию, движок никоим образом не заботится о том, как будет выглядеть расшариваемый в социальные сети анонс и тем более не контролирует наличие картинки в расшариваемом контенте. О наличие картинки в анонсах надо позаботиться самостоятельно. Как это сделать на MaxSite CMS?

Обозначенная проблема решается с помощью протокола разметки сайта под социальные сети - Open Graph protocol106. Он позволяет контролировать и указывать какие данные будут взяты при расшаривании ссылок в социальных сетях (лайки, шаринги и прочее). Open Graph поддерживают: Фейсбук, Твиттер, Вконтакте, LinkedIn, Google+ и другие. Желающие могут изучить стандарт разметки по приведённой ссылке, а для остальных скажу, что по сути всё сводится к вставке специальных тэгов в секцию HEAD и задача скорее стоит в том, чтобы наполнить атрибуте этих тэгов нужными значениями.

В дефолтном шаблоне на основе D3 есть множество вариантов сделать вывод своего html-кода. Я выбрал вариант с использованием файла head.php, который нужно размещать в папку custom (если у вас уже есть такой файл, то вам просто нужно будет добавить в него мой код). Если ваш шаблон не поддерживает работу с папкой custom, то вам придётся самостоятельно искать вариант как прописать вывод моего кода в секцию HEAD.

Подразумевается, что изображение для анонса используется то же самое, что хранится в поле «Изображение записи» в дополнительных полях записи. Т.е. это поле не пустое.

Вот содержимое файла head.php:

Для получения доступа к скрытому контенту вам нужно оставить больше 2 информативных комментариев на сайте. В зачёт идут комментарии к любой статье/материалу. Короткие комментарии от анонимов или «спасибо»/«благодарен» и прочее - учитываться не будут. Комментарии без смысла и пользы - будут удаляться.

Код снабжён комментариями и в дополнительных пояснениях не нуждается. Нужно только пояснить, что если на вашем сайте не используются slug page, то условие работы можно упросить (убрать && mso_segment(2) != '' ).

UPD: Кроме того, для пущей правильности Open Graph разметки нужно бы у тэга html прописывать область имён:

<html prefix="og: http://ogp.me/ns#">

Это можно сделать в файле /custom/my_functions.php таким кодом:

if( is_type('page') ) mso_set_val('head_section_html_add', ' prefix="og: http://ogp.me/ns#"');
Комментариев: 45
  1. Благодарю за информацию об open Graph. Недавно думал о том, что надо разместить помимо микроразметки и разметку для социальных сетей, но не мог найти информацию для Maxsite CMS. Оказывается ни так всё уж и сложно! grin

  2. Не получается увидеть код:

    "Для получения доступа к скрытому контенту вам нужно оставить ещё 3 информативных комментариев на сайте. В зачёт идут комментарии к любой статье/материалу. Короткие комментарии от анонимов или «спасибо»/«благодарен» и прочее - учитываться не будут. Комментарии без смысла и пользы - будут удаляться".

    Хотя оставил более трёх комментариев.

  3. Не получается увидеть код... Хотя оставил более трёх комментариев.

    Денис, странно. Возможно они проходят проверку - мне код показался после оставления каментов...

  4. Илья, как всегда полезная заметка спасибо wink, чуток под себя переделал. Open Graph использую давненько. Хочу добавить, я бы сделал else при отсутствии "Изображения записи" и добавил бы линк на лого сайта или любую иную картинку из uploads.

  5. У меня тоже он появился. Благодарю: внедрил у себя на блоге.

  6. Евгений, да, код не монументальный и поддаётся доработке под нужды конкретного сайта. Главное, что показано как получать адрес картинки. А логику вывода можно модернизировать...

  7. Логику нужно модернизировать на уровне движка, имхо, чтобы не плодить лишние запросы к базе данных.

    И, к слову, аналогично стоило бы продумать возможность для расшаривания видео, там также Вконакт, Яндекс, Гугл используют мета-теги.

  8. Подскажите где - что прописать, чтобы я мог выбрать картинку для поделиться в ВК сам, а не всякий бред с сайты выводился?

  9. У меня вот facebook перестал картинки предлагать. Походу специально сделали, чтобы дополнительные коды вставлять пришлось mad

  10. Максим в личной переписке напомнил о наличии способа получить информацию о картинке без лишнего запроса к базе данных. Благодаря этому код значительно упрощается. Обновил код в теле статьи - можно брать smile

  11. Ещё немного улучшил код - добавил поиск первой картинки в тексте для случая, когда мета-поле image_for_page не заполнено.

  12. Илья, на заметку о Twitter Cards http://habrahabr.ru/post/210996/ . Я себе уже реализовал.

  13. Приветствую.

    Вопрос - а есть способ вытаскивать это из RSS?

  14. Sol, можете описать всю ситуацию целиком, при которой требуется «вытаскивать это из RSS»?

  15. Жека, спасибо за наводку на Twitter Cards!

  16. Илья Земсков, по поводу "вытаскивать из RSS" - зачем надо?

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

    Вот и пытаюсь сделать вариант через, то что не поменяется при обновлении - через RSS.

  17. Не могу нигде найти простую функцию на PHP, которая на странице rss берёт последний url картинки.

  18. Илья всегда пожалуйста. Полагаю любой клиент оценит подобную фичу.

  19. Вот и пытаюсь сделать вариант через, то что не поменяется при обновлении - через RSS.
    Не могу нигде найти простую функцию на PHP, которая на странице rss берёт последний url картинки.

    Sol, не совсем понимаю механизма работы с RSS для поиска картинки. Т.е. вы хотите парсить выдачу по адресу http://ваш_сайт/feed ?

    Так не будет такой функции в готовом виде. Та, что в моём коде используется для поиска - она Максимом написана специально для движка и появилась уже ближе к последним версиям cms. Вы её тоже можете попробовать использовать, ибо там просто на вход подаётся текст в котором нужно искать картинку. Но вот вопрос, где вы возьмёте этот текст и доступна ли эта функция в используемой вами версии движка?

  20. Вы всё правильно поняли. Именно про парсинг rss я и говорил.

    Вот только я не могу нигде найти, как выдернуть из rss страницы один url картинки.

    С диска нашёл:

    $imageFile = dirname(__FILE__).'/pict.jpg';

    А как из url - не знаю.

    Подскажите, пожалуйста, если знаете.

  21. Sol, здесь могу только ориентировочное направление работы показать. Готового кода у меня сейчас нет. Итак:

    Во-первых, получаем ваш rss поток. Например, вызвав функцию file_get_contents:

    $rss = file_get_contents('http://www.ваш_сайт.ru/feed');

    Во-вторых, вам нужно распарсить rss, чтобы получить текст одного анонса (насколько я понимаю, превью картинка передаётся вместе с основным содержимым анонса). Делать это можно по разному. Например, с применением регулярных выражений и функции preg_match_all. В результате вы должны получить массив из текстов анонсов.

    В третьих, пробегая по массиву с текстами анонсов вы применяете к ним функцию mso_get_first_image_url. Если в используемой вами версии движка ещё нет этой функции, то вы можете скопировать её к себе в любое удобное вам место (например, в файл functions.php шаблона).

    В четвёртых, profit! Т.е. у вас на руках оказываются урлы картинок (если они есть в анонсах). Дальше делаете с ними всё, что нужно.

    Как-то так.

  22. Спасибо, за помощь. Первые 2 пункта есть и работают. Вот с третьим, как раз проблема.

    Попробую разобраться с этой функцией - mso_get_first_image_url.

    Я её нашёл в исходниках. Поковыряюсь.

  23. Случайно наткнулся на крохотную фотографию в комментах на хабре:

    http://xx0.ru/asd/LQjizKn.png

    И вспомнил, где я эту фотографию недавно видел... smile

    Меня всегда веселят случайные встречи и на улице и в инете.

  24. Ни в жизни бы не подумал, что порядок атрибутов у разметки может иметь значение. Но оказывается - имеет! Это хорошо видно при использовании Фейсбуковского отладчика разметки - https://developers.facebook.com/tools/debug/og/object/

    Если в разметке сперва идёт атрибут property, а потом content, то отладчик показывает сообщение типа:

    Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
    Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
    Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.

    В общем, поменял в коде порядок атрибутов и debug-ер facebook перестал показывать это сообщение и стал нормально видеть заданное изображение.

    Рекомендую всем проверить/обновить свой код!

    ЗЫ: Также добавил в статью рекомендацию по поводу области имён.

  25. Возможно порядок всё таки не так важен. Проблема наблюдается только в случаях, когда на странице несколько изображений.

  26. Т.е. и порядок и количество изображений играют роль?

  27. А если я хочу разместить фото для главной свое произвольное? как это сделать?

  28. А если я хочу разместить фото для главной свое произвольное? как это сделать?

    Oleg, размещаете фото в uploads, размещаете на главной любым доступным способом, а в остальном всё аналогично.

  29. а в остальном всё аналогично

    Илья, Не вижу код в статье.

  30. столкнулся с реализацией этой задачи.

    были сложности.

    разместил в своем шаблоне в папке custom файл head.php

    ничего не изменилось.

    был включен модель кеширования. Почистил кеш - не помогло. Решилось только отключением модуля кеширования.

    Спасибо Илье за консультацию.

  31. Оставляю коментари потому что хочу код.

    P.S. почему вы так делаете, почему не можете нормально код дать ?

  32. неполучается, оставил 4 коментария.

    Создатель этого ограничения - удалиш мои коментарии, все.

  33. почему вы так делаете, почему не можете нормально код дать ?

    Тарас, если посмотришь, то народ только и делает, что потребляет контент, но ничего не даёт сообществу. А потом удивляется - почему все забрасывают движок???

    "Вымогательство" комментариев - пока один из способов приучить народ к тому, что общаться на сайте не трудно и полезно. К слову, пока этот эксперимент с комментариями только на этой странице внедрён. Так что всё остальное можно и дальше потреблять без "напряга".

    неполучается, оставил 4 коментария.

    Есть ограничение по длине комментариев. Поэтому и не получается. Надо от души писать, желая поделится чем-то полезным. Хотя бы своим искренним отношением к написанному в статье. У меня при таком подходе не получается сказать меньше 80 букв. У вас по какой-то причине большая часть каментов получилась меньше 80 букв. Думайте.

    И не говорите, что нет тем, в которых нечего сказать. Полно публикаций, где не нужно глубоких знаний движка. Достаточно быть заинтересованным в судьбе движка или судьбе сообщества.

    удалиш мои коментарии

    Бесполезные конечно удалю.

  34. Попытаюсь еще один раз оставить комментарий, черт его знает, может хоть сейчас получится)

    Михаил, нужны "длинные" полезные каменты и не менее 3 штук за последний месяц. Так что всё просто, если не лениться делиться своим опытом smile

  35. Приветствую сообщество и персонально Илью!

    Давно я сюда не заходил, не судите строго, плз.

    Давно хотел иметь возможность использовать 'open graph' на сайте. Сам это сделать не сумел.

    Сейчас снова вернулся к этой теме и, честно говоря, уже думал, что кто-нибудь написал готовый плагин мод нашу ЦМС.

    Может у кого-либо уже появилось такое в планах?

  36. Ого!

    Только оставил 3 комментария и код сразу доступен - даже без модерации моих комментов!

    Спасибо!

    Счас попробую внедрить в сайт. Вроде бы описание понятное.

    О результате отчитаюсь.

  37. Попутно вопрос:

    этот код

    if( is_type('page') ) mso_set_val('head_section_html_add', ' prefix="og: http://ogp.me/ns#"');

    будет работать в моем шаблоне?

    В файле /custom/my_functions.php есть такой комментарий

    // используется только если выбран main-шаблон для двух сайдбаров (не знаю - к чему он относится...)

    а у меня шаблон с одним сайд-баром.

  38. Вставил коды.

    Картинка из статьи вставляется только вКонтакте.

    ФБ и Твиттер - не...

    Илья, подскажите, плз, что еще нужно подправить?

    сайт (на всякий случай) http://impartner.info/

  39. Владимир, для facebook всегда страницу нужно прогонять через валидатор перед тем как публиковать. https://developers.facebook.com/tools/debug/

    Что касается твиттера то для него тут нет Twitter Cards почитать можно тут: http://habrahabr.ru/post/210996/ . Допилить код пара минут.

  40. Евгений, http://maxhub.ru/users/1
    для facebook всегда страницу нужно прогонять через валидатор

    Спасибо! За ссылку на валидатор.

    Прошел по ней, увидел...., но как исправить ошибки?

    Почему ФБ видит только часть 'og:' мета-тэгов страницы?

  41. Владимир 1 раз прогоняем по валидатору, он подтупляет и говорит что не видит изображение, дату. Смотрим что он выдал. Далее поднимаемся к строке куда вводили адрес и еще раз нажимаем кнопку Debug. И все будет отлично.

    P.s : код Ильи работает только на страницах, можно немного изменить код используя else и добавить изображение "заглушку" на все остальные типы-страниц: главная, метки и.т.д... Но тогда мета данные

    echo '<meta c property="og:type" />'.NR; # тип  echo '<meta c property="og:title" />'.NR; # прописываем нужный заголовок  echo '<meta c property="og:description" />'.NR; #

    Нужно вынести из конструкции кода и подключать везде иначе магии не будет и валидатор будет выдавать ошибки на главной к примеру.

  42. странно......

    Написал комментарий, нажал "Отправить", страница обновилась, но комментарий не опубликовался и пропал :(

  43. Евгений, спасибо за рекомендацию!

    Нажал на кнопку "дебаг" 2-й раз, но не помогло :(

    Да и главное ведь - как добиться , чтобы на ФБ пост был с картинкой?

    А что касается

    код Ильи работает только на страницах
    - это меня вполне устроит.

    Обойдусь без главной и меток.

  44. Владимир , а тогда проблем нет. facebook- бяка и ему нужны картинки определенного размера. Что касается остальных соц сетей типа: гугл+, мой мир, однокласники, вк и.т.д... Там с картинками норм, даже если их подогнать под привередливый facebook и если их не подгонять. От и думайте стоит ли юзать фотошоп ради одного facebook.

  45. !!!

    Вот опять - написал комментарий, нажал "Отправить", он не сохранился confused

    Что происходит?

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

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Вход / регистрация или войти без комментирования
  Имя и сайт используются только при регистрации

Авторизация MaxSiteAuth. Войти через loginza

(обязательно)