Главная » WordPress » Кнопки социальных сетей и закладок на сайт или блог с помощью сервиса share42

Кнопки социальных сетей и закладок на сайт или блог с помощью сервиса share42

Здравствуйте, уважаемые читатели блога DayAfterNight.ru. Хочу поделиться с вами тем, как я реализовал кнопки социальных сетей, не пользуясь плагинами.

Блогеры, которые уже не первый год занимаются продвижением сайтов, рекомендуют в первую очередь всячески связывать свой сайт с социальными сетями. Зачем? — зададитесь вы вопросом. В наше цифровое время социальные сети стали неотъемлемой частью в жизни человека и очень стремительно развиваются. Кнопки, установленные на сайте, помогают популяризировать статьи, что влияет на общее продвижение и тем самым привлекает посетителей.

При создании блога я понял, что плагины замедляют его работу, нагружая сервер хостера, тем самым, забирая ценных посетителей, которые не желают ждать, пока загрузится страница. К слову, большинство плагинов выглядят, мягко говоря, не очень (не хотелось ставить что-то подобное):

некрасивый плагин

Во-первых, практически все они англоязычные — придется копаться в коде и добавлять нужные нам сервисы, а во-вторых, заметно снизилась скорость загрузки страницы, что меня не порадовало, в общем, ничего стоящего для себя не нашел. После часа поисков по всемирной паутине, наткнулся на замечательный сервис: Share42, который удовлетворил мои потребности (вертикальная плавающая панель и горизонтальная фиксированная, к тому же  возможность использовать кнопку «Наверх», что предотвращает установку дополнительного плагина или скитания по коду).

Достоинства сервиса Share42

1.   Элегантный вид, выбор размера и изобилие кнопок (популярных в рунете социальных сетей и закладок)

 красивые социальные кнопки

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

3.   Все файлы, касающиеся данной панели, размещаются у вас на сайте, точнее на хостинге вашего сайта (что обеспечит ее стабильную работу  и не повлияет на быстродействие)

4.   Простота в установке и настройке (не требуется особых знаний в HTML или CSS)


Настройка панели Share42

  • Первое, что потребуется сделать — выбрать социальные сервисы, которые  вы хотите использовать на сайте. Не забудьте о возможности использования дополнительных кнопок, таких как: «Наверх», «RSS», «Избранное браузера» (кнопки разрешается перетаскивать, тем самым, задавая порядок их отображения в будущей панели;  активировать сервис, можно кликнув левой кнопкой мыши по иконке).

выбор социальных сетей для сайта, перетаскивание иконок

  • Перейдем к настройкам. Для начала выберете предпочтительный для вас вид панели (выбрав вертикальный,  появится возможность ограничить количество иконок), укажите кодировку сайта.

Хотите поддержать автора проекта? Оставьте иконку сайта Share42, в противном случае снимите птицу. Добавьте ссылку на RSS ленту (если выбирали).

В поле «К вашему сайту подключен jQuery» я изначально не ставил галочку, панель прекрасно работает. Перед тем как скачивать скрипт посмотрите, как будет выглядеть ваше творение.

настройка работы социальных кнопок

Установка скрипта на сайт

Распакуйте скачанный ранее архив и загрузите папку share42 (в ней находятся 2 файла: «share42.js» и «icons.png»)  на сайт (например, у меня получилось следующее —  http://dayafternight.ru/share42, корневая директория в которой папка со скриптом)

распаковка социальных иконок

Обязательно проверьте работоспособность скрипта, перейдя по ссылке. Если увидите кучу непонятных для вас символов — все правильно!  Также я поставил галочку напротив WordPress, так как мой блог стоит на этом движке. На этом мы заканчиваем с настройками и переходим к установке.

Нам предлагают вставить HTML код в шаблон сайта, что мы и сделаем! Я решил выводить кнопки социальных сетей только на странице с полной новостью. Файл, отвечающий за эту страницу — single.php  (для открытия данного файла рекомендую использовать Html редактор Notepad++)

вставить код социальных закладок и кнопок

 

Рассмотрим расстояния:

  • top1=»150″ — расстояние от начала страницы до плавающей панели (размер указывается в пикселях «px»)

  • data-top2=»20″ — расстояние от верха окна браузера до панели (при прокрутке, размер в «px»)

  • data-margin=»0″ — этот параметр отвечает за горизонтальное перемещение панели ( чтобы сдвинуть влево, указываем значение с минусом, например, data-margin=»-50″, сдвинет панель на 50 пикселей влево, вправо аналогично, только без минуса.

Советую использовать бесплатную, маленькую програмку JRuler, которая помогает измерять расстояние в пикселях.

primer_bloka

Осталось придать панели эстетичный вид, дабы она вписывалась в дизайн сайта. Для этого в файл  style.css (стили) добавим следующее:

Прозрачность (opacity) и цвета (background) настройте под себя. Готово! Теперь у вас на сайте или блоге привлекательные кнопки социальных сетей и закладок без использования плагинов.

3 Комментарии

  1. Виктор

    А я использую плагин «Social Share Buttons» и красивый и все есть=) Так же у него есть свои настройки

    • На момент написания статьи перепробовал все возможные плагины, ничего не понравилось :smile: Нашел решение без использования плагинов, меня устраивает :smile: Вся суть в том, что скрипт стоит на вашем сайте и не использует никаких сомнительных серверов, перенаправляющих в неизвестность. Статья немного устарела, можно будет написать об этом сервисе заново :smile:

  2. Виктор

    Буду благодарен если еще напишите статью о «похожих статьях в посте» как у вас на блоге «Статьи по теме» .. Классная и красивая штука. У меня на блоге так же будет много разделов, WordPress. seo, сайтостроение и тд, и хотелось бы сделать примерно так же как у вас на блоге. Чтобы в разделе сео в конце поста были «Так же по теме» и перелинковка с картинками. Так же в разделе WordPress, перелинковывались статьи только находящиеся в этом разделе.. Или если есть плагин и гибкими настройками?

Добавить комментарий

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">