Кнопки социальных сетей для сайта



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

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

А может для тотального контроля над сознанием людей :)

Как работают кнопки, я думаю, Вы знаете. Прочитав интересную и полезную статью или посмотрев прикольный видеоролик, возникает желание поделиться с друзьями интересным материалом. Тогда мы жмем кнопку любимой социальной сети и все. Ссылка с краткой информацией опубликована на Вашей странице. Удобно, не правда ли?

Для блоггеров очень важно иметь у себя с десяток кликабельных иконок социальных сетей! Дополнительный трафик, привлеченный с социалок, никто не отменял. Поэтому грех будет не воспользоваться удобным случаем сделать их для своего сайта. Идет?

Как сделать кнопки социальных сетей

Воспользуемся одним из простых способов, обратившись за помощью к сервису share42.com/ru

Второй способ как сделать социальные кнопки для сайта - опубликован недавно!

Если сервис отображается у Вас на английском языке, то в верхнем левом углу выбираем русский язык и идем дальше.

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

Как это сделал я? Под цифрой 1 (Прочее) отмечено поле, в которое путем перетаскивания мышью (зажать ЛКМ) перемещаем иконки. Расставьте их в такой последовательности, в которой Вы хотите их видеть у себя на блоге.

Выбираем из предложенных вариантов. Здесь я убрал галочку с «добавить иконку». Прописал адрес своего RSS – Вы пишите свой адрес.

Если выбрать тип панели вертикальную, плавающую, тогда иконки будут расположены  вертикально, скользя  по краю полей.  У меня стоит горизонтальная, её и описываю, а Вы выбирайте уже сами.

Определите свой тип сайта, у меня WP.

Смотрим, как будет выглядеть панель, если Вас все устраивает – качаем скрипт. Полученный скрипт перенесем на свой хостинг в корневую папку httpdocs (у меня) у Вас возможно  public_html – зависит от хостинга.

Переходим к самой установке кода вывода панели иконок. Идем в wp-content/themes/тема Вашего блога/single.php

Важно! Если не уверены в своих действиях скачайте изменяемый файл single.php себе на компьютер. В случае неудачи всегда можно восстановить предыдущее состояние блога (сайта).

В файле single.php необходимо вставить код, но спрашивается куда?.. откройте на своем блоге любую статью, пролистайте весь текст до конца. На примере, у меня последней является картинка (2) и я хотел бы вставить кнопки после нее! Выделяю мышью слово «Рубрика» — жму Ctrl+C. Открываю исходный код страницы – Ctrl+U. Вызываю функцию поиска Ctrl+F, вставляю выделенное мною слово «рубрика» — Ctrl+V.

Мне поиск выдает месторасположение искомого слова, смотрите скриншот. У меня это div class postcat. Готово!

Идем обратно к single.php, вводим в поиске Ctrl+F cлово “postcat” и вуаля – готово! Этим делом мы обозначаем месторасположение объекта в самом коде файла single.php, следовательно рядышком и «притулим» готовый код из пункта 5 (смотрите ниже скрин)

Только наш код с сервиса Share.ru нужно ставить после закрывающих тегов/div. По крайней мере так у меня. Вот и все!

Совет начинающим, чтобы найти место где правильно разместить код: для начала вместо кода можно использовать набор букв или цифр, например (rrr) – без скобок… Вставляете в single.php, в предполагаемом месте – сохраняете и смотрите у себя на блоге в статье где эти буквы вылезли, если не там где надо, тогда легко удаляете их и вставляете в другое место (метод тыка). Ага, если буквы появились там, где надо – можно смело размещать сам код.  Думаю понятно…

Не обязательно конечно, но можно вставить еще один код в стили CSS. Это даст нам затуманенное состояние кнопок, а если провести курсором по ним, то кнопки оживают.

Как это сделать? Вообще легко, не надо ковыряться нигде, просто копируем код, (на картинке выше под № 6 ) открываем: …/wp-content/themes/Ваша тема/style CSS и в самом низу размещаем код. Сохраняем. Можно проверять!

Теперь Вы знаете все про кнопки социальных сетей для сайта. Установка кнопок социальных сетей дело не такое сложное, скорее познавательное.

Скоро будет ну очень интересная статья — подпишитесь по e-mail, чтобы не пропустить!

На этом всё и до скорого!



Обратите внимание на следующие статьи...

31 Комментарии к статье “Кнопки социальных сетей для сайта
  1. Андрей заходя к Вам на сайт, получаю массу интересной информации. Я пока только мечтаю стать блоггером, поэтому к Вам просьба, побольше постов написать о том как начать и от чего отталкиваться. Заранее спасибо!

  2. Спасибо Татьяна, могу Вас заверить — полезностей будет много, так что готовьтесь :smile:

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

  4. Спасибо Татьяна. На днях куплю микрофон и запишу видеоурок о том как я «взорвал» блог :) Очень полезная информация для начинающих блоггеров, мечтающих поднять посещаемость своего ресурса.

  5. Отлично, Андрей, жду! Посещаемость — это одно из моих многочисленных больных мест! Жду видеоурок , будем взрывать блоги! ➡

  6. Спасибо большое за детальную информацию. Долго искал дизайн кнопки подобного рода. СПСБ :smile:

  7. Андрей, а нельзя ли на блоге или сайте разместить кнопки соц.сетей ведущие на странички автора? Впервые работаю над блогом и ищу такие кнопки... 😳

  8. Если правильно Вас понял: нужны индивидуальные кнопки... Берём кнопку-картинку, прописываем ей URL (путь) к нужной страничке — всё :)

  9. Еще бы рассказали как сделать кнопки соцсетей одинаковыми, как например на news.mail.ru и выпводить только счетчик лайков.

  10. Спасибо, отличная панелька. Прикрутил к своему сайту.

  11. Андрей здравствуйте, если не сложно подскажите пожалуйста по такому вопросу, я установил кнопку Facebook — Мне нравится на сайт, при нажатии на неё появляется всплывающее окно для комментария, а под ним выводится вот такой вот код:

    Можно использовать следующие HTML-теги и атрибуты: <…

    Посмотрел, у вас на сайте в этом поле отображается краткая информация о записи, у каждой записи она своя. Подскажите пожалуйста, как мне оформить это поле так же как у вас, чтобы каждой записи можно было прописать своё краткое описание, и это описание выводилось в поле кнопки Facebook?

  12. Здравствуйте!

    У меня возник такой вопрос (не удается найти в сети внятного на него ответа).

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

    Уровень ТИЦ, траста и т.д. моих групп и страниц в соц. сетях = 0. Не отразятся ли эти ссылки негативно на рейтинг моего сайта?

    Оставить ссылки или убрать... не могу определить... пока ссылки перевел в статические, т.к. после добавления еще 3хсоц. сетей (фейсбук, ЖЖ, одноклассники) уровень траста с 3х упал до 2х. Не уверен, связано ли конкретно с этим, но, как мне кажется, это должно на что-то влиять.

    Что скажете?..

  13. Иван, прямые ссылки с Вашего сайта и тем более с главной страницы, ведущие на те ресурсы, которые имеют показатель = 0 воспринимаются поисковыми системами не очень хорошо... Не проще ли закрыть их в «nofollow» ?

    По поводу «Траста» — просел на одну позицию, видимо сыграл возраст сайта + обилие исходящих...

  14. Андрей, как хорошо, что у меня стоит галочка в графе «следить за комментариями» Иногда мне на почту приходят интересные, нужные вопросы и ответы к ним. Вот например как вопрос, который задал Иван, меня тоже волнует. Особо этим вопросом не занималась, а ответ нашел меня сам. (пришел на почту)Здорово! Пойду ссылки с кнопок закрывать, а то у меня много ресурсов с «0» там висит.

  15. Спасибо за ответ, Андрей. Рад что ответ как и мой вопрос помог Татьяне тоже :smile:

    Я нашел ответ для себя... в noindex + nofollow + прописать в файле robots.txt команду (почти приказ) не посещать роботу эти страницы.

    Дождался вашего ответа, — т.ск. получил подтверждение моей задумки для решения этой проблемы. Буду размышлять над её воплощением.

    В который раз, спасибо!

  16. Иван, вполне достаточно было сделать «nofollow», но так как это отдельная страница с контактами на соцсети — тогда, в принципе можете исключить её из поля видимости поисковых систем, что собственно Вы и делаете.

    Татьяна, не обращайте Вы внимания на нолик, это не главное... Важно, чтобы исходящие ссылки не передавали «вес» другим ресурсам, в nofollow их!

  17. Андрей, а я особо и не обращаю на них внимание. Хотя сейчас поисковики любят, чтобы у сайта были развиты социальные сети. Это небольшой, но плюсик для блога или минус, если «0»

    Что касается веса, то он если и не передается, то все равно уходит в никуда, хоть закрывай в nofollow, хоть не закрывай. Поисковики — хитрюги, играют в свою игру, обходя наши правила.

    Андрей, а я все с дублями воюю :mrgreen: Аж самой смешно, брошу на месяц, два, потом опять к ним возвращаюсь. Вот мешают они мне и все 😆

  18. Татьяна, здесь немного другие правила... Ссылки (открытые) принесут пользу лишь тогда, когда мы ссылаемся на источник тематического содержания, а если стоит штук пять ссылок и указывают на «Говно-сайты» — здесь добра не жди. Уж лучше «вес» отправить в «чёрную дыру», чем передать его г-вну!

  19. По поводу дублей — отправил информацию Вам на почту...

  20. Насчет веса, полностью поддерживаю! Лучше его слить в «не куда» чем «куда попало» Так будет спокойнее как автору блога, так и поисковикам. А они у нас друзья капризные!:roll:

    Информацию прочитала — сижу перевариваю. Спасибо ➡

  21. Андрей, Татьяна, мой отчет таков:

    3 дня назад после добавления мною ссылок на соц. сети с гл. страницы моего сайта без применения тегов no index, no follow мой сайт по трасту скатился с 3х до 2х = ГС... Позиция в поиске по ключевому запросу (по которому я ориентируюсь всегда) стала 69, была 41ой. Вчера убрал ссылки, перевел красивенько их в статику (www.hotel-minsk.by/index/...ykh_setjakh/0-30), убрал 9 ссылок на прочие сайты, оставив только основные, итого из внешних ссылок на сайты с 12 осталось только 3. Результат сегодня по поиску: 55 позиция.

    P.S. Больше никаких действий кроме скрытия ссылок не делал.

    Надеюсь это кому будет полезно 😉

  22. Иван, поздравляю с приобретением жизненного опыта!

    Не стоит обрастать не нужными «прямыми» ссылками, да и к тому же за бесплатно.

  23. Да уж, соцсети тоже хорошо вес и траст «кушают» Отличный отчет, Иван! Для новичков будет наглядным примером — «как быстро и без труда понизить траст сайта!» 😀

  24. Татьяна, согласен!

    Есть ещё варианты — «как скатиться в самый низ поисковой выдачи», или «Блоггинг довёл меня до самоубийства» Блин, спалил такие темы! 😆

  25. Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

  26. Добрый день! А что именно надо изменить в файле share42.js чтобы ссылка была на свою страничку в FACEBOOK и на свою группу ВКОНТАКТЕ? Заранее спасибо. Я новичок в этом деле, точнее даже можно сказать хуже новичка.

  27. Можете уточнить вопрос? в статье нет файла share42.js. Опишите, что вы уже сделали, на каком из этапов возникли трудности. Постараюсь помочь.

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

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