sly2m (sly2m) wrote,
sly2m
sly2m

Category:

Как поместить кнопку "Like" - "Мне нравится" из Фейсбука в Живой Журнал (полное руководство)

Итак, десять постов с кнопкой опубликованы, пришло время раскрыть секреты и дать разъяснения, как вставить кнопку "Like"/"Мне нравится" в Живой Журнал.

Если вам срочно нужен ответ здесь и сейчас (например, если вы попали на эту страничку из поисковика) вот непосредственный код:


<comment>
<object data="http://www.facebook.com/plugins/like.php?href=http://sly2m.livejournal.com&locale=ru_RU&layout=standard&show_faces=true&width=450&height=100&action=like&colorscheme=light&ref=sly2m" type="text/html" width="450" height="100">
</object>
</comment>



Если же вы хотите разобраться как эта штука работает, какие возможности предоставляет, как ее можно улучшить, и каковы текущие ограничения в применении - для вас нижеследующая развернутая статья с примерами. Хочу заметить, что данное исследование - моя личная наработка. Конечно, я пользовался гуглом и прочими справочными материалами, но, насколько я знаю, на текущий момент никто не смог подружить Facebook и LJ при помощи кнопки Like, мне пришлось творить, выдумывать, пробовать и проверять на ходу, будете перепечатывать, не забудьте, пожалуйста, указать копирайт и дать правильную ссылку. Спасибо.


Итак, сначала немного теории.

В апреле 2010го года социальная сеть Facebook представила сервис "Мне нравится" (Like, в англ. версии), позволяющий любому пользователю в одно нажатие кнопки опубликовать на своей фейсбучной страничке ссылки на понравившиеся сайты. Если у вас есть свой сайт в интернете (например online-магазин, блог, домашняя страничка, торрент-трекер, аккаунт в Одноклассниках и проч.) вы легко можете разместить кнопку "Like" на каждой странице, причем для этого даже нет необходимости регистрироваться в самом Фейсбуке, а выглядеть она будет приблизительно так:


Это просто демонстрационная картинка, не нужно на нее кликать! :)


Сделать подобное можно двумя путями. Оба подробно описаны на официальной страничке разработчиков Facebook, там же присутствует хороший wizard по генерации параметризованной кнопки Like, я лишь добавлю несколько личных комментариев и наблюдений.


Вариант первый - XFBML. Более продвинутый, удобный, с большим количеством настроек способ, использующий JavaScript SDK. В результате на страничку приходится добавлять короткую конструкцию вида:


<fb:like show_faces="true" width="450"></fb:like>


Однако прежде необходимо установить вышеупомянутый JavaScript SDK на сайт. Этот способ подходит для веб-мастеров и вообще для тех, кто имеет в Интернете свой личный сервер (например ведет блог на платформе WordPress), и у кого есть возможность полного контроля над его содержимым. Пользователи LiveJournal не могут вставлять JavaScript в свои записи, поэтому данный способ в Живом Журнале не работает.


Вариант второй - IFRAME. Менее продвинутый, можно сказать "устаревший" способ, не такой удобный и с меньшим количеством настроек.

Код для вставки на свою страничку получается:


<iframe src="http://www.facebook.com/plugins/like.php?href=http://sly2m.livejournal.com&layout=standard&show_faces=true&width=450&height=100&action=like&font=arial&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:100px;" allowTransparency="true"></iframe>


Даже на беглый взгляд видно, что код гораздо более длинный и занудный, кроме того, в данном случае у вас нет дополнительных возможностей FB_API, например вставлять картинки вместо линка, изменять заголовки и проч., однако здесь нет нужды использовать JavaScript, поэтому данный способ работает на большом количестве сайтов, например на всяких одноклассниках, мамбах, лирушечках и прочих блоговых платформах, где у пользователя запрещен запуск JavaScript-кода.


Перейдем непосредственно к ЖЖ. К сожалению, по соображениям безопасности в Живом Журнале запрещен не только JavaScript, но и тег <IFRAME>, поэтому напрямую в лоб воспользоваться вторым способом тоже не удастся. Зато, есть возможность воспользоваться обходными маневрами! :)

Например, мало кто знает (а кто знает - тщательно скрывают), что не смотря на то, что сам тег <IFRAME> в ЖЖ запрещен (скажем так, использовать данный тег можно, но работать он не будет, ибо при опубликовании поста парсер ЖЖ просто вырежет его из обрабатываемого текста), большинство современных браузеров поддерживает обходной путь.

Вместо тега <IFRAME> нужно использовать тег <OBJECT>, а внутренний параметр "src" следует заменять на "data".

В этом случае мы получаем такой код:


<object data="http://www.facebook.com/plugins/like.php?href=(тут ссылка на вашу страницу, которую вы хотите Like)&locale=ru_RU&layout=standard&show_faces=true&width=450&height=100&action=like&colorscheme=light&ref=(а тут ваш возвращаемый параметр)" type="text/html" width="450" height="100">


вставляем его в ЖЖ, и все прекрасно работает!


Разберем код поподробней.

Параметры вроде layout=standard и show_faces=true генерируются визардом Facebook-а, по ним есть хорошее описание и даже FAQ на уже упомянутой страничке разработчиков.

locale=ru_RU - этот параметр форсирует язык интерфейса кнопки, т.е. "Like" в английской версии, "Мне нравится" в русской, "J'aime" во французской и так далее. Сей параметр вообще можно опустить, тогда каждый пользователь Фейсбука увидит свою кнопку, в зависимости от личных настроек.

