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

Дата: 28 червня 2013 Рубрика: Технічні поради по WP Коментарі: Прокоментуй!

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

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

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

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

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

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

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

Після цього можна вбудовувати «Мені подобається» в блог. За відображення лайків відповідають два шматки коду, перший з який потрібно вставити між тегами , а другий — в те місце, де кнопки повинні виводитись.

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

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

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

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

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

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

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

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

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

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

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

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

та

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

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

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

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

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

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

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

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

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


З повагою, Олег Волощук.

Бажаєте мати свій власний блог на WordPress?

Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

Ваш E-Mail 100% в безпеці!

 

Залишити свій коментар

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Google + фейсбук Вконтакті Twitter RSS
Категорії
  • Інтерв’ю (4)
  • Конкурси (5)
  • Оголошення (10)
  • Особисте (18)
  • Плагіни для Wordpress (15)
  • Саморозвиток (7)
  • Технічні поради по WP (19)
Канал на YouTube
Соціальні спільноти
  • Вконтакті
  • OK
  • Facebook
Кращі коментатори
Віктор Х.(14)
fedun(9)
Володими.(5)
ML(5)
Pavlofox(4)
Саша(4)
Світлана(4)
Cyber(3)
запитів / генер. стор. / спож. пам'яті
50 / 0.407 / 58.67mb
Вгору