Социальные кнопки для сайта!Всем привет! Решился я все таки поставить себе на блог социальные кнопки, сделать это не долго и не сложно, но все как то руки не доходили. Практически каждый пользователь интернета имеет свою страничку в социальных сетях, и если у вас на сайте будет такая кнопка, то он может сделать репост страницы в социальной сети, достаточно только нажать на ту кнопку, где зарегистрирован пользователь. Также, наличие таких кнопок эффективно влияет на продвижение вашего сайта в поисковых системах, а это увеличение доверия, посещаемости и индексации вашего сайта. В статье я расскажу, где взять социальные кнопки, куда и как поставить. На днях я установил кнопки на блог моей сестренки, смотрится неплохо и все отлично работает. Так как она захотела видеть свои кнопки не только под статьей, где обычно они ставятся, а еще и на всех страницах блога посередине шаблона, то пришлось немного повозиться. Тот, кто разбирается в HTML и CSS то не составит труда их поставить. Я конечно же расскажу как их поставить и под статьей, сайд-баре и в сам шаблон, читайте дальше. Есть сервисы, которые позволяют выбрать и настроить кнопки, скопировать полученный код и вставить его в нужное место на своем сайте. Давайте посмотрим как это сделать на сервисе Pluso.ru, от туда я и взял кнопки для блога сестры. На главной странице сервиса можно сразу начать выбирать свои кнопки. Отметьте тот ряд кнопок, стиль которых понравился и выберите, какие дополнительные социальные кнопки вы хотите чтобы у вас были. 
Выбирайте кнопки, которые подходят под дизайн и оформление вашего сайта. Ниже есть предпросмотр и настройки. Сделайте нужные настройки и скопируйте код, который получился. Ставим социальные кнопки под статью!Для этого нам нужен файл single.php, находится он в директории сайта с вашей темой (/domains/ваш сайт.ru/wp-content/themes/ваша тема/single.php). Для работы с файлами своего сайта я использую файловый менеджер FilleZilla и текстовый редактор Notepad++ Перенесите файл на рабочий стол и откройте. Нужно найти место, где заканчивается пост. У себя я хочу видеть их сразу внизу поста, а категории и метки будут стоять после кнопок. 
Найдите в файле single.php место где начинаются категории и метки, и перед ними вставьте скопированный код ваших социальных кнопок. 
Вставили код, сохранили и перезаписали обратно на хостинг. Теперь обновите страницу своего сайта и посмотрите, что получилось. 
У меня получились слишком маленькие кнопки, поставлю среднего размера. Для этого вернемся на сервис Pluso.ru и в настройках укажем другой размер, скопируйте код и замените его в файле single.php и проверьте еще раз как получилось. 
Вот теперь, все просто отлично, меня устраивают такие кнопки. Уверен, что у вас тоже все получилось. У сестры на блоге я выравнивал кнопки по центру, если вам будет нужно, то сделайте следующее. Для выравнивания не только кнопок, а чего угодно, используйте такие свойства: | style="margin-top:10px" — отступ сверху на 10 пикселей; style="margin-left:50px" — отступ слева на 50 пикселей; style="margin-bottom:20px" — отступ снизу на 20 пикселей; style="margin-right:5px" — отступ справа на 5 пикселей; align="center" - выравнивание по центру; align="left" - по левому краю; align="right" - по правому краю; |
Необходимое свойство добавьте в код кнопок, установив нужный размер пикселей. Пример выравнивания кнопок: | Сам скрипт не изменяйте! <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script> А вот дальше выводятся кнопки, именно их нужно регулировать: сделан отступ сверху и снизу на 40px |
| style="margin-left:40px; margin-top:40px" |
| <div style="margin-left:40px; margin-top:40px" class="pluso" data-options="medium,round,line,horizontal,counter,theme=08" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,yazakladki,pinme,livejournal,blogger,email,print"></div> |
Выравнивайте кнопки как вам нужно, сохраняйте, перезаписывайте и смотрите результат. Рекомендую к просмотру по данной теме эту статью, думаю вы найдете что то полезное для своего сайта. Как добавить социальные кнопки в шаблон сайта!И снова приведу в пример блог Ани! Если вы откроете ее страницу, то увидите социальные кнопки установленные в самом шаблоне над статьями. Также пришлось выравнивать, чтобы смотрелось все аккуратно. Как и где взять код кнопок я писал выше, теперь расскажу куда я поставил код для отображения в шаблоне сайта. Для начала решите, где вы хотите видеть кнопки, в какое место их будете ставить. Нужно выдернуть на рабочий стол файл Header.php, находится он в той же папке, что и single.php, откройте его. Пример вставки кода у Ани: 
После блока с навигацией поставил код с кнопками, и выровнял их по центру с помощью свойств. Чтобы найти в каком месте поставить код, кликните по этому месту правой кнопкой и выберите режим просмотра кода элемента. Откроется окошко с кодом, и необходимо определить куда будет правильно поставить код. Если водить мышкой по коду, на сайте будут подсвечены определенные элементы, вот и нужно правильно выбрать нужный элемент. Если не получится с одним, пробуем другой. И сделайте на всякий случай резервную копию файла, который изменяете. Принцип думаю вы поняли, дальше сами. Как поставить социальные кнопки в сайдбар сайта!Ну здесь вообще все просто, наверное вы и сами знаете как это сделать. В консоли вашего сайт перейдите: внешний вид — виджеты. Переместите виджет — текст в рабочую часть сайдбара. 
Можете придумать название, которое также будет отображаться на сайте. И в большое окно виджета вставьте скопированный код ваших кнопок. Чтобы сделать по центру, перед кодом напишите <div align="center">ваш код</div> и сохраните. 
Теперь пройдите на главную страницу вашего сайта и обновитесь (F5) Социальные кнопочки стоят в сайд баре. Если после обновления, вы не увидели изменения, то возможно надо почистить кэш и попробовать еще раз. Установить кнопки можно в любое место сайта, если хоть немного разбираетесь в HTML и CSS. На некоторых сайтах видел соц. кнопки в подвале сайта, а за это отвечает файл footer.php. Но, имейте в виду, что если вы ставите кнопки на сайт — появляется дополнительная нагрузка на страницы сайта, что опять же не очень хорошо. Особенно влияет установка кнопок в шапку сайта, так как она загружается в начале, а потом уж остальное. Решайте сами, стоит ли ставить кнопки и куда ставить. На этом я заканчиваю статью. Если она вам понравилась и была полезна, то можете подписаться на обновления и поделиться с друзьями  P.S. Если вы хотите изменить стиль и дизайн кнопок на свой, то попробуйте сервис Share42.com Следующая статья: «Комментарии ВКонтакте на сайте WordPress!» Предыдущая статья: «Как сделать слайд шоу на сайте!» Всем желаю удачи! Автор блога, Денис Максимов | 
Комментариев нет:
Отправить комментарий