Facebook, Google +1, Twitter, ВКонтакте — как добавить кнопки этих сервисов

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

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

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

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ru">Твитнуть</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ru" data-url="<mt:EntryPermalink/>" data-text="<mt:EntryTitle encode="html"/>">Твитнуть</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Теперь можно добавлять этот код к каждой записи, кнопка появится и будет содержать уникальные данные для каждой записи (адрес записи и её название). Обратите внимание, что здесь для имени записи добавлен атрибут encode_html. Это нужно для того, чтобы не возникало ошибок, если в имени записи будут кавычки. Также для некоторых данных могут понадобиться другие модификаторы, например, encode_url.

Также обратите внимание, что необязательно размещать Javascript-код вызова около каждой кнопки, достаточно разместить его один раз между тегами head.

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

Комментариев: 4

Пример кода целиком не уместился в сообщении. Может, стоит его взять в какой-нить контейнер? А то сообщение прочитал, но в чем разница - сразу не понял :)

Ага, вроде скролл есть, а скопировать непросто. Вот готовый пример, раскрашенный даже:
http://movable-type.ru/uploads/2011/07/twitter.html

>> Пример кода целиком не уместился в сообщении

Надо файл стиля подправить, например, так:

http://www.dmitrijev.ru/2011/06/tegi-code-i-blockquote.php

Спасибо. Когда-то тут было подобное, но со сменой стиля куда-то потерялось. Надо бы унифицировать стили и добавить подобные правила.

Комментировать

Статистика

Последние записи

  • Movable Type 5.2.7

    Состоялся релиз новой версии Movable Type 5.27, основные изменения которого: Новая адаптивная тема «Eiger». Для редакции Pro и Advanced доступен плагин «Smartphone Option», благодаря которому...

  • Автоподстановка тегов в Movable Type

    Не знаю, как для вас, а для меня стало открытием, что в Movable Type работает автоподстановка тегов на кириллице — для этого достаточно ввести первые...

  • Movable Type 5.2.3

    Сегодня состоялся релиз новой версии Movable Type 5.2.3. Изменение всего одно — если в параметрах MySQL было разрешено 20 или менее соединений (max_user_connections), то Movable...

  • Movable Type на PSGI и nginx

    В Movable Type 5.2 появилась встроенная поддержка PSGI. В связке с nginx это даёт значительный прирост производительности — страницы открываются не просто быстро, а невероятно...

  • Патч для Movable Type 4.38, устраняющий проблему безопасности

    В Movable Type версий 4.2 и 4.3 обнаружена уязвимость в скрипте обновления. Вчера разработчики выложили обновлённый скрипт, устраняющий эту проблему. Для устранения уязвимости достаточно загрузить...

Закрыть