Google+1 и Мне нравится от Вконтакте и Facebook — как добавить кнопки лайков в свой сайт


Содержание материала:

Кнопка Facebook Like и Вконтакте «Мне нравится» для сайта

Как поставить коды кнопок «Мне нравится» от Вконтакте и «Like» от Facebook на свой сайт.

Кнопка Facebook Like

Код для кнопки Facebok Like берем на странице для разработчиков.

При установке кнопки Facebook Like обратите внимание на поле URL to Like. В него надо внести адрес страницы, на которой будет стоять кнопка. Однако можно оставить это поле пустым и после, когда вам дадут на выбор 2 кода, выбирайте XFBML, в таком случае в качестве страницы будет выбрана та, на которой стоит кнопка. Полученный код можно разместить в нужном месте на вашем сайте.

Кнопка Вконтакте «Мне нравится»

Взять код кнопки «Вконтакте» можно на этой странице.

Если вы ставите её впервые, то в списке выберите «Подключить новый сайт».
В полe «адрес сайта» укажите — http://site.ru
В поле «основной домен» — /site.ru
Обратите внимание, в этих полях система будет дописывать слеш в конце «/», сотрите его, и не пишите длинное название сайта, лучше ограничиться двумя словами.

Кнопка Твиттера «Твитнуть»

Добавляю закладку на кнопку Твиттера — кнопка «Твитнуть».

Кнопка Google +1

Добавляю ссылку на страницу где можно получить код кнопки «Google +1».

Кнопка «Класс» от Одноклассники.ру

Добавляю ссылку на страницу где можно получить код кнопки «Класс» социальной сети одноклассники.

Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог

Привет всем! В этой статье я расскажу Вам как можно добавить на свой блог два полезных виджета: «Мне нравится» — для Вконтакте и «I like» — для Facebook (Facebook Like Button). Чем полезны эти виджеты? А полезны они тем, что посетители Вашего ресурса нажав на эту кнопку смогут не только выразить своё отношение к посту, но и поделиться ссылкой со своими друзьями.

Как добавить кнопку Контакта «Мне нравится» на свой блог

Итак, чтобы установить себе на блог вот такую кнопочку

создаем специальное приложение, затем переходим по этой ссылке, подключаем новый сайт и выбираем нужный вариант кнопки:

Вот этот код нужно вставить внутри тега (в файле header.php):

Не забудьте вместо знаков ###### вставить свои индивидуальные номера!

А вот этот код вставьте в то место, где Вы хотите разместить свою кнопку:

Как видите, я разместил эту кнопку после каждой статьи на блоге (файл single.php).

Как добавить кнопку Facebook Like Button

С виджетом для Вконтакте.ру мы разобрались, теперь нужно установить виджет для фейсбука.

Переходим на эту страницу, видим вот такое окно:

URL to Like – оставляем это поле пустым

Layout Style – стиль счетчика (я выбрал стандартный).

Show faces – показывать аватарки проголосовавших.

Width – ширина кнопки. Подберите её под свой дизайн (я выбрал 450рх).

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

Font (шрифт) и Color Scheme (Цветовая схема) выбирайте на свой вкус.

После того, как Вы сделали нужные настройки, нажимаем на кнопку Get Code:

Появится вот такое окно:

Нас интересует код из верхнего поля iframe. Копируем этот код в то место, где Вы хотите видеть кнопку «I like».

Теперь очень важный момент! Если у Вас блог на WordPress, то после

У меня этот код выглядит вот так:

Обновление за январь 2012 года: буквально на днях на некоторых сайтах перестала работать кнопка Like от Facebook, которая была установлена с помощью метода, описанного выше. Вот альтернативный рабочий вариант кнопки при помощи html5:

Вот этот код вставляем сразу после тэга

А вот этот кусок кода, в то место, где нужно вывести кнопку:

Как видите, на установку этих кнопок уйдет не больше 5 минут :). И не говорите мне потом, что Вам не хватает времени на такие мелочи – для привлечения посетителей все методы хороши!

Устанавливаем кнопки социальных сетей в один ряд

