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

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

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

Обозначенная проблема решается с помощью протокола разметки сайта под социальные сети - Open Graph protocol0. Он позволяет контролировать и указывать какие данные будут взяты при расшаривании ссылок в социальных сетях (лайки, шаринги и прочее). 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 RSS

Благодарю за информацию об open Graph. Недавно думал о том, что надо разместить помимо микроразметки и разметку для социальных сетей, но не мог найти информацию для Maxsite CMS. Оказывается ни так всё уж и сложно! grin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Илья Земсков, по поводу "вытаскивать из 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

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

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

Ни в жизни бы не подумал, что порядок атрибутов у разметки может иметь значение. Но оказывается - имеет! Это хорошо видно при использовании Фейсбуковского отладчика разметки - 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 штук за последний месяц. Так что всё просто, если не лениться делиться своим опытом smile

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

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

Давно хотел иметь возможность использовать '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.

!!!

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

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