[grazer]

Сейчас трудно представить какой-нибудь интернет ресурс без кнопок социальных сетей, а ведь кнопке like исполнился лишь год, другим кнопкам и того меньше. Оно и не удивительно, ведь социальные сети отличный источник дополнительного трафика, так почему бы этим не воспользоваться, учитывая то, что кнопки нужно установить только один раз, а трафик будем получать все время. Через несколько дней начнется 2-ой этап конкурса от sape, самое время начинать запускать сайты и самое время разместить на них кнопки социальных сетей, об установке которых я сейчас и расскажу.

Как создать страницу в FaceBook

Отличный способ сформировать сообщество пользователей, а также получать дополнительный трафик на свой сайт – создать страницу в FaceBook, в которой потом можно разместить информацию о сайте, создавать топики для обсуждений, настроить кросспостинг записей сайта через RSS, а также разместить на сайте like box страницы, чтобы посетители вашего сайта могли быстро подписаться на обновления группы.

Чтобы создать страницу в FaceBook нужно перейти на эту страницу. Далее нам нужно будет выбрать одну и шести типов страниц. Если сайт новостной, то лучше всего выбрать «Бренд или продукт» и категорию «Веб-сайт». В поле «Бренд или продукт» вписываем название нашей страницы. Мне нравится сюда вписывать URL сайта, что и вам советую (потом в URL страницы будет отображаться то, что вы введете в это поле). Выглядит это вот так:



Жмем кнопку «Начать общение». На открывшейся страницы, в самом верху будет запись «Подтвердите тип вашей страницы». В первом поле я выбрал «Вебсайты и блоги», во втором – «Новости/медиа». Как раз то, что нам нужно:



Жмем кнопку «Подтвердите тип страницы».

Далее стандартные процедуры – добавить аваторку страницу, пригласить друзей, оповестить поклонников, обновить статус. Тут ничего сложного нет, не вижу смысла расписывать эти пункты.

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

После подтверждения типа страницы сразу переходим к пункту 5 – «Продвигайте эту Страницу на Вашем веб-сайте»:



Жмем кнопку «Добавить кнопку «Нравится»». Нам откроется страница , на которой будет вот такой блок настройки:

• Facebook Page URL (url страницы) – вставляем сюда URL созданной страницы в facebook.
• Ширина – подбираем ширину блока в зависимости от того, в каком месте сайта будем размещать блок. Так как я еще не определился, я это поле оставил со стандартным значением. Потом в коде этот параметр всегда можно будет изменить.
• Показать лица – отображает аватарки подписавшихся на обновление страницы пользователей в окне плагина. Мне нравится эта функция, поэтому я ее оставляю.
• Показать поток – отображение ленты последних записей сайта. Выглядит не очень аккуратно, галочку снимаю.
• Показать заголовок – отображение вверху плагина заголовка «Find us on Facebook». Цвет мне не нравится, тем более что у сайта может быть и другая цветовая схема, поэтому галочку тоже убираю.

Вот какой like box получился у меня:



Теперь жмем на кнопку «Получить код».

Iframe:

Код:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Favtovesticom%2F205023769530075&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

XFBML

Код:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/avtovesticom/205023769530075" width="292" show_faces="true" stream="false" header="false"></fb:like-box>

Если вам нравятся мои настройки плагина, то можете брать эти коды прямо сейчас, не забудьте только под себя настроить высоту и ширину, а также заменить URL моей страницы на URL вашей. Вот этот участок кода нужно заменить ссылкой на свою страницу, слэш «/» нужно заменить на «%» без кавычек):

Код:

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Favtovesticom%2F205023769530075

Вставляем в шаблон сайта в нужное место и радуемся, что все получилось. Для пущей надежности рекомендую самому все настроить и получить код на этой странице.

Как добавить кнопку like от facebook

Кроме like boxa можно еще и установить кнопку like, с помощью которой посетители вашего сайта смогут быстро поделиться интересными материалами вашего сайта со своими друзьями на facebook.

Переходим на страницу с настройками кнопки. Очень похоже на настройку like box:

• Первое поле URL to Like (Ссылка на страницу, которая нравится) – удаляем оттуда ссылку, это поле нужно оставить пустым.
• Layout Style (Стиль кнопки) – мне нравится button_count, box_count тоже выглядит неплохо.
• Show faces (показывать лица) – для кнопки лайк считаю это лишним, галочку снял.
• Verb to display (слово, которое будет отображаться на кнопке) – мне нравится like.
• Font (шрифт) – я выбрал стандартный arial.

Кнопочка у меня получилась вот такая:



Коды для вставки на ваши сайты:

iframe

Код:

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

XFBML

Код:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="false" width="450" font="arial"></fb:like>

Кстати, есть интересная фишка. Если в XFBML коде изменить en_US на ru_RU, то на кнопке будет отображаться надпись на русском языке «Нравится».

Как установить официальную кнопку Twitter

Кроме facebook, еще есть такая популярная социальная сеть как Twitter, у которой тоже есть кнопочка. Установить ее гораздо проще, настроек практически нет, да и изменять их нужно не каждому. Коды для вставки в шаблоны сайта:

JavaScript

Код:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" rel="nofollow">Tweet</a>

iFrame

Код:

<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdev.twitter.com" style="width:130px; height:50px;"></iframe>

Для WordPress есть еще более просто решение. Хорошие люди разработали плагин, который называется Twitter Button. Скачать его можно на этой странице. Скачиваем, заходим в панель управления на страницу добавления новых плагинов (site.com/wp-admin/plugin-install.php), в окно поиска вставляем название плагина «twitter button» и жмем поиск. Вы увидите приблизительно следующую картину:



Под первым найденным плагином жмем кнопку «Установить». После установки активируем плагин, после чего кнопка Twitter появится на на страницах вашего сайта. Все просто. :)

[Germango]

В целом информация полезная, но
нонтент на странице поплыл, смотрел в Oper'e и Chrom'e. Некоторые фразы вообще не читаются.

[krockki]

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="false" width="450" font="arial"></fb:like>

Кстати, чтобы отображалось по русски, не Like, а Понравилось, надо en_US заменить на ru_Ru

[Deimoser]

лучше всего использовать сервис loginza

[tolev]

мне больше нравиться как я на блог панельку поставил от share42
описание здесь tolevbizsystems.com/sajtostroenie/kss
на мой взгляд более удачное решение данной проблемы))

[seo2z]

Через несколько дней начнется 2-ой этап конкурса от sape, самое время начинать запускать сайты и самое время разместить на них кнопки социальных сетей, об установке которых я сейчас и расскажу.

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

[grazer]

Блин, тогда уже от участника точно ничего зависеть не будет, будет от бюджета и тематики.

А вы думаете, в конкурсе решит что-то другое?

[poolk]

решит больший бюджет рационально использованный....

[elvizzz]

Я Яндексовский скрипт буду использовать http://api.yandex.ru/share/
Хотя, если кто-то что-то может негативное сказать про это - милости просим!