Главная » Бизнес в Интернете

Социальные кнопки от Яндекса на блоге, без плагина

кнопки социальных сетейДавно я хотел заменить кнопки социальных сетей на блоге, которые были сделаны с помощью плагина WP-Social Buttons, на другие. Давайте, для начала, поговорим о том, зачем нужны социальные кнопки на сайте, или на блоге вообще.

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

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

Раньше у меня был плагин WP-Social Buttons, который генерировал кнопки социальных сетей. Но мне он не очень нравился по одной причине — кнопки не отображают, сколько раз по ним кликали. Кроме того, нет кнопки социальной сети Одноклассники, и кнопки Google+1. Кнопку от Гугла я поставил отдельно, но она у меня вечно обнулялась.

Плагин WP-Social Buttons генерировал два ряда социальных кнопок. Первый ряд — кнопки для того, чтобы поделиться ссылкой на статью в своем аккаунте социальной сети. Второй ряд — для того, чтобы добавиться в друзья.

социальные кнопки

Для начала я решил посмотреть как новые кнопки социальных сетей от Яндекса будут выглядеть у меня на блоге, и появятся ли они вообще. Итак, чтобы поставить кнопки, я перешел на блок Поделиться от Яндекса, и взял код в закладке Счетчики.

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

После этого я зашел в административную панель блога, в пункт Внешний вид — Редактор,  в шаблон Одиночная запись (single.php), и поставил этот код ниже кода социальных кнопок, который был сгенерирован плагином.

Кнопки оказались слишком малы, и поэтому в параметре data-yashareType я заменил параметр «small» на «large». Результат меня удовлетворил, и я начал писать эту статью, параллельно устанавливая кнопки дальше.

Следующее, что нужно было сделать — это установить данные кнопки по центру. Задача решилась просто — я окружил код тэгом div с выравниванием по центру, вот таким образом:
  • <div align="center"> скопированный код социальных кнопок от Яндекса</div>

Кнопки установились по центру.


Поначалу я хотел оставить второй ряд кнопок от плагина WP-Social Buttons, которые предназначены для добавления в друзья, но кнопки Поделиться никак не хотели устанавливаться над ними. Поэтому я вообще решил убрать плагин, а второй ряд кнопок сделать с помощью простого html-кода.

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

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

В итоге, не найдя ничего интересного с помощью поиска Гугл, я скопировал старые картинки, поставил их в другую папку на хостинге, предварительно уменьшив размер и вес, и сделав их поярче. После этого я заменил URL-адреса картинок в коде, и поставил код добавления в друзья после кода Поделиться.

Оба созданных кода я разместил не только в шаблоне Одиночная запись (single.php), но и в Шаблоне страницы (page.php), чтобы кнопки социальных сетей отображались не только в статьях, но и на страницах блога.

И последнее, что мне нужно было сделать — это деактивировать и удалить плагин WP-Social Buttons.

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


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

6 комментариев »

  • Vasiliy пишет:

    Да, я тоже пользуюсь не плагином, а скриптом... это удобнее и быстрее грузится... Нужно будет ещё и от Яндекса попробовать...

  • Елена пишет:

    Статья очень интересная, воспользуюсь!

  • Валентин пишет:

    Здравствуйте, вписал в код шаблона «Блок социальных кнопок от Яндекса» на свой сайт, но столкнулся с одной неприятностью — размером кнопок, подскажите как увеличить размер иконок социальных сетей?

  • Александр Ризун (автор) пишет:

    Здравствуйте! Можно заменить «small» на «medium» или «large». Других вариантов размеров нет, к сожалению.

  • Влада пишет:

    Добрый день!

    Установила Блок «Поделиться от Яндекса», но столкнулась с такой проблемой. Некоторые материалы состоят из нескольких url адресов. Никак не разберусь в документации где именно и как указывать ссылку (params.link), которой требуется поделиться.

  • Александр Ризун (автор) пишет:

    Добрый день! Пишете в коде params.link="http://ваш адрес". Правда, я не пробовал — не было необходимости, поэтому не знаю, что получится в итоге.

Оставьте свой комментарий и ответный визит Вам обеспечен