Поиск по метке: Социальные сети

Лет 5 назад я впервые подключал к сайту Facebook SDK, для правильного внедрения like-кнопки и блока с рожицами. По сути было 3 варианта:

• Разместить ссылку с картинкой, которая бы вела на facebook-страницу для share-а или like-а. Самый быстрый вариант, даже, можно сказать, молниеносный, т.к. не нужно ничего грузить. Но такими кнопками пользуются куда реже, чем если они размещены правильно. Т.е. если нужен не факт наличия кнопки, а результат от её использования, то такой вариант отпадает.
• Внедрение через XFBML-разметку. Дело не хитрое. Размести специальный тег куда требуется. Подключи скрипт. Есть варианты. Настройки задаются в виде аттрибутов тегов.
• Примерно тоже самое но сразу через <iframe/>.

Казалось бы дело совсем не хитрое. Но в процессе эксплуатации выяснилось много неприятных подробностей. Дело в том, что like-кнопка после нажатия показывает специальный popup. И этот popup в vk-like и fb-like реализованы по разному. В vk-like панелька показывается нормально вне зависимости от вёрстки, а fb-like панелька сделана ногами и вызывает кучу проблем, если у вас выше по коду установлен какой-нибудь overflow: hidden, или ещё какая-нибудь особенность вёрстки. Помимо прочего, большое значение имеет то, куда вы эту поганую кнопку разместили. Если это нижний правый угол сайта, то попав вылезет не вверх, как стоило бы ожидать, а вниз. И, либо не поместится, либо разопрёт сайт как попало. Настройки "распирайся вверх", разумеется, нет. Честно говоря возможности этих стандартных контролов просто никакие. 

Помимо внешнего вида, проблемы вызывает ещё то, что соц. сети грузят вашу страницу crawler-ом, для добычи мета-тегов, со специфическим набором http-заголовков. И если ваш сайт в такой ситуации падает (ну мало ли какой баг), то без debug-страницы вы долго будете гадать, в чём же блин дело.

После удачной загрузки страница кешируется. В случае VK навсегда (если верить новому API, то уже не совсем), а в случае facebook, кеш страницы всё таки можно сбросить. Есть специальный инструмент, который умеет показывать ошибки выгрузки мета-данных. К тому же можно вызывать его программно (к примеру при замене og:image).

В очередной раз я столкнулся с facebook like кнопкой сегодня, когда узнал, что они не работают в мобильной вёрстке. Дело оказалось не в этом… Думал поправлю за 5 минут, и в итоге убил весь вечер. Слишком много изменений, порой сильно не очевидных. К примеру:

• Теперь like и share кнопки — это 2 разные кнопки,
• Но share-кнопку можно паровозиком прицепить к like-кнопке. Выглядит забавно.
• SDK обновился до 2-ой версии. И она не поддерживает решения из 1-й.
• При этом share кнопка из 2-ой версии работает в 1-ой.
• Но только на desktop-ах. А на мобильниках она просто ставит для <body/> класс со стилями { overflow: hidden; position: relative } и молча, без ошибок, дохнет. Скролл естественно ломается. Счастливого дебага, суки... да? :-)
• Раньше для отображения картинок при like-ах и share-ах достаточно было og:image разметки. А теперь… Она всё та же, но появились ограничения по мин. размеру — 200х200. Портал для которого я это домкратил, для всех своих тысяч постов использует картинки меньшего размера. Спасибо, facebook… гори в аду.
• Facebook поменял своё отношение к некоторым аттрибутам к <html/>. Вплоть до ругани красным из-за какой-нибудь ерунды.
• Усердно ругается, если используются аттрибуты name вместо property в <meta/>-тегах.

Подлатал, поправил, переделал. Теперь вроде всё работает. Полагаю, что спустя пол-года они снова в одностороннем порядке что-нибудь изменят и всё сломается. В который раз подряд. Причём, наверное, вёрстка like-кнопки будет и через пару лет сильно кривиться в зависимости от вёрстки сайта, на котором она размещена. Догадаться разместить её в <body/> похоже слишком сложно. 

Одновременно с этим на половину сломалась подгрузка изображений vkontakte-ом при share-ах. Причина не ясна. Судя по документации, ему должно хватать og:image. Ограничений по нему не указано. Debug-страницы для просмотра ошибок, похоже, до сих пор нет. Поиск результатов не дал. Спасибо, vKontakte.

Столкнулся с тем, что jQuery не умеет создавать DOM-элементы с составными именами, вроде <fb:like> в старых версиях IE. Решение - document.createElement( '<fb:like>' ). Пусть вас не смущает, что elem.tagName === 'like', на самом деле он нормальный.

Мне все эти шаманства понадобились для динамического встраивания соц. кнопок "мне нравится" и таких же лент комментариев. Посему поделюсь некоторым опытом. Для того. чтобы в нужный момент заставить браузер подготовить плагин к использованию, нужно заранее загрузить все необходимые скрипты а после выполнить:

• Для mail.ru и одноклассников - mailru.loader.require( 'api', function(){ mailru.plugin.init(); } );
• Для vKontakte - VK.Widgets.НужныйВиджет( id_dom_элемента, { настройки плагина } )
• Для Twitter - twttr.widgets.load();
• Для Google+ - gapi.plusone.render( id_dom_элемента );
• Для Facebook - FB.XFBML.parse();

При этом для facebook-а и g+ обязательно нужно задать все <meta property="og:*" content="..." /> теги и дополнительные аттрибуты к тегу <html>:

• xmlns:fb="http://www.facebook.com/2008/fbml"
• xmlns:og="http://ogp.me/ns#"
• itemscope="itemscope"
• itemtype="http://schema.org/Product"

Подключил на сайте заказчика кнопку "мне нравится" от вконтакте, однако в ней не заработала опция pageImage, в виду чего ссылка шарилась просто как "сопроводительный текст + ссылка", что непособствует появлению дополнительных лайков(уже из самой соц.сети). Гугл подсказал мне, что я такой не один, и что никто не знает как сию проблему решить. Написал в support — ответили ~ через сутки. Сказали сменить расширение изображения с jpeg на jpg . Сразу не помогло. Оказалось - кеш. Сменил page_id - заработало.

UPD 1. Ответили из vk, пишут:

К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена.

Значит у разработчиков нет права на ошибку (к тому же, если я не ошибаюсь, незадокументированную)? о_О