ref=любое слово до 50 букв длиной - этот параметр позволяет в каждую конкретную кнопку вставить свой личный уникальный идентификатор, он возвращается движком Фейсбука, и если вы используете анализаторы трафика, заходов/переходов и т.д. - поможет вам разобраться какая конкретная кнопка была нажата и тому подобную занудную статистику. Блогерам ЖЖ это не актуально, поэтому этот параметр тоже можно пропустить, а вот веб-мастера смогут вволю наиграться в свои любимые SEO-игрушки.

action=like - может принимать два значения like и recommend, смотря какую кнопку вы хотите видеть - "Мне нравится" или "Я рекомендую".

type="text/html" - этот параметр (уже не фейсбучный, а самого тега <OBJECT>) обязательно необходим, причем именно в такой форме, иначе браузер не сможет обработать объект как кнопку.

width="450" height="100" - размеры блока кнопки. Как вы уже заметили, это не только сама кнопка, если выставлен параметр show_faces=true под кнопкой начнут появляться аватарки нажавших на нее пользователей, тут каждый может сам настроить на свой вкус, добавить при необходимости scrollbars, и т.д. Не забываем, что минимальная высота при show_faces=true - 90 пикселов, при show_faces=false - 35 пикселов.


Теперь небольшая ложка дегтя. К сожалению, не все браузеры корректно поддерживают трюк с заменой тегов <IFRAME> на <OBJECT>.
Это точно работает в последних версиях Mozilla Firefox, Opera, Safari, Google Chrome и даже в таких экзотических как Maxthon или Blackberry Browser, но я так и не смог заставить Internet Explorer (в том числе девятой версии, которая еще не вышла) корректно отобразить тег <OBJECT>.

Эксплорер показывает такую картинку и отказывается работать:


Кто не с нами, тот против нас!


Возможно есть какой-то способ заставить его трудиться на благо населения, но я так его и не нашел. Может быть это получится у кого-то другого, а все что я смог, это окружить код с кнопкой тегами <comment> и </comment>, в этом случае картинка с ошибкой не показывается, пользователи Internet Explorer вообще не видят никакой кнопки Like, и даже не подозревают о ее существовании.



Это все, что я узнал сам и захотел рассказать другим о вставке кнопки Like в ЖЖ, теперь дело за вами - осталось еще много неосвещенных вопросов, оставлю их на вашу пытливость, настойчивость и наличие личного времени.

Например, нерешенный вопрос с генерацией ссылки, на которую будет ссылаться кнопка. Т.е. если вы хотите, чтобы фейсбукеры "полюбили" ваш журнал в принципе, достаточно вставить в код кнопки статичную ссылку ваш_журнал.livejournal.com, и разместить ее у вас в Профиле, например.

Но для того, чтобы вставлять эту кнопку в каждую запись, прежде всего необходимо получить ссылку на эту запись, а до того, как вы ее опубликовали она вам неизвестна. Пользователи WordPress выходят из ситуации вставляя в код такую вот конструкцию <?php the_permalink()?> , но в ЖЖ данный финт не прокатывает. Мне пришлось делать все делать руками, т.е. сначала публиковать пост, потом заходить в его  редактирование, вставлять туда код кнопки, а в кнопку, уже известную после публикации ссылку на запись.

Это дело в принципе можно автоматизировать. Например написать робота, который будет ходить по вашим записям и вставлять в них автоматически сгенерированные кнопки Like, или запилить плагин к Semagic-у, который уже делает что-то подобное при публикации картинок - при отправке поста он сначала заливает картинки, а потом на лету подменяет их адреса и вставляет в текст.

Короче, вариантов много - есть возможность порезвиться. У меня на это времени нет, да и интерес пропал.



И самое главное. Я уже неоднократно заявлял свою нелюбовь к любым "кнопкам репоста" и их подобиям. Там где другие усматривают "наращивание ссылочной массы", "успешные SEO-приемы", "улучшение монетизации" и "повышение количества переходов тагетированной аудитории" я вижу лишь раздражающее мельтешение отвлекающей мусорной информации.

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

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

Если вы не хотите видеть эту кнопку в Живом Журнале, строка фильтрации будет такой:

||facebook.com/plugins/*$domain=lj-toys.com


Если же вы вообще нигде и никогда не хотите видеть в Интернете этот и другие фейсбучные сервисы, вроде "Recommend", "Сross-post to Facebook" и т.д.:

||facebook.com/plugins/*



Берегите себя и свой блог.



UPD: Как поместить кнопку Tweet в ЖЖ здесь
UPD2: Как поместить кнопку Сохранить ВКонтакте в ЖЖ здесь


UPD3: Код кнопки изменился! Как и почему - см. здесь
UPD4: А теперь снова старый код работает. Короче, СУП то в одну сторону кидает, то в другую - каждый раз нужно пробовать самому.


Эта тема также интересна:

http://zinchik.livejournal.com/, http://cyxymu.livejournal.com/





Эта тема также интересна:

http://alzheimer.livejournal.com/, http://guralyuk.livejournal.com/





Эта тема также интересна:

http://www.facebook.com/olhanninen





Эта тема также интересна:

http://www.facebook.com/kukutz, http://www.facebook.com/melnikov.anton





Эта тема также интересна:

http://0-lechim.livejournal.com/





Эта тема также интересна:

http://rustavy.livejournal.com/





Эта тема также интересна:

http://demyan-om.livejournal.com/





Эта тема также интересна:

http://n-wiljam.livejournal.com/


Tags: жж, код, сервисы
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 77 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →