Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог

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

Начнем с самого простого и в данный момент рабочего. Помнится раньше популярными были плагины для добавления кнопок социальных закладок, причем там можно было настраивать целые десятки этих сервисов. Признаюсь откровенно, очень сомневаюсь в их эффективности и недавний выход новой версии Digg.com с «закосом» под твиитер, наверное, лишь одного из немногих тому подтверждение. Так вот единственное, что «работало» в моих блогах в плане популяризации контента — кнопочка для ретвитта от сервиса Tweetmeme. Инструмент, по сути, очень простой и действенный.

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

В моем случае получился следующий код:

<script type="text/javascript">
  tweetmeme_style = 'compact';
  tweetmeme_source = 'bankomet';
  tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Здесь в качестве дополнительных параметров указано компактный вывод картинки (если не указывать параметр tweetmeme_style иконка будет стандартная). Кроме того, мы пишем источник  — ваш твиттер аккаунт, а также сервис сокращения ссылок.

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

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

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bankomet">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Можно использовать одну кнопку твиттера, можно совмещать с tweetmeme — как хотите, просто помните, что много разных скриптов на странице не всегда хорошо, а вероятность нажатия обеих кнопок ничтожно мала.

Идем дальше, кнопка номер 3 — Like (мне нравится) от Facebook. Тут у меня осталось парочку вопросов, на которые толковых ответов я, увы, не нашел, но таки заставил эту кнопку работать как надо. Во-первых, для ее добавления в блог можно использовать следующий код:

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

Здесь вы можете менять ширину и высоту блока (450 и 35 в примере), указывать параметр show_faces= true, который добавит аватары пользователей из Facebook. Здесь часть кода:

<?php the_permalink() ?>

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

Там же есть пояснения к разным параметрам и опциями, но на английском. Есть и возможность указания языка локализации для кнопки, т.к. по умолчанию выводится надпись Like. Удивительно, но в приведенном выше коде, ничего подобного нету, а кнопочка отображается с текстом «Мне нравится».

Напоследок было решено поставить в блоге также кнопку социальной сети Вконтакте. Для этого нам пригодится плагин VK Share Button. Штука весьма интересная и полезная разработка — нравится, что с текстом добавляется логотип проекта. Хотя с установкой возникли некоторые сложности.

Итак, во первых, как и все другие плагины мы скачиваем его и заливаем файлы на фтп, после чего активируем в админке. Во-вторых заходим в настройки VK Share Button и указываем необходимые нам параметры. Здесь можно выбрать формат кнопки, ее расположение в теле поста и соответствующих страницах (главная, архивы, категории и т.п.). Для любителей правки шаблонов мы все этих галочки убираем, после чего в файле single.php после поста добавляем код:

<?php
if (class_exists('VKShareButton'))
    $VKShareButton = new VKShareButton();
    echo $VKShareButton->the_button();
?>

Здесь я указал вариант, который у меня работает, но нет гарантии, что у вас тоже получится. Если возникнут ошибки — вперед на страницу разработчика плагина с вопросами. Интересно также то, что кнопку Вконтакте VK Share Button можно добавлять в тело любого поста — допустим, если вы хотите отметить только одну из статей.

Также в настройках, возможно, понадобиться установить в поле «Дополнительный API запрос к сайту» значение «разрешить». Единственная проблема плагина, которая у меня возникла — это невозможность применить к кнопки свой стиль, которая пытается убрать все элементы «по бокам». В настройках есть опция «разрешить использовать свой CSS», но даже при этом не получалось ничего добавить в одну строку с ней. Поэтому пришлось расположить их в столбик, как это показано на самом первом рисунке поста. В принципе, конечно, можно попробовать использовать плагин в более поздних версиях wordpress либо покопаться в коде плагина, но пока до этого не дошел.

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 21, средний балл: 6,14 из 7)

Загрузка...

Категории: Плагины; Сервисы; Хаки и секреты;
Теги: Facebook, ВКонтакте, настройки плагина, правка шаблона, социальные сервисы, социальные сети, социальные функции, твиттер, улучшаем блог.