Как добавить Facebook на свой сайт

Объявления:

Сайт дня (как попасть): Интересная поисковая раскрутка сайта

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

Как добавить Facebook на свой сайт

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

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

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

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

Вот как выглядит кнопка «Нравится» от 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 (Получить код):

кликаем по кнопке 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 на свой ресурс. Для этого можете скачать и установить следующие плагины:

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

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

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

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

Блок друзей Facebook (Социальный плагин 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:

Promote this Page on your website (Продвигайте страницу с помощью вашего сайта)

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

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

настройки и пример блока друзей 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&amp;width=520&amp;connections=9&amp;stream=false&amp;header=false&amp;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 Like Box Widget и Facebook Like Box. У них есть все настройки, которые предлагаются при вставке этого блока напрямую с Facebook - можно задать ширину, число отображаемых друзей и т.д.

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

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

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

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

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

Глобатор

Постовой (как попасть): Аренда экскаватора с гидромолотом в Санкт-Петербурге.

Практика seo и поисковой оптимизации сайтов от SeoProfy.

Про недвижимость и строительство в Украине читайте на этом блоге http://bud.bloginua.com/ на украинском языке.

Десерт на сегодня -дрессированный попугай демонстрирует 20 фокусов на 2 минуты:

Вы можете почитать лучшие посты моего блога в содержании. Помимо своего микроблога в Твиттере @shakinru, я завел еще один - @ruSEO, чтобы публиковать в него лучшие материалы рунета по SEO, так что можете на него подписаться.
Буду благодарен, если поделитесь этой статьей в социальных сетях:

Похожие материалы:

Приглашаю присоединиться ко мне в следующих сервисах:
Мои группы:
Комментарии Вконтакте:

Пора попить кофе!
Комментарии Facebook:
Комментарии Wordpress:
Комментариев: 22

1. Игорь К 30 июля 2010 в 3:01 pm

Михаил, подскажи, пожалуйста, где в настройках страницы в FB найти изменение адреса страницы? В том смысле, чтобы поменять неудобный ID на http://www.facebook.com/blogshakinru

2. Belka 30 июля 2010 в 3:26 pm

Спасибо за пост! Сегодня на своем блоге поставлю эту штукенцию.

3. Сергей 30 июля 2010 в 4:10 pm

Михаил, у меня почему-то не отображается кнопка "нравится" ??

4. Сергей 30 июля 2010 в 4:12 pm

А нет - вру, отображается. Я смотрел на все записи главной страницы ))

5. Cream 30 июля 2010 в 6:55 pm

Попробовал поставить в ЖЖ на свой фейсбук - не получается. Может жж не воспринимает тег iframe?..

6. ip-ua 30 июля 2010 в 11:08 pm

Спасибо за подробную инструкцию! Очень пригодилась. Хотя мой сайт на Joomla тем не менее очень помогла Ваша статья и теперь у нас есть своя страница в Фейсбуке.
.

7. Retliff 31 июля 2010 в 5:05 am

Спасибо за детальную информацию!
Уже воспользовался =)

8. Руслан 01 августа 2010 в 12:04 am

Спасибо большое Вам!
Можно вопрос?
Как можно вывести похожие статьи без использования плагинов?
Только коддингом?

9. aharito 03 августа 2010 в 8:30 am

Спасибо. Только я думуаю, нет ничего хорошего в том, что pages индексируется поисковиками. Ведь туда попадают несколько первых предложений из вашего поста в блоге. Поисковики начнут путаться, где оригинал, а где - нет. В идеале для страницы нужно писать отдельные уникальные анонсы постов и размещать именно их - если есть такая возможность.

10. Yabr 03 августа 2010 в 10:53 am

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

11. Виктор 04 августа 2010 в 6:01 pm

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

12. Boo 06 августа 2010 в 1:03 pm

Я создала страницу, вставила код в блог, но не могу понять, как публиковать посты с блога на facebook странице?

13. Vestechka 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 не отображаюца (

17. enter 06 сентября 2010 в 2:36 pm

Кто подскажет, как сменить язык "Мне нравится" на другой?

18. Alla Green 15 сентября 2010 в 4:30 am

Большое спасибо за статью, Михаил.
Сегодня создала страницу "Блоги Мам" на фейсбук, хотела сразу же добавить like box (блок друзей), но, в отличие от вашего скриншота, в настройках требовалось указать не ID страницы, а ее URL, а его, как я поняла, нельзя получить до того, как страница набирает 25 likes. Вышла из положения с помощью плагина Facebook Like Box Widget, который использует ID.

А как сменить Like на Мне нравится так и не разобралась :(

19. Alla Green 19 сентября 2010 в 4:06 am

Уже со всем разобрались :) Пока нет 25 likes, можно использовать длинный URL формата facebook.com/pages/Название страницы/Номер ID.
Спасибо!

20. Damager 26 октября 2010 в 7:05 pm

а как сделать кнопку лайк на странице группы ФБ, а не на сайте. все эти коды вставляются в коды сайтов хтмл, мне что нужен будет исходник ФБ чтобы сделать в группе конпку Like?

21. Natasha Klever 10 ноября 2010 в 3:08 pm

Спасибо! В очередной раз воспользовалась вашими подсказками и успешно установила кнопку Like на сайт ))

22. Martin 12 ноября 2010 в 11:20 pm

Кто-ниубдь в курсе как изменить адрес страницы на Facebook. Дело в том, что ранее уже установил имя пользователя на странице facebook.com/username/ но теперь хочу изменить его

Подписаться на обновления shakin.ru по RSS

Количество RSS подписчиков




Новый сервис ссылок навсегда

Ювелирная партнерская программа Gold Affiliate



Эффективная биржа ссылок

Обновления сайта

Читать Shakin.ru в твиттере
Читать Shakin.ru в Google Reader
Читать Shakin.ru в Яндекс.Ленте


Достигнутые цели


Мои бесплатные рекомендации

В случае перепечатки материалов обязательно мое письменное разрешение и прямая индексируемая ссылка на Shakin.ru
Продвижение сайтов, веб-дизайн и креатив © 2007-2012

MAXCACHE: 0.2MB/0.00030 sec