Всем привет. В этой статье разберемся, где взять кнопки таких социальных сетей как Вконтакте, Твиттер, Фейсбук и Гугл+, а также с тем, как сделать, чтобы эти кнопки располагались ровно в один ряд. У новичков, которые решили установить себе такие кнопки, часто это не получается, и кнопки наезжают одна на другую, либо просто располагаются друг под другом.

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

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

1. Кнопка “Твитнуть” от Твиттера.

Чтобы получить кнопку “Твитнуть” перейдите по этой ссылке и в левом верхнем углу страницы выберите русский язык.

Затем из предложенных вариантов кнопок выберите “Отправить URL-адрес”. После выбора необходимо заполнить все данные:

Здесь я все оставил как есть, кроме последнего пункта “Язык”. Выберите русский язык, и в правой части будет показана ваша кнопка в таком виде, в каком она будет на сайте. Там же указан код, который необходимо будет вставить на сайт.

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

2. Кнопка “Мне нравится” от Вконтакте.

Заходим на страницу разработчиков Вконтакте и заполняем все необходимые данные для получения кнопки:

Если вы еще не подключали ваш сайт в панели разработчиков, то первым делом делаем это – вводим название сайта, его адрес, выбираем тематику и жмем “Сохранить”. Далее выбираем вид кнопки, ее высоту и название. Ниже в окошке появляется код для вставки, который нам и нужен.

Этот код состоит из двух частей. Первая часть:

Эту часть нужно вставить между тегами ‹head› и ‹/head› (для этого откройте файл header.php), но если вы на своем сайте уже используете какие-нибудь виджеты Вконтакте, например комментарии, то эту часть кода вам вставлять уже не надо, так как она уже у вас есть.

Вторую часть кода, а именно:

необходимо скопировать так же, как и код для кнопки “Твитнуть”, этот код понадобится позже.

3. Кнопка Google +1.

Заходим на эту страницу и, как обычно, заполняем все данные.

С кодом для кнопки G+ делаем то же, что и в предыдущем пункте. Первую часть кода мы сохраняем в документе для дальнейшего использования:

Вторую часть кода помещаем в файл header.php между тегами ‹head› и ‹/head›:

4. Кнопка “Мне нравится” от Facebook.

И, наконец, получим код для кнопки “Мне нравится” Фейсбука. Для этого переходим на страницу разработчиков и видим там такую панель:

Поле “URL to Like” оставляем пустым, в списке “Layout” выбираем нужный стиль оформления кнопки и убираем галочки “Show Friends’ Faces” и “Include Share Button”. После этого нажимаем кнопку “Get code”.

Первую часть кода вставляем сразу после открывающегося тега ‹body› в файле header.php (не нужно этого делать, если вы уже устанавливали комментарии Facebook), а вторую часть сохраняем.

Итак, мы нашли коды для всех кнопок, теперь нужно все эти кнопки вставить в нужное нам место в конце статьи в один ряд.

Для этого открываем файл single.php и находим там место, где заканчивается статья. Обычно текст статьи в wordpress заключен в тег ‹div >

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

Как видите, весь блок имеет класс social_button, а также каждая кнопка имеет свой отдельный класс: кнопка твиттера – класс twitter, кнопка вконтакте – vk, кнопка google+ имеет класс googleplus, и кнопка фейсбука – facebook.

В этом блоке нужно заменить коды кнопок на свои, которые вы копировали в отдельный файл.

И, наконец, чтобы кнопки располагались точно в ряд, необходимо этому блоку назначить стили. Для этого открываем файл style.css и добавляем туда следующие строчки:

Все, готово. Теперь в конце ваших статей должны стоять красивые и аккуратные кнопки социальных сетей. К этим кнопкам можно добавлять любые другие кнопки, предварительно, по аналогии, “завернув” их код в тег ‹div›‹⁄div› с нужным классом.

На сегодня это все, надеюсь все понятно объяснил �� . Если возникнут какие-нибудь проблемы, пишите в комментариях – разберемся.

Кнопка Facebook «Мне нравится» (Like)

Недавно я рассказывал про то, Как добавить кнопку Вконтакте «Мне нравится» к себе на блог. Сегодня я решил описать несколько способов добавления другой подобной кнопки самой большой социальной сети — кнопка facebook «Мне нравится».

