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

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

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

Статистика

Яндекс.Метрика

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

  • Обновился сайт с плагинами

    Сайт plugins.movabletype.org, долгое время находившийся в полурабочем состоянии, вновь стал рабочим. У каждого плагина появились обнозначения о совместимости со старыми и новыми версиями. Также многие...

  • Где искать плагины для Movable Type

    Давным давно разработчики Movable Type перенесли совместную работу с кодом на Гитхаб. Благодаря этому, а также стандарту именования плагинов, поиск на Гитхабе находит уже 701...

  • Movable Type 5.2.10

    Изменения в новой версии незначительны, только исправления небольшой угрозы безопасности. Скачать новую версию: 5.2.10 в zip-архиве 5.2.10 в tar.gz-архиве Только изменённые файлы (в сравнении с...

  • Основные нововведения в Movable Type 6

    В шестой версии появилось несколько новшеств, которых нет ни в одной другой системе управления контентом, и благодаря которым Movable Type стал ещё лучше. Data API...

  • Movable Type 5.2.9

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

Закрыть