6

Установка на WordPress блог плавающих социальных кнопок

Здравствуйте друзья. Сегодня я решил написать о том, как сделать на блоге плавающие кнопки социальных сетей. Социальные кнопки в блогах сейчас очень распространённая вещь, а плавающие (скользящие) по вертикали пи прокрутке станицы, это вообще клёво и я уверен, что каждый, у кого есть свой блог, хочет сделать такое. Сделать проще всего, это с помощью скрипта share42 и в первую очередь нам нужно зайти на сайт Share42 и всё там настроить для создания нашей плавающей панели социальных кнопок. И так начнём.

1. Заходим на сайт Share42.com. И первое что вы увидите это панель для выбора размера кнопок и самих кнопок социалок, которые вы хотели бы видеть на своём блоге. Общее количество кнопок – 45.

2. Тут мы выбираем, как должна выглядеть наша панель на блоге, можно сделать горизантальным или плавающим, но лучше сделаем плавающую. Выбираем кодировку вашего блога, можно ограничить число видимых кнопок, если вы выбрали 20 кнопок, то соответственно будет не красиво, если будут отображаться все 20 штук. После настройки панели кнопок, настоятельно рекомендую для начала сделать предпросмотр получившейся панели и только потом его скачать.

3. После скачивание нашего скрипта, на нужно загрузить его на хостинг и указать путь к этому файлу, например, у меня это http://problemcomp.ru/wp-content/plugins/share42/share42.js . После мы выбираем платформу блога, так как у нас WordPress выбираем его.

И внизу автоматически сгенерирует код для вставки на страницу блога, у меня этот код такой:

 <code><div class="</code>share42init<code>"</code> data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>" data-top1="150" data-top2="20" data-margin="0"<code>></div></code>
 <code><script type="</code>text/javascript<code>" src="</code>http://problemcomp.ru/wp-content/plugins/share42/share42.js<code>"></script>

У вас только поменяется адрес.

Из этого кода «data-top1=150» – это расстояние от верхнего края до самой панели координаты панели, которая на моём блоге тоже 150.

«data-margin=0» –  это расстояние от панели до страницы с контентом. У меня она равна -70.

«data-top2=20» - это расстояние от верха страницы до панели в момент прокрутки, т.е. не в начале страницы. У меня она равна 25 пикселям.

После заходим в админку или можно через корень сайта, но мы сейчас разберём через админку, так как так более удобнее. И там открываем вкладку «Списки стилей (style.css)» и вставляем в самый конец css код который нам дали. После, ищем вкладку «Одиночная запись (single.php)» и в этом коде находим строку «<?php the_content(); ?>» и сразу после этой строки вставляем  наш скрипт.

Всё готово. Плавающие кнопки действительно выглядят очень хорошо, делает блог намного модернизированным. Автором проекта, кстати, является известный всем блогерам дизайнер и верстальщик Dimox, за что ему спасибо.

На этом у нас всё. Подписывайтесь на RSS – ленту и читайте в твиттере. До скорых встреч, пока!

Подписка
Понравился пост? Так введи Email адрес и жми "Подписаться":


6 Comments

  1. AddToAny Share Buttons — это один из самых популярных WordPress плагинов для социальных сетей с более чем 200,000 активных установок. Этот плагин ставит простые плавающие бары по бокам вашего поста, а также в его начале или конце.

  2. Мы считаем, это лучший плагин для социальных кнопок, поэтому решили установить его на наш блог. Под этим постом вы можете увидеть пример социальных кнопок от ESSB.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *