Авг

Добавление кнопки Вконтакте, 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, недорогие и качественные камины.
Для поддержания тела в нормальный форме можете купить спортивные тренажеры для регулярных занятий спортом дома.

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

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

Загрузка...

Категории: Плагины; Сервисы; Хаки и секреты;

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

комментария 63 к статье “Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог”

1 2 3 Далее →

Nagano 23.08.2010
Полезный плагин, добавлю в свою коллекцию
Tod 23.08.2010
Nagano, очень рад помочь. П.С. Я хоть и слушаю Ноггано, но добавлять ссылки в подписи комментариев нужно на свои персональные блоги — учти это, пожалуйста, в следующий раз:)
seonaptic 26.08.2010
Ну код можно и в шаблон вставить, вот если бы плагин сделали.
Tod 26.08.2010
seonaptic, странно, что никто не сделал совместный плагин со всеми кнопками добавления, приходится так слегка извращаться.
Toad 31.08.2010
Прикольная штука. На днях наверное и поставлю себе такую же насыпку из кнопочек =)
Igor 10.09.2010
+1. И я попробую!
Working 13.09.2010
Очень интересная штука! Надо испробовать!
Alla (Blogi Mam) 16.09.2010
Спасибо за статью, как раз не хватало информации про кнопку «Вконтакте». Кнопку Like установила буквально пару дней назад, но у нас она так и осталась на англ и как изменить на «Мне нравится» непонятно((
SEOMixer 28.09.2010
Очень полезный урок. Спасибо, огромное. А не могли бы подсказать, как мне в WordPress видео из контакта вставить и у себя в блоге разместить? Что-то ничего не получается :(
Tod 28.09.2010
SEOMixer, если вконтакт предоставляет код вставки видел как и YouTube, то ничего сложно в этом не должно возникнуть, добавляешь видео в режиме редактирования HTML.
Avleriya 14.10.2010
Спасибо за статью. Полезно!

Да, вконтакте зайдя в видео есть «Получить код видео».
ADv 17.10.2010
не выяснилось, как расположить кнопки в одну строку? убого смотрится, когда все в столбце… :(
INtim 29.11.2010
Этот плагин добавляет все нужные кнопки для соц сетей:
http://artlosk.com/2010/10/social-share-buttons/
Strikestar 05.12.2010
А можно как нибудь у кнопки твиттера (официальной) сменить цвет? Или только синюю можно вставлять, а то хочется официальной пользоваться, а она по дизайну не подходит..
Hush 21.12.2010
А как с кнопкой для ЖЖ ?
Tod 22.12.2010
Hush, про жж и более подробно можно почитать в посте кнопки добавления в Livejournal, Mail.ru и другие социальные сети.
Hush 22.12.2010
Сэнкс))
Goodman 27.03.2011
Здравствуйте, Tod!
Если позволите несколько вопросов:
1. Почему у Вас в блоке социальных кнопок в начале поста, кнопка от Вконтакте «Понравилось», а не «Мне нравится», ведь последнюю сейчас легко можно встроить в одну строчку с остальными?
2. Пересмотрел документацию Вконтакте и не нашёл там кнопки-виджета «Понравилось», откуда она у Вас, и ещё с такими закруглёнными краями?
3. Подскажите, пожалуйста, если в тело поста можно с лёгкостью вставить эти кнопки, то как их можно вывести на главную (категории, теги), чтобы выводились под каждой записью (как на bigpicture.ru в одной строке с рейтингом постов).
Заранее благодарю за ответы.
romcha 28.03.2011
Спасибо!!! Как раз то, что доктор прописал!!! =))
denis 03.05.2011
Привет!

Воспользовался плагином vk shared button все работает отлично, только вот краткое описание поста не публикуется вконтакте… дается только название поста и ссылка на него.

что необходимо сделать, чтобы описание поста тоже публиковалось??

С уважением, Денис.
Вячеслав 08.05.2011
Класс! Все понятно и доступно. Спасибо за инфу. С уважением, Вячеслав.
Василий 21.05.2011
Спасибо! Все детально и конкретнро. что и нужно для начинающих и не только.
Вадим 12.07.2011
Поставил себе кнопку facebook, но что-то она лайки не засчитывает и не отображает количество людей, которым это понравилось. Как быть?
Руслан 18.07.2011
А можете поделиться кодом кнопок «мне нравится» от фейсбук и вконтакте, и кнопки «твитнуть», где они у вас сверху перед постом в одну строчку расположены. Я имею в виду полный код, как они в таблицу вписаны.
Tod 18.07.2011
Вадим, наверное допущена какая-то ошибка в установке кнопки, второй (более достоверный вариант) — код кнопки обновился, нужно поискать на сайте Facebook кнопку и сгенерировать новый код.
Руслан, если хотите узнать как установлено у меня посмотрите код страницы в HTML — единственное чего нету в этой статье это DIV вокруг кнопок + стили можно глянуть в style.css, который также доступен.
Даня 19.07.2011
Здравствуйте.

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

Судя по тому, как у Вас отображаются эти кнопочки наверху, решение Вы нашли. Не поделитесь?) Был бы очень благодарен)

«Понравился пост? Подпишись на обновления блога по…»

И этот кусочек кода с подпиской RSS, на почту и твиттер был бы рад от Вас увидеть) Красиво выглядит, хотел бы посмотреть такой на своем бложике) Ну а если нет, так нет))
Даня 19.07.2011
Вопрос про «одну строку» отпадает — увидел в комментарии выше)
Пы.Сы. я просто первым делом попробовал сделать такой же трюк, но про css не подумал и в итоге ничего не вышло ;]
Tod 19.07.2011
Даня, там где про подписку на РСС код можно взять из статьи про записи и посты wordpress. По поводу кнопок — стили оформления можно подсмотреть если сохранить эту страницу на локальный компьютер и глянуть код.
Даня 19.07.2011
Спасибо, посмотрю сейчас) А с кнопочками разобрался вчера, посмотрел Ваш CSS)
Давно уже искал решение этих «кнопок в одну строку», большое спасибо Вам)
Диман 07.08.2011
понравился вполне интересное решение для блога! Автору респект