«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

Часть V/14. Как добавить Facebook на свой сайт

Автор: Михаил Шакин (Globator)

Дорогие друзья, сегодня я расскажу, как добавить кнопку «Нравится» от социальной сети Facebook (ее еще называют Like Button), а также блок, в котором отображаются пользователи Facebook, которым нравится ваш сайт (Like Box, я его буду называть блок друзей). Вы также можете почитать мой пост о том, Как добавить кнопки социальных сервисов на свой сайт.

Как вы знаете, Facebook - популярная социальная сеть, число пользователей которой буквально на днях превысило 500 миллионов человек. Facebook активно развивается в рунете. Думаю, у Facebook хорошие перспективы, самое время присоединяться к этой социальной сети, поэтому я добавил кнопку «Нравится» и блок друзей на свой блог.

Хочу сказать, что после установки кнопки и блока количество друзей на этом сервисе и число переходов на мой блог увеличилось.

Кнопка «Нравится» хороша тем, что пользователю нужно сделать всего один клик по ней, чтобы рекомендовать понравившийся ему материал вашего сайта своим друзьям. У похожей кнопки «Share» («Поделиться») нужно делать два клика. Чем меньше кликов, тем больше эффективность.Для того, чтобы установить кнопку «Нравится» от Facebook на свой сайт, можно использовать предлагаемый код или воспользоваться плагинами. Я предпочитаю первый вариант. Про плагины я напишу далее.

Кнопка «Нравится» Facebook

Вот как выглядит кнопка «Нравится» от Facebook, вы наверняка встречали ее много раз:

Для того, чтобы получить код кнопки «Нравится», идем на эту страницу. Видим вот такую картину:

«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

Первое поле URL to Like (Ссылка на страницу, которая нравится) оставляем пустым.

Второе поле Layout Style (Стиль оформления). В нем можно оставить Standart (Обычный) либо выбрать пункт Button Count (Счетчик голосов), который будет показывать, сколько человек проголосовало за данную страницу. Я выбрал без счетчика.

Поле Show Faces (Показывать аватары) - выбираем нужный вам вариант. Я выбрал без аватаров, так как они будут в блоке друзей. Для кнопки они не нужны.

В поле Width (Ширина) можно указать ширину в пикселях, которая подходит для вашего дизайна. У меня сделано 500.

Verb to display (Какое слово отображать на кнопке) есть выбор между Like (в русском варианте будет отображаться «Нравится») либо Recommend (на русском будет показываться «Рекомендовать»). Я

выбрал первый вариант.

Вполе Font (Шрифт) можно выбрать из нескольких шрифтов. К сожалению, нет моего любимого шрифта Georgia. Огорчившись, я не стал выбирать никакой шрифт .

Вполе Color Scheme (Цветовая схема) можно выбрать Light (Светлый) или Dark (Темный) вариант оформления кнопки. Я выбрал светлый.

Все изменения настроек вы сразу увидите по примеру кнопки справа.

Затем кликаем по кнопке Get Code (Получить код):

«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

и копируем полученный код из верхнего окна:

Если у вас блог на Wordpress, то нужно будет заменить часть предлагаемого кода. Находим в скопированном коде такой участок:

1.http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike

Изаменяем его на такой:

1.<?php the_permalink()?>

Хотел привести итоговый работающий вариант кода с моего блога, но код упорно не хотел корректно отображаться через плагин Syntax Highlighter, пришлось код удалить.

Я поместил его в файл single.php в папке с темой Wordpress после кода <?php the_content(”); ?>.

Для блогов на Wordpress есть готовые решения для того чтобы вставить кнопку «Like» от Facebook на свой ресурс. Для этого можете скачать и установить следующие плагины:

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

WP FB Like - с помощью этого плагина можно разместить кнопку «Нравится» от Facebook до или после поста (можно оба варианта одновременно), задать отступ кнопки, ее ширину и высоту, а также другие настройки.

Facebook Like Button - функционал этого плагина Wordpress практически одинаков с предыдущими.

Facebook Like Button Plugin - много настроек, как и у вышеупомянутых плагинов.

Блок друзей Facebook (Социальный плагин Facebook)

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

«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

Вот как сейчас выглядит блок друзей Facebook на моем блоге:

Предварительно нам нужно создать страницу нашего сайта на Facebook. На Facebook еще можно создавать группы, но для сайта лучше подходит именно страница. Страница индексируется поисковиками, она доступна для незарегистрированных пользователей Facebook, можно задать ей адрес вида http://www.facebook.com/blogshakinru и именно для страниц доступен блок друзей для привлечения пользователей с вашего сайта.

Для создания такой страницы переходим по этой ссылке. Важный момент - изменить название страницы в будущем будет невозможно, поэтому продумайте нужное название. Я во всем люблю простые решения, и сделал такое название - Shakin.ru.

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

Сейчас нам нужно скопировать номер ID нашей страницы, для этого копируем цифры в адресной строке браузера - я привел адрес своей страницы, у вас будут свои цифры:

http://www.facebook.com/pages/Shakinru/134612429900944?created

Скопировали? Отлично. Теперь нам будет нужен пункт Promote this Page on your website (Продвигайте страницу с помощью вашего сайта), он доступен сразу после создания страницы Facebook:

Жмем по кнопке Add Like Box (Добавить блок друзей), вот адрес этой страницы на сервиса Facebook на тот случай, если ранее вы уже создавали страницу.

Видим там настройки и пример блока друзей:

«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

Обратите внимание, что в первом поле по умолчанию будет вставлен Facebook Page ID под номером 185550966885 (Lactose Free Milk), его нужно будет заменить на ID вашей страницы на Facebook.

Width (Ширина) - так как я решил вставить блок друзей в конце каждого поста, то подогнал ширину под дизайн блога, получилось 520 пикселей.

Connections (Число друзей) - в этом поле указываем, сколько друзей отображать. Я исходил из ширины и сделал 9.

Show Stream (Выводить сообщения) - эта опция отвечает за отображение последних сообщений на вашей странице Facebook. Я ее отключил для экономии места.

Header (Заголовок) - я убрал эту галочку, так как заголовок не нужен.

После установки настроек кликаем по кнопке Get Code и копируем код из верхнего поля.

Вот итоговый код для вставки блока друзей Facebook (я его выровнял по центру). Не забудьте поменять номер ID на свой:

1.<div align="center"><iframe src="http://www.facebook.com/plugins/likebox.php?id=134612429900944 &width=520&connections=9&stream=false&header=false&height=165" scrollin g="no" frameborder="0" style="border:none; overflow:hidden; width:520px; height:165px;" allowTransp arency="true"></iframe></div>

Ятакже поместил его в файл single.php в папке с темой Wordpress после кода <?php the_content(”); ?>.

Для того, чтобы быстро и легко вставить блок друзей на блог Wordpress, есть плагины Facebook Like Box Widget и Facebook Like Box. У них есть все настройки, которые предлагаются при вставке этого блока напрямую с Facebook - можно задать ширину, число отображаемых друзей и т.д.

Есть решение и для Joomla - расширение Facebook Like Box.

Думаю, для многих движков сайтов есть плагины Facebook, для их поиска наберите в поисковике название вашего движка и слово «Facebook».

Для того, чтобы голосовать за понравившиеся сайты, на которых нет кнопки «Нравится» от Facebook, есть плагин для браузера Mozilla Firefox, который называется Facebook Like.

Не забыт и браузер Google Chrome - для него тоже есть плагин Facebook Likes.

«SEO: Поисковая Оптимизация от А до Я» - Продвинутый уровень =>Глава V. Социальное продвижение

Желаю вам успешной работы с социальной сетью Facebook! Приглашаю присоединиться к странице моего блога - Shakin.ru на Facebook.