17:06:2014

Социальные кнопки для сайта без плагинов и проблем с социальными системами

В этой достаточно объемной статье я хочу раз и навсегда рассказать о том, как можно установить социальные кнопки на сайт и не единственным способом, а сразу несколькими, а если получиться, то затрону сразу все. Сразу скажу, я не использую никаких плагинов для того, чтобы на моем сайте отображались подобные кнопки, но и услугами знаменитых социальных сетей я так же не пользуюсь. Как установить кнопки социальных сетей на сайтВсе, кто когда либо пытался установить социальные кнопки, сталкивались с проблемами в работе кода, который по разному себя вел на шаблонах wordpress или joomla, так же не сразу было понятно куда и что вставлять. В общем меня эти проблемы угнетали и я решил их устранить в этой статье!

 

Сторонние сервисы для установки социальных кнопок

 

Я пользуюсь сторонними сервисами для установки социальных кнопок, т.к они не замедляют работу вашего блога(в моем случае самой платформы) и не требует сильных познаний в коде, ведь разбираться в нем не так то сложно, но очень лень. Если вы пролистаете статью в конец, то вы увидите результат долгих поисков и мучений, после которых я нашел то, что меня более менее устраивает!Социальные кнопки для сайта

Так же есть скрин того, как я пытался установить социальные кнопки от яндекса(от сервиса установки социальных кнопок, который создали в яндексе).Социальные кнопки для сайта

Но мне он, почему-то, не очень понравился,  вроде как потому что кнопки казались слишком маленькими. Конечно, скажете вы, можно было по-колдовать с CSS, но мне, как я уже говорил, лень. В итоге я напоролся на сервис, который меня устроил.

Вот так выглядит список, из которого вам предложено выбирать внешний вид устанавливаемых кнопок, достаточно интересный надо заметить:Социальные кнопки для сайта

Я выбрал самый последний вариант, но, мне так же понравились вот эти два(на который направлены стрелочки на картинке выше), люблю минимализм. Чтобы получить эти кнопки переходите по вот этой ссылке, или пролистайте страницу до конца и нажмите на плюсик!Социальные кнопки для сайта

Почему я выбрал именно этот сервис, а не какой-то другой? Для наглядности перечислю основные плюсы этой конторки организации :

  • Огромный выбор социальных сетей, из которых я более 80% даже не знаю
  • Наличие возможности Скопировал-вставил-работает
  • Скорость
  • Красота

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

Про 3-й и 4-й пункт говорить не нужно, то, как работает и красиво ли выглядит вы можете оценить сами, а вот про реализованную возможность Скопировал-Вставил-Работает расскажу по-подробнее. После того, как мы настроим кнопки как нам нужно, мы получаем рабочий код, который необходимо вставить ровно туда, где мы хотим видеть эти кнопки:Кнопки социальных сетей для сайта

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

Вернемся к коду! Скопировав наш код, мы идем(если наш блог работает на wordpress, про joomla сказать точно не могу) в файл single.php, который лежит в корне вашего шаблона. Найти его не должно составлять труда, но для наглядности составлю карту!Кнопки социальных сетей для сайта

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

Я, например, вставил код между двух функций, чтобы поместить его туда, куда я и хотел, а не туда, куда он постоянно рвался:Кнопки социальных сетей для сайта

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


Вот про это я и говорил Скопировал-Вставил-Работает и это приятно, другого ничего не скажешь. Теперь расскажу про подобный сервис от Яши(Yandex’a), который обладает огромными преимуществами пред всеми сторонними сервисами, но, увы, мне он не подошел.

У Яши есть специальный раздел, который называется “Технологии” в котором можно найти много чего интересного и там же скрыт рассматриваемый нами сервис. Надо сказать, что у Яши получилось все очень красиво и, просто говоря, круто:Установить социальные кнопки на сайт

Дизайн очень крутой, кроме того, вам представлен выбор, вы можете выбрать вид кнопок, который вам более всего подойдет! Мне же больше всего нравятся кнопки со счетчиком, поэтому я их всегда и беру! Мне понравилась вот эта кнопка, с интересным интерфейсом нажатия:Установить социальные кнопки на сайт

В общем понятно, что вы можете экспериментировать со своими кнопками, их видом и функционалом, но больше всего мне понравилась фишка связки с Яндекс.Метрикой. То есть, установив эти социальные кнопки на свой сайт вместе со счетчиком от Яши, вы сможете следить за статистикой нажатий на кнопки!Установить социальные кнопки на сайт

Чтобы установить кнопки социальных сетей от Яндекса, нужно, сначала, установить первую часть кода(да, если приглядеться, то код, который нам предлагает Яша для размещения поделен на две части), которая начинается со SCRIPT:Установить социальные кнопки на сайт

разместить в файле footer.php который можно найти используя карту, которую я оставил немного выше! Разместить его нужно прямо перед закрывающим тегом </body>:Установить социальные кнопки на сайт

Выглядеть это будет примерно так, чтобы вы знали, что искать:

Картинка получилась очень большой и на ней ничего не видно, поэтому сделаю вторую, на которой приближу к самому главному:Как установить кнопки социальных сетей на сайт

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

После вставки кода, если вдруг надумаете удалить одну из кнопок, не нужно делать все сначала. Вам достаточно удалить название социальной сети в коде и вместе с ним удалиться кнопка!

Вот так будут выглядеть кнопки изначально:Социальные кнопки

Теперь мы слегка модернизируем код, удалив из него слово vkontakte, сделав его немного короче:

Вот что произойдет с нашими социальными кнопками после того, как мы удалили самую большую социальную сеть РФ:Социальные кнопки

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

Плагины социальных кнопок для WordPress

 

Конечно, самый простой вариант развития событий – это установка плагина социальных сетей. Я уже писал статью про один из подобных плагинов, который мне очень понравился, советую вам её прочитать – “Плагин социальных сетей“.

В добавок к этой статье расскажу еще про несколько хороших плагинов, которые зацепили меня своим функционалом, дизайном. Меня всегда вдохновляли социальные кнопки, которые находятся вровень со статьей, то есть плавающие.  Но, чтобы их установить приходилось пользоваться буржуйскими плагинами, которые заточены под буржуев и с отсутствием самый популярной социальной сети – VK.com. Которую приходилось пилить к плагину самостоятельно, поэтому я никогда не устанавливал подобные кнопки, хоть и очень уж хотелось.

Прошло некоторое время и, благодаря одному крутому разработчику, теперь каждый человек может без особых проблем установить себе вертикальные социальные кнопки, в этом поможет сервис - share42.com.

Как правильно их настроить я расскажу в следующей статье, так как эта уже и без того очень большая, а я по своему опыту знаю, что большие статьи очень тяжело читать, поэтому подписывайтесь на обновления блога по RSS, читайте мой Twitter и точно не пропустите выход новой статьи!



Буду очень признателен, если воспользуетесь социальными кнопками и поделитесь статьей в социальных сетях :)

Ответить


 Seogeeks.ru