Отборная информация, которая вставляет!

Добавляем кнопки социальных сервисов на wordpress + плагин

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

Поэтому расскажу как добавить к себе на сайт только нужные кнопки. А это: гугл плюс, твиттер, фейсбук, вконтакте. А также расскажу о отличном плагине, который удалсь найти недавно.

В общем, есть 2 способа добавить кнопки — вручную, как сделал это я или плагином. О плагине позже, а о ручном способе расскажу подробней.

Для начала создадим блоки, куда будем ставить эти кнопки. Сделаем их в ряд. Верстка будет такой

<div class="share_block">
      <div class=block_share google_like">  </div>
      <div class=block_share fb_like">  </div>
      <div class=block_share vk_like">  </div>
      <div class=block_share twi_like">  </div>
</div>

И добавим css

.share_block {overflow: auto;}
.share_block .block_share {float: left;margin-right: 3px;}
.share_block .block_share.fb_like {margin-right: 26px;}
.share_block .block_share.vk_like {margin-right: 12px;}

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

Теперь подключаем по одной кнопки, каждую в свой слой (по класам видно куда какую кнопку ставить)

1. Гугл плюс (google +1)

Переходите на ссылку +1. Выбираете нужный размер кнопки, кликаете на «расширенные настройки», отмечаете нужен ли вам счетчик. Далее копируете предложенный код.

Теперь о параметре url — по умолчанию кнопка ставится как для всего сайта, а не для каждой статьи отдельно, поэтому мы добавим туда параметр, который будет показывать нашу страницу

У меня вышло так

<!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
        <g:plusone size="medium" href="<?php the_permalink()?>"></g:plusone>


2. Фейсбук (facebook like)

Идем сюда

Если хотите кнопочку как у меня, то ставим такие настройки

Нажимает «get code» и получаем код. Дадут на выбор 2 варианта. Вариант первый, через iframe немного лучше тем, что кнопка будет переведена на ваш язык.

Иногда, вместо кода вы увидите надпись только проверенные разработчики могут быть добавлены в список разработчиков этого приложения. Добавиться очень просто — проследуйте по ссылке, введите свой телефон, получите смс с кодом, введите код — и все. Если не хотите все это проделывать, просто вставьте код ниже. В нем уже добавлен параметр url (как в случае с гугл +1, что я описывал выше)

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=standard&show_faces
=false&width=130&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe>

3. Вконтакте

Переходим по ссылке, регистрируйте сайт, для этого в выпадающем списке выбирайте «подключить новый сайт» и выбирайте нужный формат кнопки. У меня это «миниатюрная кнопка». Не забывайте, что там код разделен на 2 части, одну вставляйте в секцию

<head></head> 

вторую в нужный блок на сайте.

4. Твитер

Тут все проще простого. Идете по ссылке и там выбираете себе кнопку и вставляете предложенный код к себе.

5. Другие сервисы, вроде ЖЖ, Я.ру и т.д.

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

Плагин добавления бара для социальных кнопок

Я пересмотрел много разных плагинов, но как-то не впечатлил не один, потому что они все однообразные. Но все таки, один плагин как-то запомнился тем, что он предлагает интересный способ показа ссылок — рядом с постом слева в блоке. Выглядит это так

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

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

Ссылка на плагин

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


 

Похожие статьи:



11 комментариев к “Добавляем кнопки социальных сервисов на wordpress + плагин”

  1. А где ссылка на плагин?

  2. Подскажите как прикрутить кнопку «Вконтакте» к ниже указанному плагину, там 2 поля для вставки кода, что туда прописывать?

    • ETNO:

      заходите вконтакте по ссылке что в статье, там увидите на выбор несколько кнопок. Так вот — код для миниатюрной кнопки вставляйте в small button, а «Миниатюрная кнопка, счётчик сверху» — лучше в big button и не забудьте включить enable

  3. Вот зайди я к Вам раньше, не пришлось бы вчера линки социальных кнопок самому из API вычитывать =-)

  4. klient001:

    Здравствуйте!
    Кнопки вставил вручную, все работает кроме фейсбука. Если вставляю код точно такой как у вас, то при просмотре поста пропадают вообще все кнопки кроме гугла и что самое интересное пропадает верхнее меню админки и ссылка «редактировать запись», попробовал заключить в кавычки: «», все отображается и админ панель быстрого доступа тоже, кроме кнопки фейсбука. Использую тему Askit от ElegantThemes. Подскажите пожалуйста в чем может быть проблема?

  5. Не использую кнопок. Это нужно для тех веб-сайтов которые направлены на получения трафика.

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›