Как добавить Facebook на свой сайт
Сайт дня (как попасть): Интересная поисковая раскрутка сайта
Дорогие друзья, сегодня я расскажу, как добавить кнопку «Нравится» от социальной сети Facebook (ее еще называют Like Button), а также блок, в котором отображаются пользователи Facebook, которым нравится ваш сайт (Like Box, я его буду называть блок друзей). Вы также можете почитать мой пост о том, Как добавить кнопки социальных сервисов на свой сайт.
Как вы знаете, Facebook - популярная социальная сеть, число пользователей которой буквально на днях превысило 500 миллионов человек. Facebook активно развивается в рунете. Думаю, у Facebook хорошие перспективы, самое время присоединяться к этой социальной сети, поэтому я добавил кнопку «Нравится» и блок друзей на свой блог.
Хочу сказать, что после установки кнопки и блока количество друзей на этом сервисе и число переходов на мой блог увеличилось.
Кнопка «Нравится» хороша тем, что пользователю нужно сделать всего один клик по ней, чтобы рекомендовать понравившийся ему материал вашего сайта своим друзьям. У похожей кнопки «Share» («Поделиться») нужно делать два клика. Чем меньше кликов, тем больше эффективность.Для того, чтобы установить кнопку «Нравится» от Facebook на свой сайт, можно использовать предлагаемый код или воспользоваться плагинами. Я предпочитаю первый вариант. Про плагины я напишу далее.
Кнопка «Нравится» Facebook
Вот как выглядит кнопка «Нравится» от Facebook, вы наверняка встречали ее много раз:

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

Первое поле 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 (Получить код):

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

Если у вас блог на Wordpress, то нужно будет заменить часть предлагаемого кода. Находим в скопированном коде такой участок:
http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike
И заменяем его на такой:
<?php the_permalink()?>
Хотел привести итоговый работающий вариант кода с моего блога, но код упорно не хотел корректно отображаться через плагин Syntax Highlighter, пришлось код удалить.
Я поместил его в файл single.php в папке с темой Wordpress после кода <?php the_content(''); ?>.
Для блогов на Wordpress есть готовые решения для того чтобы вставить кнопку «Like» от Facebook на свой ресурс. Для этого можете скачать и установить следующие плагины:
- есть много настроек (ширина кнопки, высота, цветовая схема, расположение на странице и т.д.), поддерживается русский язык.
- с помощью этого плагина можно разместить кнопку «Нравится» от Facebook до или после поста (можно оба варианта одновременно), задать отступ кнопки, ее ширину и высоту, а также другие настройки.
- функционал этого плагина Wordpress практически одинаков с предыдущими.
- много настроек, как и у вышеупомянутых плагинов.
Блок друзей Facebook (Социальный плагин Facebook)
Помимо кнопки, можно установить на свой сайт блок друзей, которым нравится ваш ресурс. Его еще называют виджетом Facebook, социальным плагином Facebook, но мне нравится простое название - блок друзей. Это позволит всем желающим всего в один клик присоединиться к сообществу любителей вашего сайта на Facebook. Кроме этого, сообщество любителей вашего сайта на Facebook будет быстрее увеличиваться, нежели чем без такого блока друзей.
Вот как сейчас выглядит блок друзей 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 на тот случай, если ранее вы уже создавали страницу.
Видим там настройки и пример блока друзей:

