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

Здравствуйте, как и обещал, сегодня я буду рассказывать Вам о том, как добавить кнопку “Мне нравится” от 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()?>&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"></iframe>

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

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

Подпишитесь на бесплатные уроки
Нажав на кнопку «Подписаться» вы принимаете
соглашение на обработку персональных данных .

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажав на кнопку «Отправить комментарий» вы принимаете соглашение на обработку персональных данных .

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

  1. BlogTot

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

    • com

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

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

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

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

    2- Это касается всех соц сетей, но давайте рассмотрим на примере Facebook
    Для этого я ведь должен быть зарег на всех этих соц сетях, и кроме того там вести блоги , чтобы были друзья и знакомые.
    Только тогда через друзей будет распространятся мои новые посты на сайте и т.д.
    Не будет друзей в соц сетях, не будет и толку от кнопки, правильно понимаю?
    А нельзя просто зарег в Facebook, поставить кнопку и всё. Чтоб там не сидеть, не заводить знакомств – а обновления на сайте люди видели?

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

    • Петр АлександровАвтор статьи

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

    • com

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

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

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

    • Петр АлександровАвтор статьи

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

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

        Я видела – но все же местами проскакивают английские вариант типа
        Be the first of your friends to like this.

  4. Елена

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

  5. Павел

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

  6. Михаил

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

  7. Андрей

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

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

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

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

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

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

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

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

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

  11. Сергей
    https://irinazaytseva.ru

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

    • Сергей
      https://irinazaytseva.ru

      Решение тут http://developers.facebook.com/docs/opengraph/
      Только как менять тег meta для каждой статьи?

  12. yurr

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

    • Петр АлександровАвтор статьи

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

  13. alex2012men

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

  14. akuba
    http://familion.ru

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

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

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

    • Сергей
      https://irinazaytseva.ru

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

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

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

  17. Сергей
    https://irinazaytseva.ru

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

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

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

    1. Установите плагин RusToLat
    2. Настройка постоянных ссылок – произвольно — /%postname%.html
    3. В тексте каждой статьи должен присутствовать какой-либо рисунок. Если рисунка нет то в качестве рисунка статьи будет использоваться “Ваш сайт/img/default.png”

    В файл 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. На эту тему мог-бы получится целый урок.

  18. asliddin

    Петр а куда надо ставить этот код? <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”> спасибо, жду ответа…

    • Петр АлександровАвтор статьи

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

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

    Скажите пожалуйста, как поставить кнопку гугл +1, твиттер, Вк сохранить, фейс бук – мне нравится – в один ряд?
    Когда я ставлю коды, у меня не получается поставить кнопки в один ряд. Помогите пожалуйста!!!

    • Сергей
      https://irinazaytseva.ru

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

      • alena

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

  20. НУрболат

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

  21. Юля

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

  22. Виталий

    Привет, вставил от твиттера и контактов кнопки.
    На гугл +1 теперь воробще непонятно как делать, там все поменялось.
    А на фейсбук тоже не катит у меня. Нету вот такого в коже ” http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike ”

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

  23. Лиза

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

  24. bizform

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

  25. pimpik

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

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

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

  27. Ярослав

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

  28. Ольга

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

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

    • Ольга

      Исправила.

      У меня такой код, не совсем понятно, как изменить код, чтоб фраза не появлялась “Вам и 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’));

  29. Игорь
    https://oneprog.ru/

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

  30. Тимофей

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

    • Петр АлександровАвтор статьи
      https://wpnew.ru

      Вот урок https://wpnew.ru/sozdanie-bloga/poleznoe_dlya_bloga/kak-krasivo-raspolozhit-elementy-v-wordpress.html

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

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

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

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

  32. Vksaver

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

  33. Oleg

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

    • Петр АлександровАвтор статьи
      https://wpnew.ru

      Вот урок https://wpnew.ru/sozdanie-bloga/poleznoe_dlya_bloga/kak-krasivo-raspolozhit-elementy-v-wordpress.html

  34. Неро

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

  35. myhome54.ru

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

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

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

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

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

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

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

  39. Ярик
    https://sdiabetom.ru

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

  40. Ваше имя

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