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

Электроника 03.03.2020
Электроника

Всем привет! Сегодня речь пойдёт о таких фишках, как кнопка «мне нравится » от вконтакте и фейсбук. Расскажу, как установить на сайт кнопку мне нравится . Как настроить кнопку мне нравится от вконтакте .

Вот посетители читают статьи на вашем блоге или сайте, вы написали классный материал, «молодцы» - говорят ваши читатели, но комментировать лень… Это ж нужно либо авторизироваться, либо заполнять поля формы: своё имя, писать комментарий, да ещё и капчу вводить, где символы то не всегда разобрать можно… Вот тут то и будет полезна кнопка мне нравится ! Нажмёт на неё человек и всё!

А через некоторое время вы, зайдя в свою статью, наведёте курсор мышки на кнопку «мне нравится » - появится окошко, где будут показаны все люди, кому ваша статья действительно понравилась с их аватарками, кликнув по которым можно перейти в профиль человека на сайте vkontakte или facebook. И, если хотите, можете с ним познакомиться, а может даже сотрудничать в будущем!

Давайте перейдём к установке кнопки мне нравится от vkontakte.ru

Как установить кнопку мне нравится на сайт или блог?

Переходим на страничку виджета «мне нравится» вот по этой ссылке . Перед вами появится форма настройки кнопки мне нравится от vkontakte .

Тут думаю всё просто - заполняем поля формы, название, адрес сайта, основной домен для сайта, выбираем вариант кнопки мне нравится от вконтакте . Выбираем высоту кнопки (данная опция появилась недавно). Обратите внимание на код для вставки, первую часть кода до слов вставьте между тегами своего сайта. Если ваш блог сделан на CMS WordPress, то теги находятся в файле header.php. Вторую часть этого кода вставьте в нужное место своего сайта, там, где вы бы хотели видеть кнопку мне нравится от vkontakte . Опять же, если у вас блог сделан на WordPress, то вставляйте код в файл single.php вашей темы.

Настраиваем кнопку мне нравится от вконтакте.

У кнопки «мне нравится » vkontakte есть ещё несколько интересных параметров настройки, кроме указанных явно в самой форме. Давайте их разберём:

Width - ширина кнопки мне нравится
pageTitle - название страницы (отображается на стене вконтакте)
pageDescription - краткое описание (отображается на стене)
pageImage - адрес миниатюрной картинки (отображается на стене)
text - ваш текст, появится на стене вконтакте (не более 140 символов).

Задаются эти параметры в строчке VK.Widgets.Like("vk_like", {type: "full"}); через запятую после атрибута type:"full" . Выглядеть это будет следующим образом:
VK.Widgets.Like("vk_like", {type: "full", width: 100, height: 20, pageTitle: "Кнопка мне нравится", pageDescription: "Как установить кнопку мне нравится на свой сайт", text: "Интересная, полезная статья!"});

На этом с кнопкой мне нравится от вконтакте я закончу. Ещё пару слов про кнопку facebook , тут всё гораздо проще! Ниже приведён код кнопочки, скачайте его в конце этой статьи, и вставьте себе на страницу, туда, где хотите видеть эту кнопочку.


В коде ничего менять не нужно.

На сегодня всё! Теперь и вы знаете, как установить кнопку мне нравится от vkontakte и facebook на свой сайт или блог. Как настроить кнопку мне нравится от вконтакте . Надеюсь, эта статья была вам полезна. Советую получать новые статьи на e-mail , впереди много новой интересной информации, бесплатных видеокурсов, скриптов и конкурсов моего сайта.

Кнопка от В Контакте “Мне нравится” появилась уже на многих сайтах, блогах. Читатели блога также спрашивали у меня, как поставить ту самую заветную кнопку. Сегодня я решил Вам показать, как это делается.

Чтобы поставить “Мне нравится” от В Контакте, нужно конечно зарегистрироваться в данной социальной сети (хотя, наверное, тех, кого нет Вконтакте, осталось единицы). Из-за того, что в данной социальной сети очень много людей, кнопка от В Контакте может принести огромную пользу – привлечь дополнительных посетителей.

Как установить кнопку от В Контакте “Мне нравится”
  • Первым делом заходите по адресу http://vk.com/dev/Like (если Вы не авторизованы, то сделайте это).
  • Дальше заполняете следующее:
    Сайт/приложение: Подключить новый сайт.
    Название сайта: Вводите название своего сайта/блога.
    Адрес сайта: Введите адрес своего сайта/блога.
    Основной домен сайта: Введется автоматически на основе адреса сайта.
    Нажимаете “Сохранить”.


  • Далее выбираете тип кнопки, как будет выглядеть кнопка Вы сразу же увидите на той же странице, только чуть ниже:


    Лично я предпочел выбрать пункт “Кнопка с текстовым счётчиком”. А название кнопки оставил “Мне нравится ”, можно также поставить “Это интересно”.
  • Дальше нам нужно вставить код в блог. Как я считаю, кнопка “Мне нравится” от Вконтакте должна стоять в конце статьи, чтобы читатель прочитал статью и, если ему понравилось, нажал на кнопку.
    Чтобы кнопка была в конце статьи нам для начала нужно:
    1) Скопировать часть кода, который дает нам Вконтакте от начала до VK.init({apiId: 4505264, onlyWidgets: true});

    вставляем в код своего сайта перед закрывающимся тегом , для сайтов на CMS WordPress этот код нужно добавить в файл header.php .

    Важно! Если вы до этого добавляли на сайт комментарии Вконтакте или какие-то другие виджеты Вконтакте, то этот код у Вас уже будет размещен на сайте, дважды его добавлять не нужно.

    Вторую часть кода, которая выглядит примерно так:

    VK.Widgets.Like("vk_like", {type: "button"});

    вставляем в код своего сайта в то место, в котором кнопка “Мне нравится” должна выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php .

    Like Button для Facebook

    Нажимаем “Get Code” – и в всплывающем окне получаем код для размещения на сайте:

    Первая часть кода, которая выглядит примерно так:

    (function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=492073974146494&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

    Размещаем в код своего сайта после открывающегося тега .

    Важно! Если вы до этого уже размещали на сайте виджет комментариев Facebook или другие виджеты Facebook, тогда этот код у вас уже размещен на сайте и дважды его ставить не нужно.

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

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

    Важный момент! При копировании кода в файлы какой-либо CMS – нужно заменить параметр data-href во втором блоке (адрес сайта):

    на код для постоянных ссылок своего сайта, для CMS WordPress это , и получим такой код для второго блока, который нужно вставить в место вывода кнопки Like:



  • Рекомендуем почитать

    Наверх