Обратите внимание, что в первом поле по умолчанию будет вставлен Facebook Page ID под номером 185550966885 (Lactose Free Milk), его нужно будет заменить на ID вашей страницы на Facebook.
Width (Ширина) - так как я решил вставить блок друзей в конце каждого поста, то подогнал ширину под дизайн блога, получилось 520 пикселей.
Connections (Число друзей) - в этом поле указываем, сколько друзей отображать. Я исходил из ширины и сделал 9.
Show Stream (Выводить сообщения) - эта опция отвечает за отображение последних сообщений на вашей странице Facebook. Я ее отключил для экономии места.
Header (Заголовок) - я убрал эту галочку, так как заголовок не нужен.
После установки настроек кликаем по кнопке Get Code и копируем код из верхнего поля.
Вот итоговый код для вставки блока друзей Facebook (я его выровнял по центру). Не забудьте поменять номер ID на свой:
<div align="center"><iframe src="http://www.facebook.com/plugins/likebox.php?id=134612429900944&width=520&connections=9&stream=false&header=false&height=165" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:520px; height:165px;" allowTransparency="true"></iframe></div>
Я также поместил его в файл single.php в папке с темой Wordpress после кода <?php the_content(''); ?>.
Для того, чтобы быстро и легко вставить блок друзей на блог Wordpress, есть плагины и . У них есть все настройки, которые предлагаются при вставке этого блока напрямую с Facebook - можно задать ширину, число отображаемых друзей и т.д.
Есть решение и для Joomla - расширение .
Думаю, для многих движков сайтов есть плагины Facebook, для их поиска наберите в поисковике название вашего движка и слово «Facebook».
Для того, чтобы голосовать за понравившиеся сайты, на которых нет кнопки «Нравится» от Facebook, есть плагин для браузера Mozilla Firefox, который называется .
Не забыт и браузер Google Chrome - для него тоже есть плагин .
Желаю вам успешной работы с социальной сетью Facebook! Приглашаю присоединиться к странице моего блога - Shakin.ru на Facebook.
Постовой (как попасть): Аренда экскаватора с гидромолотом в Санкт-Петербурге.
Практика seo и поисковой оптимизации сайтов от SeoProfy.
Про недвижимость и строительство в Украине читайте на этом блоге http://bud.bloginua.com/ на украинском языке.
Десерт на сегодня -дрессированный попугай демонстрирует 20 фокусов на 2 минуты:
Спасибо Вам за добавление этой статьи в:Мои группы:
↑ Как поставить такие же кнопки на свой сайт ↑

















Комментариев: 16
1.
30 июля 2010 в 3:01 pm
Михаил, подскажи, пожалуйста, где в настройках страницы в FB найти изменение адреса страницы? В том смысле, чтобы поменять неудобный ID на http://www.facebook.com/blogshakinru
2.
30 июля 2010 в 3:26 pm
Спасибо за пост! Сегодня на своем блоге поставлю эту штукенцию.
3.
30 июля 2010 в 4:10 pm
Михаил, у меня почему-то не отображается кнопка "нравится" ??
4.
30 июля 2010 в 4:12 pm
А нет - вру, отображается. Я смотрел на все записи главной страницы ))
5.
30 июля 2010 в 6:55 pm
Попробовал поставить в ЖЖ на свой фейсбук - не получается. Может жж не воспринимает тег iframe?..
6.
30 июля 2010 в 11:08 pm
Спасибо за подробную инструкцию! Очень пригодилась. Хотя мой сайт на Joomla тем не менее очень помогла Ваша статья и теперь у нас есть своя страница в Фейсбуке.
.
7.
31 июля 2010 в 5:05 am
Спасибо за детальную информацию!
Уже воспользовался =)
8.
01 августа 2010 в 12:04 am
Спасибо большое Вам!
Можно вопрос?
Как можно вывести похожие статьи без использования плагинов?
Только коддингом?
9.
03 августа 2010 в 8:30 am
Спасибо. Только я думуаю, нет ничего хорошего в том, что pages индексируется поисковиками. Ведь туда попадают несколько первых предложений из вашего поста в блоге. Поисковики начнут путаться, где оригинал, а где - нет. В идеале для страницы нужно писать отдельные уникальные анонсы постов и размещать именно их - если есть такая возможность.
10.
03 августа 2010 в 10:53 am
Полезный топик.
Было бы интересно его продолжение о том, как прикрутить к блогу на ВП форму комментариев от Фейсбука, чтобы незалогиненные юзеры могли писать сообщения.
11.
04 августа 2010 в 6:01 pm
Спасибо, отличный пост, как обычно. Совсем недавно заинтересовался, как поставить такую штукенцию на сайт, а здесь подробно, шаг за шагом все расписано.
12.
06 августа 2010 в 1:03 pm
Я создала страницу, вставила код в блог, но не могу понять, как публиковать посты с блога на facebook странице?
13.
10 августа 2010 в 12:04 am
Спасибо за подробную инструкцию про размещение кнопки Facebook like. А для Joomla установка кнопки чем-то отличается? Например при добавлении полученного кода, чем заменять фразу http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike ?
14.
14 августа 2010 в 8:48 pm
Здравствуйте. На Вашем сайте видела помощь, как вставить Ютуб на сайт. Теперь не могу найти. Подскажите!!! Полчаса искала. Может облако тэгов пообширней? С уважением, Анфиса
15.
18 августа 2010 в 1:42 am
Огромное спасибо за статьи!
16.
01 сентября 2010 в 6:24 am
Добрый вечер а подскажите как сделать что бы новости с Rss выводились на стенку ? Вроде все сделал как описана посте а новости с rss не отображаюца (