Марафон v2.0

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

Facebook-Button

Здравствуйте, как и обещал, сегодня я буду рассказывать Вам о том, как добавить кнопку “Мне нравится” от 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. И в данном коде (который мы только что вставили, меняем фразу (она в начале кода):
     http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike

    на

    <?php the_permalink()?>

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

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

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

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

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

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

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

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

по хронологии
по рейтингу сначала новые по хронологии

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

com http://www.nalbatron.com/

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

Виктор http://uotika.ru/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

com http://www.nalbatron.com/

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

Автор
Пётр Александров

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

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

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

Валерия http://time4site.com

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

Автор
Пётр Александров

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

Валерия http://time4site.com

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

Be the first of your friends to like this.

Елена http://dietalive.ru/

как проверить работает ли эта кнопка? может я что то не так в коде поменяла?

и для чего нужно менять строку в коде?

а у меня такой код, Какую часть кода мне необходимо заменить?

Михаил http://morningdrink.ru

А я думаю, ставить-ли эти кнопки на блог. Ведь, нажав на эту кнопку, пользователь уходит в FB или ВК, видит там новое сообщение, отвлекается... В итоге читатель забывает про мой блог и уходит в общение с друзьями.

Андрей http://sxsm.ru

Все же не понятна эффективность этих кнопок на сайте. Я посмотрел сейчас вашу открытую статистику на liveinternet и увидел, что из трехсот посетителей только два человека пришли с твиттера. Интересно, а сколько этих самых посетителей сайт теряет? Сомнительная выгода...

Катерина http://skydive-rostov.ru/

Мне не дает код кнопки. Говорит:

Only verified developers can be added as listed developers of this application.

каким образом я должна быть verified? Аккаунт на Фейсбуке есть.

спасибо!

Алина http://transfiguration.ru

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

Ursul http://www.naturalbad.ru/production/bad_vision_dlya_muzchin/ursul/

У яндекса есть апи-примочки, поволяющие вставить кнопки всех соцсетей одним кликом.

Сергей http://irinazaytseva.ru

Подскажите, как управлять картинками, которые вставляются в Фейсбук по кнопке Мне Нравится. У меня картинки выбираются произвольно. Спасибо.

Сергей http://irinazaytseva.ru

Решение тут http://developers.facebook.com/docs/opengraph/

Только как менять тег meta для каждой статьи?

После the_permalink() точку с запятой забыли.

Автор
Пётр Александров

Не забыл, она потом идет, permalink расположен внутри кода.

alex2012men http://bsb-shop.com/

Брендовая одежда в Одессе - BSB Shop в Одессе! Коллекция вещей в интернет магазине города Одесса

akuba http://familion.ru

можна такую же инструкцию для вконтакте?

Антон http://colaz.ru

Автор! Если не секрет, то что тебе дала кнопка мне нравится? Траффик увеличился? Если да - то на сколько?

Сергей http://irinazaytseva.ru

Мне нравится - зто удобная вещь, чтобы переодически вставлять ссылку на статью на свою стену. Конечно если встает нужная картинка. Блог, который я делаю пока малопосещаемый и об увеличении трафика говорить не приходится. Ну а еще - просто интересно разобраться как это все устроено.

Антон http://colaz.ru

Очень интересно, что по Вашему малопосещаемость? С вашей Alexa=37466 это минимум 1к посетителей в сутки. Это разве мало?

Сергей http://irinazaytseva.ru

Разобрался с вставкой символов < и >.

Здесь исправлнный мой комментарий.

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

Написал код для вставки картинок в facebook.

Может кому пригодится

1. Установите плагин RusToLat

2. Настройка постоянных ссылок – произвольно — /%postname%.html

3. В тексте каждой статьи должен присутствовать какой-либо рисунок. Если рисунка нет то в качестве рисунка статьи будет использоваться “Ваш сайт/img/" width="100%" height="100%"/>”

В файл header.php вставляем следующие строки в то место, где формируются теги <meta>

<?php

$s = $GLOBALS['pic'];

if ($s=='') $s = "Ваш сайт/img/default.png";

echo "<meta property='og:image' content='".$s."' />";

?>

В файл single.php перед строкой <?php get_header(); ?> вставляем:

<?php

$st = $_SERVER['REQUEST_URI'];

$st = str_replace(".html","",$st);

$st = str_replace("/","",$st);

/*В следующей строке необходимо заменить префикс таблицы posts на тот, который вы указали при создании базы данных. Его можно посмотреть в файле wp-config.php */

$row = mysql_query("SELECT post_content FROM `wp_posts` WHERE (post_status='publish' && post_name='$st')");

if($myrow = mysql_fetch_array($row))

{

$s = str_replace(" ","",$myrow['post_content']);

$s = strstr($s,'<img');

$s = strstr($s,'"');

if (strlen($s)>1) $s= substr($s,1);

$i = strpos($s,'"');

if($i>1) $s = substr($s,0,$i);

$pic = $s;

}

?>

P.S. На эту тему мог-бы получится целый урок.

Петр а куда надо ставить этот код? <iframe src="http://www.facebook.com/plugins/like.php?href=&layout=standard&show_faces=false&width=450&action=like&font=tahoma&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"> спасибо, жду ответа...

Автор
Пётр Александров

Так в уроке написано же...

Olejek http://anime-kingdom.ucoz.ru

Скажите пожалуйста, как поставить кнопку гугл +1, твиттер, Вк сохранить, фейс бук - мне нравится - в один ряд?

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

Сергей http://irinazaytseva.ru

Olejek: Внутри кода, который вставляет кнопачку МнеНравится присутствует тег br, и любая следующая кнопка встает на новую строчку.

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

Например вам нужно вставить кнопку +1 после МнеНравится. В теге div, который вставляет кнопку +1 Вы задаете атрибут style с параметрами margin-top:-23px; margin-left:455px; Отрицательное значение margin-top сдвигает новую кнопку вверх, а margin-left двигает ее вправо на заданное число пикселей. Но обязательно нужно посмотреть сколько места резервирует кнопка МнеНравится. Например у меня она состоит из самой кнопки и текста, содержащего имя последнего кликнувшего и это все вместе занимает 450 пикселей. Все это можно поспотреть в Mozille c установленной надстройкой firebug.

Удачи!

не могу разобраться,помогите, как мне вернуть кнопку мне нравится в фейсбуке

НУрболат http://it-mirnk.ru/

Спасибо отличный статья!!

Опишите пожалуйста как сделать Light Box от Facebook, типо плагина мы в контакте, а то у меня ну никак он не хочет отображаться на сайте.

Спасибо. Очень полезные уроки

Виталий http://ppcwp.ru/

Привет, вставил от твиттера и контактов кнопки.

На гугл +1 теперь воробще непонятно как делать, там все поменялось.

А на фейсбук тоже не катит у меня. Нету вот такого в коже " http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike "

При вставке оригинала что они мне предлагают - все ссувается, какбудно границ ему мало 🙂

Привет! У меня не получается постаивть кнопку! там нет кода ифрейм! помогите мне пожалуйста, какой и куда ставить!?

bizform http://bizform.biz

Спасибо, тоже установил кнопку от Facebook.

pimpik http://pimpik.org/

кнопку установил, но пришлось удалить, потому что рисунки на фейсбуке появляются с других статей. Что за бред?

Влад Никольский http://cczy.livejournal.com/

Спасибо, конечно, но всё это есть в самом фэйсбуке.

Вопрос был: как поставить кнопочку НА БЛОГ, наверняка имеется в виду не standalone, а ЖЖ или блог.ру. Эти платформы приведённый вами (???) код не поддерживают.

Ярослав http://itdengi.ru/

Да очень важная кнопка, которая еще может и дополнительный трафик приносить!

Ольга http://www.mycopywriten.ru/

Добрый вечер!

Я добавляю изменения на сайт через Тотал Командер. Давненько туда не заглядывала. Возникла проблема, когда открываю меню окна, чтоб вставить в выбранное место код, у меня вырезать, копировать, вставить, удалить не активно. Не подскажите, как исправить? Еще заметила, если необходимо сохранить документ, хотя там ничего и не смогла сделать окно выскакивает на анг языке, хотя все было на русском.

Ольга http://www.mycopywriten.ru

Исправила.

У меня такой код, не совсем понятно, как изменить код, чтоб фраза не появлялась "Вам и 58 другим это нравится"

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

Игорь http://oneprog.ru/

Спасибо! Полезная статья, будем пробовать.

Тимофей

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

Оксана http://citrino.info/

Спасибо большое, кнопка стала, работает....только странно что фотографии, добавленные к контенту, не расшариваются вместе с текстом. Можете ли мне что-то посоветовать?

Zona http://hostprog.ru/5-skachat-zona.html

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

Vksaver http://bezprogramm.net/69-vksaver-free-download.html

Спасибо за статью, добавил кнопочки. Хорошая вещь.

Oleg http://freegamesandroid.ru/

Спасибо. Понять бы еще как Вам удалось все эти кнопки в один ряд расположить. У меня вставляются с переходами на следующую строку.

Неро http://softataka.com/multimedia/nero/

А не проще будет поставить кнопки социальных закладок, от Яндекса?

myhome54.ru http://myhome54.ru/

как проверить работает ли эта кнопка? может я что то не так в коде поменяла?

и для чего нужно менять строку в коде?

Анютка Незабудка http://ruletov.net/

Спасибо за пояснения) Все очень понятно написано, будем пробовать)))

Кеша Аксенов http://axe-pyrus.ru/

Добрый вечер, кнопка ставиться, но не работает. Я нажимаю на кнопку, счетчик идет, но на странице публикации нет. Что это? И как исправить? Спасибо

Ирина http://luxmea.ru

Поставила кнопки соц сетей, надеюсь хоть на небольшой результат.

Ярик http://sdiabetom.ru

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

Ваше имя

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

Наверх Рейтинг@Mail.ru