Відкрити меню

Кнопки Like від Vkontakte та Facebook для блогу на WordPress без плагінів

Вітаю, шановні друзі! Взаємодія блогу з соціальними мережами надзвичайно важлива, блогери створюють спільноти, розміщують можливість поділитися цікавими матеріалами на сторінках різних соціалок – це дає певний приріст трафіку та пришвидшує індексацію статей. Дуже дієві, на мій погляд, кнопочки “Поділитись” та “Подобається” (чи то пак – Like), які просто зобов’язані стояти на кожному блозі.

Кнопки Like для блогу

Здавалося б – що ж тут складного? Можна (як говорять в народі) вальнути плагін і залишається тільки обрати місце розміщення та які мережі відображати, але вся справа в тому, що набагато краще зробити це без сторонніх розширень, інструментами тих же соціалок. В цій статті ми розглянемо – як поставити кнопки Like від Vkontakte та Facebook на свій блог без допомоги плагінів.

В себе на ресурсі я це вже реалізував, після кожної статті, окрім кнопочок поширення, Ви можете побачити і кнопки Like від Вконтакті та Фейсбук (можете навіть лайкнути 🙂 ). Виглядає це діло дуже гарно, компактно та мінімалістично.

Like

Без довгих преамбул давайте перейдемо до реалізації. Першу кнопочку ми поставимо від соціальної мережі Vkontakte – теперішня адреса vk.com

Переходимо за посиланням і бачимо наступну картину:

Підключаємо кнопку Like

Для того, щоб підключити свій блог, заповнюємо необхідні дані. Обираємо “Підключити новий сайт”, прописуємо назву сайту та адресу (домен підставиться автоматом, якщо ні – прописуємо) і тиснемо кнопочку “Зберегти” – додаток підключений до Вашого блогу.

Додоємо свій сайт в додаток

Тепер можна погратися з налаштуваннями кнопки. Я обрав “Кнопку з мініатюрним лічильником”, так як вона більш приємна і її легше розмістити в один рядок з іншими. “Кнопка з текстовим лічильником” мені не сподобалась тим, що сам текст розтягується і важко її вирівняти в рядку, дві інші – дуже маленькі. Налаштовуєте висоту та сам надпис на кнопці. Обирайте те, що Вам більше до вподоби – ось що вийшло в мене:

Налаштовуємо кнопку

Після цього можна вбудовувати “Мені подобається” в блог. За відображення лайків відповідають два шматки коду, перший з який потрібно вставити між тегами <head></head>, а другий – в те місце, де кнопки повинні виводитись.

Прослідкуйте за тим, щоб перед реалізацією кнопочок у Вас цей додаток був збережений. Про те, що додаток працює і підключений до сайту свідчить наявність Вашого apiId в коді. Ось так повинен виглядати робочий віджет. Тут уже немає графи “прописати адресу сайту”, просто обрати доданий.

Готовий результат кнопочки

Можемо розпочинати реалізацію кнопки. Як я вже говорив – за відображення відповідають два шматки коду. Один потрібно вставити між тегами <head></head>, а другий в файл, який відповідає за вивід повної версії нашої статті.

Отже, давайте розберемось з кодом. На зображенні я Вам покажу який код і куди вставляти. Перша частина коду вставляється в файл header.php або index.php, залежно від побудови Вашої теми. Копіюємо цю частину:

Код кнопки

Йдемо в Дизан-Редактор та обираємо файл header.php (або index.php), шукаємо закриваючий тег </head> і перед ним вставляємо цей код, зберігаємо зміни:

Кнопка

Далі – копіюємо другу частину коду:

Код

В редакторі відкриваємо файл single.php та шукаємо місце, де закінчується вивід тексту статті. Ось туди і вставляємо другий код і зберігаємо змінений файл:

В контенті

Все, готово! Кнопочка “Подобається” від Vkontakte у Вас буде відображатись!

Йдемо далі – на черзі кнопка Like від Facebook.

Переходимо за посиланням, опускаємось трішки вниз і бачимо таку форму:

Like Facebook

Прописуєте адресу свого сайту та налаштовуєте кнопку. Все тут просто – вид та стиль кнопочки, колір і т.д., думаю без проблем розберетесь, тим більше, що після кожної зміни Ви бачите приклад результату в правій стороні.

Налаштування

Коли все готово – тиснете “Get Code” і копіюєте із запропонованих варіантів ось цей код собі в Блокнот.

Код Like

Чому в Блокнот? Я помітив таку річ – якщо вставити код без змін, то лайкатись буде сайт в цілому вигляді, а нам потрібні лайки окремих постів. Тому в блокноті робимо наступні зміни: шукаємо в коді шматок, який знаходиться між

