Нестандартные кнопки социальных сетей для сайта. Инструкция по установки внутри

Добрый день дорогие друзья! Сегодня у меня небольшой пост, в котором я хочу рассказать вам о пока ещё не запятнанных кнопках социальных сетей для сайта. На эту тему в сети написано уже тоны контента и я не хочу быть ещё одним рерайтером, потому что все эти статьи рассказывают об одних и тех же сервисах яндекса. Поэтому мы сейчас и видим, что на всех блогах стоят одинаковые кнопки и из-за этой пустяковины блоги теряют свою уникальность перед  читателями.  Когда я вижу любую мелочь будь эта форма подписки, соц. кнопки или шаблон, то ценность блога сразу падаем в моих глазах. И в ваших я думаю тоже.

Блогосфера растет и если сейчас делать блог с нуля, то статьями на тему с обзорами классических плагинов, сервисов, установкой 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>

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

Разработка сайта
Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.
Заказать
Продвижение сайта
Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.
Заказать
БЛОГ под КЛЮЧ
Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»
Заказать



Понравилась статья?
Тогда оформи подписку на обновление сейчас
Не забудь подтвердить подписку


9 комментариев
  1. Большое спасибо! Всё получилось с первого раза! [good]

    Ответить на комментарий →
  2. Антон Краморов 20 марта, 2014 в 04:16

    Мария, пожалуйста! ;-)

    Ответить на комментарий →
  3. Самсоненко Алексей 22 марта, 2014 в 07:16

    Огромное спасибо за подробную инструкцию, обязательно поставлю эти кнопки! :)

    Ответить на комментарий →
  4. Антон Краморов 23 марта, 2014 в 07:57

    Алексей, такие кнопки пока ещё эксклюзив

    Ответить на комментарий →
  5. С каких пор он стал буржуйным? [:-|]

    Ответить на комментарий →
  6. Антон Краморов 26 марта, 2014 в 09:31

    npofopr, документация на ENG, поэтому он мне таким показался.

    Ответить на комментарий →
  7. А у меня не получилось по этой инструкции, все заработало только после того, как я прописал полный путь к этим двум файлам (добавь об этом в статью, думаю новичкам будет полезно знать)

    Ответить на комментарий →
  8. Антон Краморов 10 апреля, 2014 в 04:14

    alimugik, покажи, что конкретно прописал?

    Ответить на комментарий →
  9. в header.php

    1
    2
    3
    
    <link rel="stylesheet" href="http://www.itshneg.ru/social-likes_classic.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://www.itshneg.ru/social-likes.min.js"></script>

    В общем полный путь до js и css

    Ответить на комментарий →
Оставь свой первый комментарий и получи:
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]