Как подключить XFBML кнопки Like и Send на WordPress блог. Часть 2
Люди, следящие за обновлениями в мире социальных медиа не могли не заметить, такое событие, как фундаментальное обновление кнопки “Like”. Собственно, обновление произошло еще в конце февраля 2011 года и заключается в том, что популярный социальный плагин для сайтов, более известный, как «кнопка Like» перенял свойства старой кнопки “Share” и даже обзавелся новыми функциями. Тем не менее, следует отметить, что до сих пор использование новых механизмов вызывает многочисленные вопросы как у русскоязычной, так и у англоязычной публики, связанные, как правило, с интеграцией XFBML версий. Продолжение статьи «Как подключить XFBML кнопки Like и Send на WordPress блог»
Итак, продолжим.
Настройка мета тэгов протокола Open Graph .
Следующим шагом будет настройка мета тэгов протокола Open Graph (OG protocol). Open Graph Protocol позволяет с легкостью интегрировать любые веб страницы, включение протокола Open Graph фактически превращает вашу страницу в страницу Facebook. В свою очередь, мета тэги Open Graph требуются для того, чтобы механизм знал, какую именно информацию и в каком виде ему следует брать с вашей веб-страницы для отправки в Facebook.
Мета тэги протокола Open Graph, следует разместить внутри тэга <head> в файле header.php вашей темы WordPress.
Существует несколько видов мета тэгов протокола Open Graph (подробнее о них можно прочитать на официальной странице Facebook ) Основными являются следующие:
og:title – title. Заголовок (тайтл) вашего объекта, например title поста в блоге.
og:type – Тип объекта. Для отдельного поста параметр должен быть “article”.
og:image – Ссылка на картинку, которая будет появляться вместе с текстом, например логотип вашего сайта. Размер как минимум 50px на 50px и минимальные пропорции — 3:1.
og:url – Ссылка (URL) на ваш объект , например пермалинк поста в блоге
og:site_name – Название сайта или блога
fb:admins или fb:app_id – Список пользователей, администрирующих вашу страницу или приложение. Разделитель — запятая. Действительно, этот тэг работает и для администраторов fb:admins и для приложений Facebook — fb:app_id . При получении кода через конфигуратор, вы получите и ID администратора.
og:description – Краткое описание вашей страницы или отрывок статьи (excerpt).
Код можно получить и скопировать из конфигуратора на той же странице, где расположен конфигуратор самой кнопки.
Конечно для WordPress есть некоторые нюансы, которые следует учитывать (см. пример кода ниже)
Пример кода:
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="company" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:image" content="http://artofbusiness.ru/wp-content/themes/artofbusiness/images/logo.gif"/>
<meta property="og:site_name" content="Art Of Business" />
<meta property="og:description" content="<?php the_excerpt(); ?>"/>
<meta property="fb:admins" content="XXXXXXXXXXXXXXXXXXX" />
* This source code was highlighted with Source Code Highlighter.
Обратите внимание на тэги og:title , og:url и og:description – соответственно, используем <?php the_title(); ?> , <?php the_permalink(); ?> и <?php the_excerpt(); ?>
В тэг og:image вставлена ссылка на лого сайта, однако, если необходимо, можно настроить тэг так, что вместо одной и той же картинки во всех случаях, будет использована, например, первая картинка поста.
И, наконец, fb:admins вы получите при генерации кода конфигуратором.
Особенности XFBML кнопки Like/Send
Затем стоит отправится на страницу конфигуратора социального плагина Like/Send и заполнить уже знакомую многим форму. Отличие от старой формы заключено в чекбоксе (галочке) Send Button (XFBML Only). Соответственно, если вы поставите эту галочку, то получите XFBML версию комбинированного плагина (Like и Send), если не поставите – получите отдельно код XFBML и отдельно Iframe, однако
Универсальная версия (одновременно кнопки Like и Send) доступна только в XFBML версии!
После того, как вы настроили конфигуратор (шрифт, цвет, вид кнопки и т.д.) и получили код плагина, первую часть кода (все до тэга </script>) следует вставить после тэга <body> в файле header.php вашей темы WordPress
Пример первой части кода:
<div id="fb-root"></div><script src="http://connect.facebook.net/ru_RU/all.js#appId=XXXXXXXXXXXXXXXXXX&xfbml=1"></script>
* This source code was highlighted with Source Code Highlighter.
en_US можно заменить на ru_RU для русской версии
Вторую часть кода, т.е. непосредственно код кнопки,
<fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like>
* This source code was highlighted with Source Code Highlighter.
размещайте где угодно в вашем шаблоне WordPress.
Проверка мета тэгов при помощи URL Linter
После того, как все мета тэги протокола Open Graph настроены, стоит проверить работоспособность кода при помощи инструмента URL Linter (анализатор). Работает он предельно просто – в поле «Введите адрес» вводите адрес страницы с размещенной на ней кнопкой Like / Send и нажимаете “Lint”.
Если все хорошо и все тэги прописаны верно, то на появившейся странице в таблице «Информация» анализатор покажет для какого тэга какая информация взята и как она будет выглядеть. Если есть ошибки, то анализатор подсветит их в таблице «Отладка».
Вот и все, если информация оказалась полезной для вас – нажмите «Отправить» или «Поделиться».
Полезные ссылки для работы:
1. Facebook – главная
2. форум разработчиков Facebook
3. Документация JavaScript SDK
4. Анализатор сайта (linter)
6. Страница конфигуратора социального плагина Like/Send и Open Graph
7. Страница социальных плагинов Facebook
-
New Pandora Bracelets
Вы уже посетили нашу страницу на Facebook?
