Авг

Добавление кнопки Вконтакте, 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 Далее →

bekass 08.09.2011
На моем блоге вообще хорошо смотрится
Артем Зыков 18.10.2011
Сейчас будем пробовать. Посмотрим, что получиться.
Eduard 22.10.2011
Спасибо, но как сделать на темном фоне кнопку от вконтакте? Вопрос касается конечно с закругленной формой кнопки «нравится».
Tod 23.10.2011
Eduard, нужно посмотреть в коде кнопки, может там есть возможность задавать фон, я точно не помню. Если такого нету, то вероятно как-то через css сделать тот эффект, что вам нужен.
Igor 25.10.2011
Завел блог, но вот не пойму куда вставлять эти коды, в этом совсем ноль.
Подскажите плиз. Спасибо.
Tod 26.10.2011
Igor, эти коды ставятся в файл шаблона единичной записи single.php. Если же вы только-только завели блог, то правка шаблона может быть для вас сложной — советую поискать плагины для добавления социальных кнопок, так будет проще.
Alexandr 10.11.2011
Ребят, я вот публикую и при публикации, в месте где должна быть картинка, там изображение Gravatar-a. Как ее убрать ? И заменить на изображение которое должно быть в посте.
Tod 11.11.2011
Alexandr, нужно открывать файлы шаблона и смотреть как именно выводятся картинки, возможно, там какая-то ошибка, в блоге была статья про картинки — превью для постов в wordpress.
Катерина 29.11.2011
Такие кнопки должны быть у всех, имхо. уж слишком полезные
Sergey 20.02.2012
Огромное спасибо, наконец то, что нужно, облазил добрый десяток сайтов, пока нашел!
Olegushka 26.02.2012
добрый день, не могу понять а что собственно происходит после добавления этих трех кнопок. Нажал я на вконтакте — мне нравится, произошел переход на новое окно в контакте, а уменя ничего на стене не отобразилось… Я так понял, тут смысл в том, что я просто тупо голосую за статью, а мой голос учитывается у вас на сайте, да? Или он автоматически идет к Вам на страницу в контакте, т.е. нужно сперва статью опубликовать в контакте потом она генерируется в блог а там отображается рейтинг на статью в контакте или же это рейтинг статьи на блоге в кнопки дают просто дополнительные лайки благодаря имению страниц в соц. сетях???? Пожалуйста объясните для тупых как я
Tod 26.02.2012
Olegushka, при клике на кнопку «Мне нравится» в начале поста открывается новое окно с возможностью публикации поста на вашей стене.
Лариса 09.04.2012
Твитнуть и добавить в Твиттер — объясните разницу — я из деревни. И потом. почему я должна твитнуть то, чего пока не читала? Вы уверены. что. прочтя статью. я опять полезу наверх ради того, чтобы ее твитнуть? Коммент без подвоха — просто. действительно не понимаю. И еще — кнопки Твиттер, которые устанавливают в сайдбаре — это для того, чтобы стать читателем админа в Твиттере? Господи, кто все это придумал?
Tod 09.04.2012
Лариса, твитнуть и добавить в твиттер — одно и то же. Если кнопка в статье, то в твиттер пойдет анонс статьи, если в сайдбаре, то скорее всего она настроена на то чтобы посетитель поделился ссылкой на блог целиком. Что касается расположения — у меня и сверху и снизу, теоретически я согласен, что пользователь, по идее, должен почитать статью, а потом уже поделиться ею. Но у меня лично немного по другому, я по первым абзацам определяю полезна мне информация или нет и, если что, сразу делюсь. Кроме того, как правило, статьи у меня немаленькие, техничные, дочитать до конца не каждому под силу — а тут бац заголовок «Добавление кнопки Вконтакте…» — почему бы не поделиться сразу.
Лариса 10.04.2012
Вчера нашла статью о Твиттере ( новый интерфейс) — вот, думаю, то, что надо! А там два предложения и огромный скриншот — все. Но сразу этого не видно. Вот бы поделилась.
Все понятно. я уже и сама разобралась. Единственно. не могу найти — плагин Topsy Retweet Button выводит твитты публикуемых постов в ленту. чтобы самой не делать? Все пишут — не могу найти кнопку. Ну и бог с ней, с кнопкой. А вот выводит или нет?
И что нужно поставить на блоге. чтобы наловить себе читателей? Или это делается только в Твиттере?
Короче. я Вас замучила — простите блондинку.
Tod 11.04.2012
Лариса, про твиттер наверное проще всего в википедии почитать что и как) По плагинам — есть много разных, которые выводят сообщения, но я с ними не сталкивался, это нужно смотреть-искаать. По поводу привлечения через блог — можно разместить в боковой колонке иконку твиттера и ссылку на него с призывом подписываться или же после поста. Это самый простой вариант.
DrLudo 20.04.2012
Будем разбираться, спс за пост
Юрй 17.08.2012
Подскажите, как разместить их в такую табличку в рамке, как например у вас в блоге?
Потому, что они так некрасиво стали =(
Tod 19.08.2012
Юрй, это все стили оформления CSS — можете посмотреть код этой страницы узнать какой class соответствует блоку с социальными кнопками и опять же посмотреть css код страницы. Для простоты можно сохранить страницу с постом на локальный компьютер и изучать стили.
Анастасия 19.10.2012
У меня кнопка лайк от facebook не видна, все остальные соцсети видно, а вот фб нет. Вставляю код скрипта на страницу или в запись напрямую. Естественно, в хтмл-редакторе. Может, кнопки от фб на куда-то в другое место добавлять?
Стоит плагин ShareButtons, но там нет функции комментировать из аккаунтов соцсетей.
Tod 22.10.2012
Анастасия, все коды кнопок нужно добавлять исключительно в шаблон (не в текст статей, пусть даже в html режиме). Заходите в файл шаблона single.php где после функции вывода статьи the_content добавляете соответствующие социальные кнопки.
Екатерина 03.12.2012
Добрый день!
У меня приключилась проблема с кнопкой facebook.
Если на нее нажимаю, чтобы сделать пост, у меня весь русский текст выдает каракулями. Помогите, пожалуйста. Не знаю как решить эту проблему.
Tod 03.12.2012
Екатерина, да, вижу. Определенно это проблема кодировки какая-то. Я бы скачал шаблон отображения постов single.php, загрузил бы его в редактор Notepad++ (бесплатный), где бы потом принудительно для файла выбрал кодировку «UTF-8 (без BOM)». Есть вероятность, что этот файл шаблона сохранен не в utf-8 и поэтому такая ошибка. Также, я бы еще раз попробовал «создать код» вставки кнопки facebook с сайта социальной сети — может там можно выбирать кодировку (уже не помню).
Екатерина 03.12.2012
Я все это пробовала делать, к сожалению ничего не помогло, и что самое интересное, это стало буквально несколько дней назад. Какие то посты нормально отображаются, а какие-то криво. Вообще не знаю как быть. Причем переустановила тему, и все равно осталась проблема, как-будто проблема не в файлах темы, а где-то глубже. Ощущение, что facebook забирает пост с другой кодировкой. А как быть не знаю .
Роман 21.01.2013
Установил кнопку фейсбука на свой блог. Все красиво поправил и шикарно вышло. советую всем ставить данные кнопки соц сетей. Зачетно описано все
vkontakte 28.01.2013
большой спасибо!!!
hodda 19.07.2013
Спасибо. Но думаю через плагин было бы все-равно удобнее!
Ирина 01.12.2013
Единственная статья, которая помогла мне решить задачу с кнопкой ВКонтакте! Мне нужно было, чтобы после нажатия появлялось окошко для написания комментария! Все четко работает. Но заметила, что счетчик не работает у кнопки:( Т.е. при нажатии он дает значение 1, а при обновлении страницы или при новом заходе, счетчик пуст:( Что делать?
Tod 03.12.2013
Ирина, возможно это из-за кэширования — значение учитывается, но вы видите сохраненную в кэше страницы. Попробуйте обновить страницу через Ctrl + F5 или почистить кэш плагина (если установлен).
Ирина 03.12.2013
Через Ctrl + F5 результат тот же:( А как почистить кэш плагина, он установлен.