Статья про Вконтакте получилась, на мой взгляд, достаточно информативной, хотя именно по данной теме есть куча материала.

Используя все кнопки на блоге можно быть уверенным, что продвижение неизбежно.

Моя отличается тем, что я пытался ее более оптимизировать под поисковики (не первая в ранжировании, но на момент написания статьи, по запросу «кнопка вконтакте» на 5-м месте в google, и на 26-м в Яндексе, хотя это поправимо несколькими внешними ссылками с нужными анкорами).

После индексации статьи про кнопку Вконтакте я ежедневно получаю поисковый трафик с google. Теперь я решил провести эксперимент с «кнопкой от Facebook» и посмотреть, получится ли у меня вывести ее в топ.

Кнопка Facebook

Добавить кнопку «мне нравится» facebook с помощью виджета

И так, самый первый и не очень сложный способ добавления кнопки — виджетом.

Виджет предоставляет сама социальная сеть. Для начала переходим по этой ссылке: Установка виджета Facebook . Видим вот такой блок:

Разберем по порядку, что значит каждое из значений.

Первое. URL to like — ссылка, при нажатии на кнопку «Мне нравится» (Like) именно ссылка указанная в данном поле будет отображаться на вашей стене. Если вы хотите использовать ее для ваших статей на блоге, то оставьте поле пустым.

Практически, так можно обманывать посетителя, вставив в URL данной кнопки какой либо левый адрес, а собственно саму кнопку на ваш блог.

Второе. Layput Style — здесь можно выбрать три типа отображения кнопки: standart — будет отображаться кнопка с текстом, а так же фотографии друзей ниже кнопки; button_count — будет отображаться общее число людей, кто щелкнул по кнопке справа от нее (кому понравилось); и третий вариант box_count — здесь, те кто щёлкнет на кнопку будут отображаться под кнопкой.

Третье. Show Faces — переводится как — показывать лица. То есть если убрать галочку, фотографии в профили проголосовавших (нажмавших) отображаться не будет.

Четвертое. Width — устанавливает ширину кнопки. Укажите ширину вашего блока где располагается статья, либо еще меньше. У меня, например, ширина составляет 510, но я указывал 450.

Пятое. Verb to display — здесь указывается, какое слово будет отображаться в кнопке: два варианта — либо Like, либо Recommend.

Шестое. Font шрифт текста.

Седьмое. Color Scheme — стиль отображения: два варианта либо светлый (Light), либо темный (Dark).

В конце всего нажимаем Get Code.

Копируем код в блоке iframe.

На блоге на движке WordPress ищем файл single.php. Если вы не разбираетесь в коде, то вставьте кнопку после кода в данном случае кнопку будет находится внизу статьи. Если разбираетесь, то соответственно устанавливайте по вкусу, поэкспериментируйте. Полученный код закройте в теги …ваш_код…

У меня на блоге кнопка выглядит так:

Буду благодарен, если один раз щёлкните по ней.

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

Если вы хотите кнопку Facebook с собственной картинкой, то следующий способ для вас.

Facebook кнопка для сайта «Мне нравится» своими руками

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

И так, для начала найдите себе картинку кнопки facebook или сделайте ее сами. Я на своем блоге использую вот такую кнопку:

Загружаем картинку к себе на хостинг в папку images в папке с шаблоном (темой). У меня путь до папки выглядит так:

После всего заходим в single.php и ищем куда вставить кнопку. Я рекомендую ставить кнопку в конце поста. Чтобы поставить внизу статьи, то ставьте код после , а если в начале, то — до кода. Данный код:

Сохраняем изменения и проверяем как работает кнопка.

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

Если вы все сделали правильно, то кнопка должна работать после нажатия именно так, как показано на скриншоте выше.

Плагин кнопки Facebook «Мне нравится» для сайта

Самый простой способ отображения кнопки facebook является установка плагина для этой кнопки. Плагинов существует много, я обозначу основные.

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

WP FB Like — с помощью плагина можно разместить кнопку вверху статьи и внизу без заморочек с кодом, так же как и в предыдущем варианте, можно указывать расстояния отступа от краёв.

