Авг
23
63

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

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

  • 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

    понравился вполне интересное решение для блога! Автору респект

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости