Как сделать чтобы анонс записи расшаривался в социальные сети с изображением?
Все мы знаем, что расшаривание публикаций наших сайтов благотворно сказывается на трафике. Поэтому стоит задуматься над вопросом - будет ли выглядеть анонс достаточно привлекательно, чтобы друзья нашего посетителя тоже захотели перейти на наш сайт? Если анонс состоит из кучи букв, то ответ - вряд ли это привлекательный анонс. Нужна картинка. По умолчанию, движок никоим образом не заботится о том, как будет выглядеть расшариваемый в социальные сети анонс и тем более не контролирует наличие картинки в расшариваемом контенте. О наличие картинки в анонсах надо позаботиться самостоятельно. Как это сделать на MaxSite CMS?
Обозначенная проблема решается с помощью протокола разметки сайта под социальные сети - Open Graph protocol0. Он позволяет контролировать и указывать какие данные будут взяты при расшаривании ссылок в социальных сетях (лайки, шаринги и прочее). Open Graph поддерживают: Фейсбук, Твиттер, Вконтакте, LinkedIn, Google+ и другие. Желающие могут изучить стандарт разметки по приведённой ссылке, а для остальных скажу, что по сути всё сводится к вставке специальных тэгов в секцию HEAD и задача скорее стоит в том, чтобы наполнить атрибуте этих тэгов нужными значениями.
В дефолтном шаблоне на основе D3 есть множество вариантов сделать вывод своего html-кода. Я выбрал вариант с использованием файла head.php, который нужно размещать в папку custom (если у вас уже есть такой файл, то вам просто нужно будет добавить в него мой код). Если ваш шаблон не поддерживает работу с папкой custom, то вам придётся самостоятельно искать вариант как прописать вывод моего кода в секцию HEAD.
Подразумевается, что изображение для анонса используется то же самое, что хранится в поле «Изображение записи» в дополнительных полях записи. Т.е. это поле не пустое.
Вот содержимое файла head.php:
Код снабжён комментариями и в дополнительных пояснениях не нуждается. Нужно только пояснить, что если на вашем сайте не используются 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#"');
Благодарю за информацию об open Graph. Недавно думал о том, что надо разместить помимо микроразметки и разметку для социальных сетей, но не мог найти информацию для Maxsite CMS. Оказывается ни так всё уж и сложно!
Не получается увидеть код:
"Для получения доступа к скрытому контенту вам нужно оставить ещё 3 информативных комментариев на сайте. В зачёт идут комментарии к любой статье/материалу. Короткие комментарии от анонимов или «спасибо»/«благодарен» и прочее - учитываться не будут. Комментарии без смысла и пользы - будут удаляться".
Хотя оставил более трёх комментариев.
Не получается увидеть код... Хотя оставил более трёх комментариев.
Денис, странно. Возможно они проходят проверку - мне код показался после оставления каментов...
Илья, как всегда полезная заметка спасибо
, чуток под себя переделал. Open Graph использую давненько. Хочу добавить, я бы сделал else при отсутствии "Изображения записи" и добавил бы линк на лого сайта или любую иную картинку из uploads.У меня тоже он появился. Благодарю: внедрил у себя на блоге.
Евгений, да, код не монументальный и поддаётся доработке под нужды конкретного сайта. Главное, что показано как получать адрес картинки. А логику вывода можно модернизировать...
Логику нужно модернизировать на уровне движка, имхо, чтобы не плодить лишние запросы к базе данных.
И, к слову, аналогично стоило бы продумать возможность для расшаривания видео, там также Вконакт, Яндекс, Гугл используют мета-теги.
Подскажите где - что прописать, чтобы я мог выбрать картинку для поделиться в ВК сам, а не всякий бред с сайты выводился?
У меня вот facebook перестал картинки предлагать. Походу специально сделали, чтобы дополнительные коды вставлять пришлось
Максим в личной переписке напомнил о наличии способа получить информацию о картинке без лишнего запроса к базе данных. Благодаря этому код значительно упрощается. Обновил код в теле статьи - можно брать
Ещё немного улучшил код - добавил поиск первой картинки в тексте для случая, когда мета-поле image_for_page не заполнено.
-
Илья, на заметку о Twitter Cards http://habrahabr.ru/post/210996/ . Я себе уже реализовал.
Приветствую.
Вопрос - а есть способ вытаскивать это из RSS?
Sol, можете описать всю ситуацию целиком, при которой требуется «вытаскивать это из RSS»?
Жека, спасибо за наводку на Twitter Cards!
-
Илья Земсков, по поводу "вытаскивать из RSS" - зачем надо?
Просто, используется старый шаблон, довольно сильно покуроченный. И если сейчас в нём делать ещё изменения, то потом когда руки до обновления дойдут придётся снова лопатить код.
Вот и пытаюсь сделать вариант через, то что не поменяется при обновлении - через RSS.
-
Не могу нигде найти простую функцию на PHP, которая на странице rss берёт последний url картинки.
-
Илья всегда пожалуйста. Полагаю любой клиент оценит подобную фичу.
Вот и пытаюсь сделать вариант через, то что не поменяется при обновлении - через RSS.
Не могу нигде найти простую функцию на PHP, которая на странице rss берёт последний url картинки.
Sol, не совсем понимаю механизма работы с RSS для поиска картинки. Т.е. вы хотите парсить выдачу по адресу http://ваш_сайт/feed ?
Так не будет такой функции в готовом виде. Та, что в моём коде используется для поиска - она Максимом написана специально для движка и появилась уже ближе к последним версиям cms. Вы её тоже можете попробовать использовать, ибо там просто на вход подаётся текст в котором нужно искать картинку. Но вот вопрос, где вы возьмёте этот текст и доступна ли эта функция в используемой вами версии движка?
-
Вы всё правильно поняли. Именно про парсинг rss я и говорил.
Вот только я не могу нигде найти, как выдернуть из rss страницы один url картинки.
С диска нашёл:
$imageFile = dirname(__FILE__).'/pict.jpg';
А как из url - не знаю.
Подскажите, пожалуйста, если знаете.
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! Т.е. у вас на руках оказываются урлы картинок (если они есть в анонсах). Дальше делаете с ними всё, что нужно.
Как-то так.
-
Спасибо, за помощь. Первые 2 пункта есть и работают. Вот с третьим, как раз проблема.
Попробую разобраться с этой функцией - mso_get_first_image_url.
Я её нашёл в исходниках. Поковыряюсь.
-
Случайно наткнулся на крохотную фотографию в комментах на хабре:
http://xx0.ru/asd/LQjizKn.png
И вспомнил, где я эту фотографию недавно видел...
Меня всегда веселят случайные встречи и на улице и в инете.
Ни в жизни бы не подумал, что порядок атрибутов у разметки может иметь значение. Но оказывается - имеет! Это хорошо видно при использовании Фейсбуковского отладчика разметки - 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 перестал показывать это сообщение и стал нормально видеть заданное изображение.
Рекомендую всем проверить/обновить свой код!
ЗЫ: Также добавил в статью рекомендацию по поводу области имён.
Возможно порядок всё таки не так важен. Проблема наблюдается только в случаях, когда на странице несколько изображений.
-
Т.е. и порядок и количество изображений играют роль?
А если я хочу разместить фото для главной свое произвольное? как это сделать?
А если я хочу разместить фото для главной свое произвольное? как это сделать?
Oleg, размещаете фото в uploads, размещаете на главной любым доступным способом, а в остальном всё аналогично.
а в остальном всё аналогично
Илья, Не вижу код в статье.
столкнулся с реализацией этой задачи.
были сложности.
разместил в своем шаблоне в папке custom файл head.php
ничего не изменилось.
был включен модель кеширования. Почистил кеш - не помогло. Решилось только отключением модуля кеширования.
Спасибо Илье за консультацию.
Оставляю коментари потому что хочу код.
P.S. почему вы так делаете, почему не можете нормально код дать ?
неполучается, оставил 4 коментария.
Создатель этого ограничения - удалиш мои коментарии, все.
почему вы так делаете, почему не можете нормально код дать ?
Тарас, если посмотришь, то народ только и делает, что потребляет контент, но ничего не даёт сообществу. А потом удивляется - почему все забрасывают движок???
"Вымогательство" комментариев - пока один из способов приучить народ к тому, что общаться на сайте не трудно и полезно. К слову, пока этот эксперимент с комментариями только на этой странице внедрён. Так что всё остальное можно и дальше потреблять без "напряга".
неполучается, оставил 4 коментария.
Есть ограничение по длине комментариев. Поэтому и не получается. Надо от души писать, желая поделится чем-то полезным. Хотя бы своим искренним отношением к написанному в статье. У меня при таком подходе не получается сказать меньше 80 букв. У вас по какой-то причине большая часть каментов получилась меньше 80 букв. Думайте.
И не говорите, что нет тем, в которых нечего сказать. Полно публикаций, где не нужно глубоких знаний движка. Достаточно быть заинтересованным в судьбе движка или судьбе сообщества.
удалиш мои коментарии
Бесполезные конечно удалю.
Попытаюсь еще один раз оставить комментарий, черт его знает, может хоть сейчас получится)
Михаил, нужны "длинные" полезные каменты и не менее 3 штук за последний месяц. Так что всё просто, если не лениться делиться своим опытом
Приветствую сообщество и персонально Илью!
Давно я сюда не заходил, не судите строго, плз.
Давно хотел иметь возможность использовать 'open graph' на сайте. Сам это сделать не сумел.
Сейчас снова вернулся к этой теме и, честно говоря, уже думал, что кто-нибудь написал готовый плагин мод нашу ЦМС.
Может у кого-либо уже появилось такое в планах?
Ого!
Только оставил 3 комментария и код сразу доступен - даже без модерации моих комментов!
Спасибо!
Счас попробую внедрить в сайт. Вроде бы описание понятное.
О результате отчитаюсь.
Попутно вопрос:
этот код
if( is_type('page') ) mso_set_val('head_section_html_add', ' prefix="og: http://ogp.me/ns#"');будет работать в моем шаблоне?
В файле /custom/my_functions.php есть такой комментарий
// используется только если выбран main-шаблон для двух сайдбаров (не знаю - к чему он относится...)
а у меня шаблон с одним сайд-баром.
Вставил коды.
Картинка из статьи вставляется только вКонтакте.
ФБ и Твиттер - не...
Илья, подскажите, плз, что еще нужно подправить?
сайт (на всякий случай) http://impartner.info/
-
Владимир, для facebook всегда страницу нужно прогонять через валидатор перед тем как публиковать. https://developers.facebook.com/tools/debug/
Что касается твиттера то для него тут нет Twitter Cards почитать можно тут: http://habrahabr.ru/post/210996/ . Допилить код пара минут.
Евгений, http://maxhub.ru/users/1
для facebook всегда страницу нужно прогонять через валидаторСпасибо! За ссылку на валидатор.
Прошел по ней, увидел...., но как исправить ошибки?
Почему ФБ видит только часть 'og:' мета-тэгов страницы?
-
Владимир 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; #
Нужно вынести из конструкции кода и подключать везде иначе магии не будет и валидатор будет выдавать ошибки на главной к примеру.
странно......
Написал комментарий, нажал "Отправить", страница обновилась, но комментарий не опубликовался и пропал :(
Евгений, спасибо за рекомендацию!
Нажал на кнопку "дебаг" 2-й раз, но не помогло :(
Да и главное ведь - как добиться , чтобы на ФБ пост был с картинкой?
А что касается
код Ильи работает только на страницах
- это меня вполне устроит.Обойдусь без главной и меток.
-
Владимир , а тогда проблем нет. facebook- бяка и ему нужны картинки определенного размера. Что касается остальных соц сетей типа: гугл+, мой мир, однокласники, вк и.т.д... Там с картинками норм, даже если их подогнать под привередливый facebook и если их не подгонять. От и думайте стоит ли юзать фотошоп ради одного facebook.
!!!
Вот опять - написал комментарий, нажал "Отправить", он не сохранился
Что происходит?
