Плавающие кнопки социальных сетей

Декабрь 24, 2011 | Комментарии | Как раскрутить блог

Главная » Как раскрутить блог » Плавающие кнопки социальных сетей

Здравствуйте, уважаемые читатели блога Pro100-WordPress.Ru. Сегодня я Вам помогу установить плавающие кнопки социальных сетей на Ваш WordPress блог. К стати, делать мы это будем без каких либо плагинов, просто используем Java скрипт от Share42.

Плавающие кнопки социальных сетей от Share42

Если честно, сам только вчера установил себе кнопки социальных сетей, с целью увеличить посещаемость. Поэтому предлагаю Вам испытать мою плавающую панель. Тем, кто поделиться статьей в соцсетях – огромное спасибо.

Сам процесс установки плавающих кнопок социальных сетей очень прост. Возникнуть проблемы могут только из-за не правильно указанного пути к папке со скриптом (Share42).

Так давайте все по порядку. Для начала переходим на сайт Share42.Com, выбираем из списка нужные нам кнопки социальных сетей (всего в списке 43 кнопки), затем подбираем подходящий для Вас размер иконок (32×32, 24×24, 16×16). После чего, нужно выбрать тип кнопок. Мы с Вами рассматриваем установку плавающих кнопок социальных сетей, поэтому этот тип нам и нужно будет выбрать. Язык подсказок и кодировку сайта оставляем по умалчиванию, а остальные две опции можете настроить на свое усмотрение.

Плавающие кнопки социальных сетей от Share42

После того как Вы скачаете готовый скрипт, Вам нужно будет его закинуть на свой хостинг, в папку с Вашей темой. У меня вот, на пример, получилось так: pro100-wordpress.ru -> public_html -> wp-content -> themes -> makisig -> share42 -> сам скрипт. Вообще прошу заметить, что лучше делать все так, как указано на сервере в разделе «Установка». Если же сделать так как указано там не вышло – тогда делайте по моему варианту.

Вставьте в шаблон Вашего блога (single.php). Напоминаю, что папка со скриптом уже должна быть размещена на Вашем хостинге.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/share42/share42.js"></script>
<script type="text/javascript">share42('<?php bloginfo('template_url'); ?>/share42/','<?php the_permalink() ?>','<?php the_title() ?>',221,167)</script>

Почти закончили. Теперь зайдите в любую их ваших статей и посмотрите – если кнопки появились, значит работа окончена. К стати, не пугайтесь, кнопки появятся довольно таки безобразные. Для того, чтобы их красиво оформить и сделать именно плавающими, добавьте в style.css вот такое правило.

#share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  background: #FFF;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5;}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

Мой вариант отличается тем, что Вы не прописываете путь к папке. А это не есть совсем хорошо. Лишние запросы и т.д. Но если у Вас не получается, то можете воспользоваться моим вариантом. Я думаю, что сильно ужасного здесь ничего нет. Просто закинули скрипт на хостинг, в single.php прописали нужный нам код, добавили в style.css не большое правило и у Вас на блоге уже стоят красивые кнопки социальных сетей.

Если возникнут какие то вопросы – можете смело их задавать в комментариях к этой статье.

Если Вам понравилась данная статья, тогда советую Вам почитать еще и другие материалы, касающиеся этой темы. Возможно Вы откопаете для себя новую и полезную информацию.

Для того, что бы получать свежую информацию первым - советую Вам ​подписаться на рассылку блога​​​ или Вы можете ​получать свежие материалы на Ваш почтовый ящик​.

Написать комментарий

Позвольте мне знать, что вы думаете?

Карта
rss
Карта