Facebook Like Button и Facebook Like Button Plugin — плагины примерно одинаковые по настройкам. В общей сложности использовать можно любой плагин, все равно работать они будут одинаково.

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

Еще как мотивация установки, это то, что возможно быстро рассказать друзьям о интересной статье.

Добавляем кнопку Facebook «Мне нравится»

Кнопка Facebook «Like» позволяет рассказать про статью в самой популярной социальной сети в мире.

Устанавливаем кнопку «мне нравится» для Facebook

Заходим на сайте Facebook в раздел «Like Button». Либо вручную, внизу страницы заходим в пункт «Разработчикам», выбираем раздел «Web». На следующей странице заходим в «Integrate Facebook Into Your Website». Далее, слева в меню выбираем вкладку «Core Concepts», в ней раздел «Social Plugins». Заходим в пункт «Like Button».

Заполняем следующую форму:

  • URL to Like — адрес страницы, которой будут ставить лайки. Лучше оставить пустой, в таком случае автоматически будет подставлен адрес страницы, на которой находится кнопка
  • Send Button — дополнительная кнопка, которая позволяет отправить статью друзьям. Лично я убрал ее
  • Layout Style — позволяет выбрать стиль кнопки. Попробуйте поменять, пример кнопки сменится автоматически
  • Width — ширина кнопки. Однако, сколько я не менял, кнопка оставалась прежней
  • Show Faces — если включить, то будут показаны аватарки тех, кто нажал кнопку
  • Font — позволяет выбрать шрифт надписи на кнопке
  • Color Scheme — выбор между светлым и темным оформлением. По мне, темное вообще не смотрится
  • Verb to display — выбираем надпись на кнопке:»Мне нравится» или «Я рекомендую»

После заполнения всех полей нажимаем на кнопку «Get Code». Появляется окно с кодом. Первую часть вставляем в шаблон после открывающегося тега body:

Кнопка Like от Facebook: как добавить на сайт, нюансы, плагин для WordPress


Когда вы нажимаете на кнопку Like от Facebook на сайтах, в вашем профиле появляется полноценный анонс страницы (вместо предыдущей отметки о том, что вам что-то понравилось) — ссылка + цитата + картинка.

Ежели посмотреть на это со стороны вебмастера, то можно увидеть отличную возможность получить дополнительный трафик. Давайте рассмотрим, как можно максимально увеличить отдачу от этой кнопки. Для начала настроим параметры руками (далеко не для всех CMS есть модули/плагины, автоматизирующие процесс).

Генератор кнопок Like вы найдёте по адресу: http://developers.facebook.com/docs/reference/plugins/like/

Первый шаг — создаём саму кнопку.

URL to Like — можно задать свой URL, можно оставить поле пустым, тогда в качестве этого параметра будет стоять адрес текущей страницы (при вы боре XFBML формата кнопки — об этом ниже). Стоит заметить, что FB кнопка по приоритету выберет тот, что указан в теге canonical в head страницы.
Layout Style — три варианта оформления кнопки, подбираем наиболее уместное для вашего дизайна.
Show Faces — если поставить галочку то при заходе на сайт с кнопкой Like под ней будут показываться аватарки ваших друзей, которые уже «залайкали» данную страницу.
Width — ширина. Учитывая, что при включённом Show Faces вам понадобится больше места для кнопки, укажите допустимую ширину блока. Исключительно в пикселях, проценты не работают.
Verb to display — выбираем надпись на кнопке Like или Recommend.
Font — можно выбрать шрифт, аналогичный тому, что у вас на сайте.
Color Scheme — выбор светлой или тёмной цветовой схемы.

Настроили? Теперь жмём кнопку Get Code. В появившемся окне будет два варианта: iframe и XFBML. Если вы не указали URL to Like, то чтобы кнопка взяла в качестве этого параметра страницу, где она установлена — выбирайте XFBML. Лично я из эстетических соображений тоже предпочитаю XFBML, поскольку в неактивном состоянии он не растягивает страницу и не оставляет много пустого пространства, как iframe.

Полученный код можно руссифицировать, для этого в адресе http://connect.facebook.net/en_US/ меняем en_US на ru_RU

Поставим этот код на сайт. Как нетрудно заметить, анонс, заголовок и картинка выбираются Фейсбуком произвольно. Зачастую не так, как этого вам хотелось бы. Например, в остах без картинок для анонса может быть взято изображение счётчика или кнопка Фидбернера. Разумеется, это не способствует кликабельности поста. Поэтому продолжим настройку. Дополнительные параметры для постинга в Фейсбук вебмастер может задатьс помощью специальных мета тегов. Настроить их вам также поможет таже ссылка: http://developers.facebook.com/docs/reference/plugins/like/

Title — заголовок поста.
Type — тут можно задать тип поста (скорее — тематику) — по идее используется в поисковых механизмах платформы, возможно также поисковиками, сотрудничающими с FB.
URL — можно задать свой адрес, но преимущество будет за тегом canonical.
Image — адрес картинки, которая будет использована для анонса.
Site name — название вашего сайта.
Admin — Facebook ID, если вы на странице настройки кнопки находитесь будучи залогиненым в FB, то ваш ID должен подставиться автоматически. Позволит смотреть статистику по работе кнопки, подробности — ниже.

Теперь у нас есть метатеги, которые ставим до тега страницы.

Стоит заметить, что можно создать одну привлекательную картинку для сайта и использовать её для всех кнопок Like ресурса. Это упростит задачу, однако если под каждую страницу делать свою картинку, получится более интересно для пользователя (ого, что-то новое, поду посмотрю!).

Перейдём к автоматизации. Воспользуемся плагином для WordPress Facebook Like Button http://wordpress.org/extend/plugins/facebook-like-button/ — он упростит задачу для блогов на этой платформе. Это одно из оптимальных решений, не требующее правки шаблона, ручного прописывания параметров и т.д.

На странице настроек плагина вы найдёте следующие поля для заполнения:

AppID for XFBML version — здесь просят ввести AppID приложения, если будем использовать XFBML кнопку, чтобы получить этот AppID, надо будет привязать к аккаунту номер телефона, с нашими операторами это может стать проблемой (хотя на данный момент с Билайном и Мегафоном в Московском регионе всё ок, хотя недавно ещё не получалось). Впрочем, и без указания AppID плагин будет работать.

Type: XFBML или iFrame — выбираем формат кнопки, как уже заметил выше, XFBML удобнее.
Show in Home: показывать на главной странице.
Show in Pages: показывать на страницах.
Show in Posts: показывать в постах.
Show in Categories: показывать в категориях.
Show in Archive: показывать в архивах.
Position: выбираем позицию кнопки. Лучше ставить после контента.
Alignment: выравание кнопки по левому или правому краю.
Admin ID: если нам нужна статистика по работе кнопки указываем сюда свой ID (об это уже писал выше).
Defualt Image: сюда пишем адрес картинки для анонса по умолчанию Check to enable: ставим галочку, чтобы включить использование картинки.
Language: выбираем язык кнопки.

Далее настройки внешнего вида:

Layout Style: выбор вида кнопки.
Show Faces: показывать ли аватарки друзей.
Verb to display: слово на кнопке.
Font: шрифт.
Color Scheme: цвета.
Width: ширина.
Height: высота.
Container Class: если в таблице стилей есть элементы для оформления этой кнопки то здесь укажите название класса.

Если вы указали свой ID, то статистика через время будет доступна по адресу http://www.facebook.com/insights/

Чрезвычайно удобная вещь: можно узнать общее число Лайков на сайте, количество переходов с Facebook, демографию тех, кто лайкает ваши заметки (чтобы выявить активный костяк аудитории, с которым можно взаимодействовать). Кстати, на adne.info Like Button CTR равен 0,05%, на rutwitter.com 0,02% — есть над чем работать.

В качестве постскриптума видео с фактами и Facebook:

Так же вам будет иyтересно и полезно прочитать несколько заметок: Фейсбук для блогеров — основы взаимодействия с социалкой, почему люди лайкают страницы брендов — правдиво о том, как набрать кучу лайков.

Econ Dude

Страницы

четверг, 8 июня 2020 г.

Как поставить кнопку Facebook Like в свой Blogger блог

Итак, сегодня поставил лайки еще и от Facebook в свой блог на платформе blogger. И сразу было куча мучений, как всегда бывают мучения с blogger, в отличие от word press, где всё ставиться элементарно с помощью одного плагина.

Пару слов о том, зачем вообще нужна кнопка like из фейсбук.

Зачем вообще нужно всё это?

Ну во первых это красиво, во первых там где пальцы вверх и вниз — оценка постов, это идёт в сниппет выдачи поисковых систем. Другими словами в результатах поиска будет эти оценки, и если их много и они есть вообще, это выделяет вашу статью из других и на неё чаще жмут.

Итог — больше трафика.

Эти мои лайки (оцени статью — пальцы), это система LIKEBTN, и тариф у меня не бесплатный, найти такие штуки для blogger бывает очень трудно.

Далее, зачем нужны остальные плюсики?

Плюсик от google+, хотя эта социальные сеть никому и не нужна, важнее всех, так-как эта социальная сеть важна гуглу, а гугл владеет blogger. От этих плюсов будет зависеть позиция ваших статей вот напрямую. Плюсики от ВК так-то не нужны, но если у вас в ВК аудитория и они их много поставят, то это сигнал для людей что статья популярна (все эти плюсики можно кидать еще и наверх статей, а не только вниз).

Так-же считается, SEO шаманами, что любой такой плюсик и любое взаимодействие пользователя с сайтом (плюсик, коммент, расшаривание статьи) является плюсом для поисковиков и сигналом активности. Короче — хуже от этого не будет почти наверняка.

И вот последнее что я поставил, это лайк из фейсбук.

Как это ставить?

Вообще-то вроде как всё понятно, идёте на сайт:

  • https://developers.facebook.com/docs/plugins/like-button

Кнопка «Нравится» для веб-платформы называется эта страница. И там вроде как всё написано как у людей, как и например у гугла при установке кнопки google+

Но вы наверное забыли или не знали что я ненавижу Facebook. И в ФБ всё через Ж, а еще через Ж всё в блогере.

Вы получаете 2 куска кода:

Как всегда, они хотят чтобы вы поставили верную часть где-то сверху, но я это не слушаю чтобы потом было легче копаться в html и почти всегда ставлю это всё подряд.

Но если вы это в blogger поставите (как открывать html код я думаю все знают, и что нужно его сохранять прежде чем вносить изменения), то блогер вам выдаст идиотскую ошибку.

Тут я нагуглил только на английском.

Нужно заменить все 1& в коде на 1&

Как добавить на лендинг кнопки «Мне нравится» Вконтакте и Facebook?

Здравствуйте, уважаемые пользователи платформы LPgenerator!

В первом посте этой серии опубликовано руководство по добавлению социальных кнопки “Поделиться” на лендинг, в этой статье мы продолжим тематику социальных медиа и расскажем о том, как добавить на целевую страницу, созданную на платформе LPgenerator кнопки “Мне нравится”.

Прежде чем приступить к имплементации виджетов социальных сетей вот, что вам необходимо знать:

  1. Иконки социальных сетей на главной странице оффера в большинстве случаев выполняют деструктивную функцию, т.е пессимизируют конверсию. За исключением тех вариантов, когда оффер долгоиграющий и уже набрал некое социальное наследие в форме лайков.
  2. Теория интернет-маркетинга говорит о том, что посетители лендинга вряд ли будут делиться незнакомым, простым и традиционным оффером (типа ссуды или страховки) со своими друзьями, потому, что это никак не подчеркнет индивидуальность человека.
  3. Как правило на социальные действия хорошо реагируют лиды, т.е посетители, которые оставили заявку и уже попали на страницу благодарности.

Итак приступим к практической части.

“Мне нравится” ВКонтакте

1) Перейдите по ссылке.
2) В разделе “Подключение виджета к Вашему сайту” выберете “Подключить новый сайт” и заполните поля. Нажмите “Сохранить”.

3) Введите цифры и буквы с картинки.

4) Настройте высоту кнопки и ее название в соответствующих полях.

5) Скопируйте из поля “Код для вставки” получившийся скрипт.

6) Откройте целевую страницу в визуальном редакторе LPgenerator. С помощью инструмента “HTML” вставьте скопированный код и сохраните изменения.