та

і замінюємо його на

Детальніше дивіться на зображенні:

Редагуємо кнопку

Якщо ж Ви не бажаєте гратися з кодом або боїтесь щось не так зробити, але Вас влаштовує зовнішній вигляд кнопки Like у мене на блозі, то просто скопіюйте ось цей код і все, нічого не змінюйте:

Цей код буде “лайкати” окремі статті, а не блог в цілому – залишилось вставити код кнопки в файл single.php

Я повторюватись не буду, все робимо по аналогії з кодом кнопки від Vkontakte (без коду в header.php).

Для того, щоб кнопочки були в один рядок, я зробив просту табличку, яку можете використати і собі.

Замість Vkontakte та Facebook вставляєте коди кнопок, потім всю табличку у файл single.php і зберігаєте зміни.

Все, тепер відвідувачі зможуть лайкати Ваші матеріали і поширювати їх в соціальних мережах- надіюсь, що ця стаття стане комусь у пригоді.

Бажаю Вам велику кількість вподобань, шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 1, середній: 5,00 з 5)
Loading...
Обговорення: 19 коментарів
  1. Володимир сказав:

    Зараз там вже зовсім все по іншому, тому щось ніяк не виходить!

    Відповіcти
    1. Володимир сказав:

      Олеже допоможіть будь-ласка!

      Відповіcти
      1. Олег Волощук сказав:

        Та ну не може бути там все кардинально інакше, кнопки від Facebook я сам не так вже давно і ставив. Я подивлюсь і Вам відпишусь. Правда з ВК допомогти не зможу, мене вже там давно немає (якщо і там змінилось).

        Відповіcти
        1. Володимир сказав:

          ВК я поставив, тільки з ФБ проблема!

          Відповіcти
      2. Олег Волощук сказав:

        Глянув, фейсбук дійсно змінив, але тепер все стало ще простіше. Просто два шматки коду дають – один після , другий в те місце, де повинні кнопки виводитись. Все просто, на якому етапі проблема у Вас з’явилась?

        Відповіcти
        1. Володимир сказав:

          Куди ставити перший, а куди другий???

          Відповіcти
          1. Олег Волощук сказав:

            Перший вони хочуть після тега , але спробуйте в footer.php перед , тобто перед закриваючим тегом, це ж також після виходить)). А другий код в те місце, де мають бути кнопки.

            Якщо не спрацює, то тоді перший код переставте в header.php після тегу .

            Власне і все.

            Відповіcти
        2. Володимир сказав:

          Перший я вставив в Хедер, а другий зразу після коду ВК, але кнопки ФБ не появляються!

          Відповіcти
          1. Олег Волощук сказав:

            Повинно працювати. Спробуйте в футер переставити перший код перед .

            Відповіcти
            1. Володимир сказав:

              Перший код вже поставив перед закриваючим тегом Боді, другий там де кнопки мають бути, і нічого, тільки ВК

              Відповіcти
              1. Олег Волощук сказав:

                Покажіть адресу ресурсу.

                Відповіcти
                1. Володимир сказав:

                  poradymo.in.ua

                  Відповіcти
                  1. Олег Волощук сказав:

                    Є кнопки фейсбук – очистіть кеш браузера.

                    Відповіcти
                    1. Володимир сказав:

                      як в опері це зробити?

  2. Олег Волощук сказав:

    Ну я не можу тицьнути Вам пальцем, оперою не користуюсь наразі. В налаштуваннях має бути “очистити дані перегляду” і там обираєш що очищати. Якщо не помиляюсь – то в опері саме так.

    Відповіcти
    1. Володимир сказав:

      Дуже вам дякую за дапомогу. все працює!!!!!!!!!!!!!

      Відповіcти
      1. Олег Волощук сказав:

        Та я то чим допоміг)))

        Відповіcти
  3. Yaroslav сказав:

    Доброго дня, підкажіть будь ласка, як правильно додати код Facebook SDK код (той що забезпечує виконання коду likebox та ін) – в дочірній темі через hooks чи якось інакше?
    Так що б він не злітав при оновленні батьківської теми.. Якщо маєте можливість, поділіться будь ласка зразком коду

    Відповіcти
    1. Олег Волощук сказав:

      Ярослав, код можна взяти в розділі розробників у Facebook, так як він частенько оновлюється, я не хотів би викладати якісь приклади, тому що через деякий час вони можуть бути вже не робочими.

      А щодо “злітання” – якщо Ви код ставите напряму в файл шаблону, то він злетить чи так чи інакше при оновленні, тоді його краще поставити через якийсь плагін. Тому що при оновлення шаблону, як правило оновлюються файли самого шаблону.

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google