Як встановити кнопки соціальних мереж і вибудувати їх в один рядок

1. Кнопка мені подобається Вконтакте
2. Кнопка мені подобається від Facebook
3. кнопка Твитнуть
4. Як встановити кнопки соціальних мереж в один рядок?

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

Ну да ладно, це стаття насправді не про шаблони. Сьогодні я б хотів Вам розповісти про те, як встановити кнопки соціальних мереж на свій сайт (Facebook, Вконтакте і твіттер). Знаю, знаю, в інтернеті зараз море статей про установку соціальних кнопок, але ... Коли я шукав інформацію по установці цих трьох кнопок, я не знайшов жодної розумної статті про їх установку і настройку, можливо погано шукав ... Загалом щоб встановити і налаштувати відображення соціальних кнопок мені довелося витратити багато часу, і після цього я вирішив передати Вам результат моїх дій у вигляді цієї статті. Вийшло у мене чи ні - вирішувати Вам! Давайте приступимо!

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

Перш за все, вони зручні користувачеві. Справа в тому, що в нинішні часи в нашому житті міцно зміцнилися соціальні мережі. Наприклад, соціальну мережу Вконтакте, щодня відвідує понад 30 мільйонів людей в день! Так ось, люди люблять ділитися цікавою інформацією. Коли відвідувач зайде на Ваш блог, прочитає якусь статтю, і вона йому сподобається, він побачить знайому йому соціальну кнопку і вирішить поділитися Вашої записом у себе на сторінці. Запис тут же відобразиться на його сторінці, і в новинній стрічці, а це значить, що статтю побачать всі друзі цієї людини. Можливо, і його друзям сподобається Ваша стаття, і вони також будуть ділитися їй, просуваючи, таким чином, Вас і ваш блог.

Також соціальні кнопки створюють зручність для Вас, за допомогою їх дуже зручно анонсувати свої статті в соціальні мережі. Загалом соц. кнопки, безумовно корисні і встановлювати їх на блог потрібно!

А тепер приступимо до самої установки, і почнемо, мабуть, з соціальної мережі Вконтакте ...

Кнопка мені подобається Вконтакте

Перед установкою ви обов'язково повинні бути зареєстровані в даній мережі, без цього Ви не отримаєте API_ID - Ваш персональний код, за допомогою якого буде виводитися кнопка на Вашому блозі. Після реєстрації Ви можете використовувати всі віджети Вконтакте (коментарі, групи і т.д.).

Щоб встановити кнопку мені подобається Вконтакте, перейдіть по цим посиланням і побачите ось таке вікно:

Тут Вам потрібно підключити Ваш сайт до соц. мережі Вконтакте. Ставимо пункт "Підключити новий сайт", потім вводимо бажане назву сайту і пишемо адресу самого сайту. Поле "Основний домен сайту" заповнюється автоматично. Тиснемо "Зберегти". Наступним кроком налаштуємо вид самої кнопки:

Можна налаштувати вигляд Вашої кнопки, висоту і назва кнопки, за Вашим бажанням.

Тепер можна перейти до вставки створеної кнопки на наш сайт. Після всіх налаштувань Ви побачите наступний код, який необхідно вставити на Ваш сайт:

Першу частину коду (виділена червоною рамкою) потрібно вставити в файл header. php перед тегом «/ head».

Другу частину коду (виділена чорною рамкою) вставляємо в потрібне місце в файл single.php

Отримуємо кнопку мені подобатися Вконтакте на наш блог. Як бачимо, все простіше ніж здається насправді. Наступна кнопка яку ми встановимо, буде кнопка мені подобається від Facebook.

Кнопка мені подобається від Facebook

За аналогією з кнопкою Вконтакте, йдемо на сторінку генерації кнопок від Facebook і створюємо нову кнопку.

На сторінки генерації кнопки нам потрібно заповнити наступні поля:

URL to Like можна вставити посилання вашого сайту. Але, раджу цього не робити. Це поле означає те, що всі позначки будуть вести на вказану статтю, а якщо кнопка встановлена ​​до всіх статей, то потрібно щоб позначки велися до певної статті, тому полі не заповнюємо.

Поле "Send Button" означає що Ви, можете відправити Вашому другу Вашу запис. Це цікаве нововведення з'явилося зовсім недавно.

Поле Layot style відповідає за стиль кнопки. Тут вже налаштовуєте за Вашим бажанням.

Show Faces - показувати обличчя?

Verb to display текст кнопки "мені подобається" або "рекомендувати". Like - мені подобається, recommend - рекомендувати.

Color Scheme дозволяє вибрати колірну гамму кнопки (light - світла, dark - темна).

Font дозволяє вибрати шрифт кнопки.

Після створення кнопки, натискаємо "Get code", щоб отримати код вставки кнопки на Ваш сайт. Відкриється ось таке вікно:

Першу частину коду (виділено червоним) вставляєте в файл header.php після тега «body». Другу частину (виділена чорним) знову ж вставляєте в потрібне місце в файл single.php

Ось таким способом, ми отримуємо кнопку like від Facebook. Йдемо далі. Наступна кнопка Twitter

кнопка Твитнуть

Кнопка Твитнуть встановлюється не складніше ніж дві попередні.

Перед генерацією кнопки необхідно бути зареєстрованим і зайти на Twitter під своїм логіном. Переходимо на сторінку генерації кнопок і бачимо наступне:

Тут взагалі все просто і складнощів при створенні кнопки виникнути не повинно. Першим що нам потрібно зробити, це вибрати, як буде виглядати майбутня кнопка.

Поле з посиланням заповнювати не потрібно за аналогією з Facebook. Як тексту будемо використовувати назву сторінки. Далі необхідно налаштувати згадки, прописуємо туди логін Вашого аккаунта твіттер. Справа можна побачити результат отриманої кнопки і її код для ставки на сайт. Копіюємо цей код в файл single.php Все, кнопка Твитнуть додана на сайт!

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

Як встановити кнопки соціальних мереж в один рядок?

Ми маємо три коду, які виводять кнопку певної соціальної мережі. Перший код (у мене це кнопка від Вконтакте) я обернув тегом div style = "float: left;" Тобто в даному випадку кнопка буде знаходитися зліва. Наступну кнопку я обернув тегом div style = "float: left; width: 25% »Як бачимо, з'явився новий параметр; width: 25% - відстань між кнопками, його налаштовуємо як Вам потрібно. Останню кнопку я обернув в тег div style = "float: right; width: 25% »тут все те ж саме, тільки замість параметра left, виставлений параметр right, тобто кнопка знаходиться праворуч. Ось який код у мене вийшов цілком:

<Div style = "float: left;" > <Div id = "vk_like"> </ div> <script type = "text / javascript"> VK. Widgets .Like ( "vk_like", {type: "button"}); </ Script> <br> </ div> <div style = "float: left; width: 25%"> <div class = "fb-like" data-send = "true" data-layout = "button_count" data -width = "450" ​​data-show-faces = "true"> </ div> </ div> <div style = "float: right; width: 25%"> <a href = "https: // twitter. com / share "class =" twitter-share-button "data-via =" life_webmaster "data-lang =" ru "> Твитнуть </ a> </ div>

<Div style = "float: left;"> <div id = "vk_like"> </ div> <script type = "text / javascript"> VK.Widgets.Like ( "vk_like", {type: "button"} ); </ Script> <br> </ div> <div style = "float: left; width: 25%"> <div class = "fb-like" data-send = "true" data-layout = "button_count" data -width = "450" ​​data-show-faces = "true"> </ div> </ div> <div style = "float: right; width: 25%"> <a href = "https: // twitter. com / share "class =" twitter-share-button "data-via =" life_webmaster "data-lang =" ru "> Твитнуть </a> </ div>

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