Нестандартные кнопки социальных сетей для сайта. Инструкция по установки внутри
Добрый день дорогие друзья! Сегодня у меня небольшой пост, в котором я хочу рассказать вам о пока ещё не запятнанных кнопках социальных сетей для сайта. На эту тему в сети написано уже тоны контента и я не хочу быть ещё одним рерайтером, потому что все эти статьи рассказывают об одних и тех же сервисах яндекса. Поэтому мы сейчас и видим, что на всех блогах стоят одинаковые кнопки и из-за этой пустяковины блоги теряют свою уникальность перед читателями. Когда я вижу любую мелочь будь эта форма подписки, соц. кнопки или шаблон, то ценность блога сразу падаем в моих глазах. И в ваших я думаю тоже.
Блогосфера растет и если сейчас делать блог с нуля, то статьями на тему с обзорами классических плагинов, сервисов, установкой denwera, регистрацией в хостинге – никого не удивишь, а если вы и собрались писать статью на популярную тему, то информация должна быть исключительно эксклюзивная, но молодому блоггеру навряд ли это под силу.
Я сам стараюсь не быть похожим на других и время от времени меняю элементы дизайна, последний раз сменил форму подписки и соц. кнопки пол года назад. Все очень элегантно вписалось в дизайн так, что хочется строчить и строчить на такой блог=)
Ещё пол года назад появился новый сервис кнопок социальных сетей, он какой-то буржуйный кстати и я быстренько себе их установил. Честно сказать я предполагал, что в течение полугода такие кнопки будут стоять уже на всех блога, но время идет и подобные элементы я вижу лишь у единиц, более того очень мало статей имеется с обзором этого сервиса, поэтому пришло время вам о нем рассказать.
Вот вам ссылка на сервис. Выбор кнопок прост как три копейки.
Сперва нужно определиться со скином:
- Классический
- Плоский
- Бирман
Какие вам нужны социальные сети укажите сами, что касается скина, то я лично использую классическую оболочку с четырьмя наиболее значимыми соц. сетями. Сейчас в интернете можно встретить много статей на тему того, что кнопки социальных сетей для сайта несут вред, но я лично не вижу в них ничего плохого и свои 50-100 посетителей в сутки я получаю именно с соц.сетей. Факт, то что для контентных проектов такие кнопки бесполезны, потому что мало кто хочет ретвитить или репостить безличные статейные сайты, а контентом с блогов люди с радостью делятся со своими друзьями. Вот как выглядят все три оболочки кнопок на сервисе:
Я лично мало где встречал такие кнопки, поэтому можете смело устанавливать их себе на блог. Кстати, что касается установки, то я забыл вам о ней рассказать=)
Как только вы настроили подходящий вид кнопок внизу страницы жмите желтую кнопку «скачать». Вот как она выглядит:
Это будет архив содержащий в себе несколько файлов:
- CSS стиль
- Небольшой скрипт .js
- Html код
Пока писал статью, понял, почему у многих нет таких кнопок, а все потому, что инструкция по установке на английском языке, поэтому чтоб вы не парились, я написал небольшой мануал по установке соц. кнопок.
Шаг 1. – Файлы стилей и скриптом забрасываем в папку с вашей темой wordpress.
- social-likes_classic.css
- social-likes.min.js
Шаг 2. – Открываем файл header.php и между тегом <head></head> вставляем следующий код:
1 2 | <meta name="generator" content="Social Likes: http://sapegin.github.com/social-likes/"> <link rel="stylesheet" href="social-likes_classic.css"> |
Говоря простым языком мы подключили CSS стиль и графику кнопок, которая будет грузиться с сервера github.com, тем самым уменьшили количество запросов к базе данных.
Далее выбираем место где вы хотите установить кнопки и вставляете следующий код:
1 2 3 4 5 6 7 8 9 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="social-likes.min.js"></script> <div class="social-likes"> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" data-via="antonkramorov" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> |
Затем сохраняете и обновляете страницу. Кнопки должны отобразиться. На этом у меня все, если у вас есть какие-нибудь вопросы по установке кнопок прошу писать в комментариях. Помогу установить кнопки корректно. Подписывайтесь на обновления блога, жду вас в следующих статьях.
Большое спасибо! Всё получилось с первого раза!![[good]](http://jonyit.ru/wp-content/plugins/qipsmiles/smiles/6.png "[good]")
Мария, пожалуйста!
Огромное спасибо за подробную инструкцию, обязательно поставлю эти кнопки!
Алексей, такие кнопки пока ещё эксклюзив
С каких пор он стал буржуйным?![[:-|]](http://jonyit.ru/wp-content/plugins/qipsmiles/smiles/18.png "[:-|]")
npofopr, документация на ENG, поэтому он мне таким показался.
А у меня не получилось по этой инструкции, все заработало только после того, как я прописал полный путь к этим двум файлам (добавь об этом в статью, думаю новичкам будет полезно знать)
alimugik, покажи, что конкретно прописал?
в header.php
В общем полный путь до js и css