7) Сохраните лендинг.

Внимание: проверять работу виджета нужно только перейдя по доменному имени, на котором располагается целевая страница.

8) Если вы откроете страницу в режиме просмотра или с домена, который не указывали в настройках виджета, вы увидите следующее.

“Мне нравится” Facebook

1) Перейдите по ссылке — https://developers.facebook.com/docs/plugins/like-button
2) Введите адрес страницы, которую будут “лайкать”:

3) Выберете параметры кнопки с помощью полей “Layout” и “Action Type”. Поле “Width” можно не заполнять:

4) Нажмите кнопку “GetCode” и скопируйте первую часть кода:

5) Откройте страницу в редакторе LPgenerator и нажмите инструмент «Скрипты»:

6) Добавьте новый скрипт и в появившемся окне вставьте скопированный код. Положение скрипта «После тега и сохраните:

7) Вернитесь на страницу Facebook и скопируйте вторую часть кода

8) На странице в редакторе нажмите инструмент HTML и в открывшемся окне вставьте код

9) Готово! Сохраните страницу и проверьте отображение кнопки перейдя по адресу страницы или открыв ее в режиме просмотра.

Добавление кнопок “Нравится” для других сервисов осуществляется аналогично.

Как добавить кнопку «Мне нравится» от Facebook?

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

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

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

Добавить кнопку «Мне нравится» от Facebook на свой сайт или блог можно с помощью специального кода, получить который можно на сайте Facebook Developers. Для этого нужно заполнить специальную форму:

Процесс получения кода состоит из следующих шагов:

  • поле URL to Like — адрес понравившейся страницы — следует оставить пустым чтобы адресу понравившейся страницы был присвоен адрес страницы, на которой находится кнопка
  • поле Layout Style позволяет выбрать стиль оформления кнопки (со счетчиком голосов или без)
  • поле Show Faces в значении True позволяет отображать аватары пользователей, которым понравился данный сайт или блог
  • в поле Width следует указать ширину плагина в пикселях
  • поле Verb to display отображает название кнопки «Like» или «Recommend» (в русскоязычном варианте «Нравится» или «Рекомендовать»)
  • в поле Font следует выбрать шрифт начертания текста
  • в поле Color Scheme следует выбрать одну из двух предлагаемых схем оформления кнопки: светлую или темную

После заполнения всех полей следует нажать кнопку «Get code» («Получить код»). Теперь чтобы добавить кнопку «Мне нравится» от Facebook на Ваш сайт или блог, Вам следует скопировать из открывшегося окна программный код.

В верхней части окна представлен iframe-код, в нижней — XFBML. Второй вариант более универсален.

Если поле адреса страницы (URL) осталось незаполненным, то после установки кода кнопки «Мне нравится» в html-код страницы пользователям, нажавшим эту кнопку будет «нравиться» именно эта конкретная страница.

Если выбран iframe-код для вставки его в сайт или блог на движке WordPress, то необходимо несколько изменить данный код. Для этого следует найти такой участок кода:

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

и заменить его следующим:

Если Вы хотите, чтобы посетителям «нравился» весь Ваш блог или сайт, то Вам следует заменить указанный участок кода на URL-адрес Вашего ресурса. Затем следует разместить код в шаблоне страниц сайта.

Если Вы хотите изменить язык кнопки (по-умолчанию сообщение на кнопке выводятся на английском языке), то Вам необходимо заменить часть URL в коде кнопки — задать локализацию. Так для включения русского языка следует заменить en_US на ru-RU в строке

Урок 81 Как добавить кнопку “Мне нравится” от Facebook (фейсбук) на блог

Здравствуйте, как и обещал, сегодня я буду рассказывать Вам о том, как добавить кнопку “Мне нравится” от Facebook. Facebook – самая крупная социальная сеть в мире, поэтому, как я думаю, все-таки стоит добавить частичку этой “социалки” на свой блог.

Кнопка “Мне нравится” от Фейсбука выглядит так:

Его часто можно встретить в конце статьи, причем на многих блогах. Все эти кнопки – кнопка от В Контакте, социальные кнопки, кнопка от Facebook помогут Вам повысить посещаемость блога.

Как добавить кнопку “Мне нравится” от Facebook (Фейсбук)

  1. Переходим вот сюда.
  2. И Вы там можете видеть следующее:
    URL to Like (Ссылка на страницу) – оставляем также пустым
    Layout Style (Стиль оформления) – по вкусу, я оставил standart. Можно выбрать со счетчика, но тут уже дело каждого, на вкус и цвет.
    Show Faces (Показывать лица, аватары) – также выбираете по своему усмотрению. Я убрал данную галочку.
    WIdth (Ширина) – подбираете под свой блог. Необходимую ширину можно узнать с помощью FireBug. Если сомневаетесь, для начала попробуйте оставить также. Потом, если что, поэкспериментируете.
    Verb to display (Отображаемое слово на кнопке) – like – нравится или recommend – рекомендовать. Я выбрал like (“нравится”).
    Font (Шрифт) – я выбрал шрифт такой же, как и на блоге (tahoma).
    Color Scheme (Цветовая схема) – Вы можете выбрать светлый вариант или темный, в зависимости от Вашей темы оформления. Я выбрал светлую, так как шаблон на ФанБар.ру – светлый.
  3. Далее нажимаем на кнопку Get Code.
  4. То что написано в верхнем коде копируем:
  5. Вставляем код в нужном месте, я обычно вставляю после статьи — в single.php. В данной случае я поставил код от facebook после похожих статей и кнопки от В Контакте, но перед социальными кнопками:
  6. И в данном коде (который мы только что вставили, меняем фразу (она в начале кода):

Вот окончательный код, который я вставил:

Вот и все. Кнопка стоит и работает!

До встречи на следующих уроках.

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

Добавить комментарий

55 комментариев

У twitter’a тоже вроде такая кнопка есть.

Да есть и раньше была статья об этом как это сделать и добавить эту кнопку от твитера.

Facebook – самая крупная социальная сеть в мире, поэтому, как я думаю, все-таки стоит добавить частичку этой “социалки” на свой блог.

Пётр, у меня вопрос.

Кнопки разных сетей соц. я могу поставить. Но если учитывать что сайт у меня для детей и подростков, то стоит ли их ставить?

Я думаю на твитере или Facebook детей просто нет.

2- Это касается всех соц сетей, но давайте рассмотрим на примере Facebook

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

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

Не будет друзей в соц сетях, не будет и толку от кнопки, правильно понимаю?

А нельзя просто зарег в Facebook, поставить кнопку и всё. Чтоб там не сидеть, не заводить знакомств — а обновления на сайте люди видели?

Просто у меня в голове не укладывается как можно наполнять сайт, раскручивать ( я уже и так все время за компом, бедные мои глаза и дети, которые уже не рады что папа начал делать сайт)

Если же ещё в соц сетях вести дневники и друзей собирать — а стоит этот сайт ( любой сайт) чтобы всё время абсолютно на него тратить?

Мне очень нравится делать сайт, и делаю это не из за денег, которые может будут ( а может и нет)

Но просто не могу понять как другие всё успевают, и наполнять, раскручивать и в соц сетях сидеть.

Пётр, пожалуйста дайте ответ, это важно.

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

Нет, чтобы поставить кнопку «Мне нравится» не нужно регистрироваться на фейсбуке.

Да и для ретвитов не обязательно регистрироваться в твиттере.

Регистрироваться можно,чтобы на вас подписывались в соц. сетях, это кнопки в сайдбаре (твиттер, фейсбук и т.п.). Но там даже можно сделать автоматическую публикацию, к примеру, появилась новая статья, она сама автоматически транслируется в ваш твиттер.

Спасибо, надо поставить! Тем более, что все так просто. Я думаю, что фразу рядом с кнопкой Like можно было бы перевести на русский — не все понимают английскую речь. Для тех, кто выбирет русский вариант — перевожу: «Будь первым из друзей, кому это нравиться»

Почему-то у меня переведено автоматически, можете посмотреть на этом блоге.

Я видела — но все же местами проскакивают английские вариант типа

Топ-пост этого месяца:  Парсер Wordstat для статистики запросов Яндекса зачем нужен, как пользоваться и сколько стоит
Добавить комментарий
15 февраля 2011