Кнопкаfacebook для сайту на Wordpress встановлення та налаштування дизайну, Історія одного блогу

Соціальна мережа facebook.

Я буваю на facebook'і дуже рідко, та можна сказати, що взагалі не буваю. Проте мережа користується популярністю

Фейсбук не так поширений в Україні, як той же ВКонтакте, але якщо розглядати загальне охоплення аудиторії по світу, то Фейсбук дасть фору не тільки ВК, але і всім іншим соц.мережам разом узятим (а Твіттер - мікроблог якщо що, так що його не приплюсовуємо).

Виходячи з попереднього пункту, висновок напрошується сам собою:кнопці Like від Facebook бути! Так що якщо ще думаєте ставити цю кнопку чи ні, краще займіться справою і встановіть.

Код кнопки Facebook для WordPress блогу.

Природно для створення кнопки “Мені подобається” від facebook є спеціальна сторінка в цій соц.мережі, але щоб заощадити час відразу викладу код найвдало згенерованої кнопки:

При такому коді кнопка facebook виглядатиме ось так (не натиснутою та натиснутою):

Такий варіант кнопки вважаю найбільш вдалим, тому що інші кнопки (Twitter, ВКонтакте та Google +1) у нашому блоці матимуть приблизно такий самий розмір та орієнтацію лічильника. Можете подивитися, як це виглядає під статтею.

До речі, пам'ятаю намагався створити кнопку через сам facebook, але виникли якісь проблеми і я не зміг цього зробити (начебто не вистачало прав чи щось на кшталт того). Тому мені довелося шукати код готової кнопки. Знайшов. Тепер буде менше клопоту, якщо потрібно встановити кнопку на інший блог – не треба нічого генерувати, просто скопіював і все.

Ну що код кнопки є. Йдемо далі.

Установка та налаштування дизайну кнопки Мені подобається від facebook.

Минулої статті ми розглянули, куди вставляти кнопку твітнути, щоб вона відобразилася відразу під статтею. Тому вставляємо кнопкуфейсбука слідом за нею і дивимося що вийшло:

сайту

Для кнопки твітнути ми вже задали стиль – вона відображається по центру та з певними відступами, кнопка facebook відображається у лівому нижньому кутку під кнопкою твіту.

Мета: поставити кнопки одну за одною та розташувати їх по центру.

Рішення: створюємо загальний div контейнер для кнопок, змінюємо стилі для кнопки твітнути (нагадаю div class: twit) і пишемо нові стилі для кнопки facebook.

Загальний блок для кнопок я назвав knopki-aga, блог для кнопки твітнути як і раніше twit, блок для facebook кнопки: facebook.

Попередньо зберігши на будь-який пожежний резервні копії файлів style.css і single.php на комп'ютер відкриваємо їх на редагування. У перший файл вставляємо рядки (зверніть увагу, якщо Ви вставляли стиль для кнопки твітнути (.twit), його потрібно підредагувати, а не прописувати ще раз (можна просто видалити, і вставити код, який представлений нижче)):

А у файлі single.php буде наступний шматок коду:

У файлі style.css ми задали наступне:

  • Для загального блоку knopki-aga: ширина 260 пікселів, висота 25 пікселів, відступи: зверху 15, знизу 5 та вирівнювання посередині.
  • Для кнопки twit: вирівнювання по лівому краю і ширину 120 пікселів.
  • Для кнопки facebook: вирівнювання по лівому краю і ширину 140 пікселів.

Ширину для кнопок підбирав досвідченим шляхом

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

Ах так, ось результат:

Таким чином, ми встановили кнопкуМені подобається від facebook на wordpress блог і налаштували її відображення. Наступна на черзі кнопка ВКонтакте, а потім і Google +1.