Простые и удобные кнопки социальных сетей для WordPress, не используя плагины


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

Зачем выдумывать что-то сложное, какие-то плагины, виджеты и прочее, если опубликовать статью в социальную сеть можно с помощью одной простой ссылки? Именно от этого я и отталкивался.

Сегодня я расскажу вам, как установить простые кнопки социальных сетей Facebook, ВКонтакте и Twitter себе на блог.

Для начала нам, конечно же, нужно найти подходящие иконки этих социальных сетей. Предлагаю те, которые подобрал я:

Или же можете найти другие, например на iconfinder.com или на iconsearch.ru.

Итак, иконки у нас есть, перейдем непосредственно к установке установке кода.

В панели управления WordPress войдите в раздел редактирования шаблона (Внешний вид > Редактор) и выберите файл single.php, который содержит шаблон одной записи и файл index.php, содержащий основной шаблон блога. В эти два файла в нужное нам место вставляем следующий код:

1
2
3
<a href="http://twitter.com/intent/tweet?text=<?php echo wp_get_shortlink(); ?> <?php the_title(); ?>" title="Опубликовать ссылку на статью в Twitter" onclick="window.open(this.href, 'Опубликовать ссылку на статью в Twitter', 'width=500,height=300'); return false"><img src="/img/bg-icon-twitter.png" alt="" /></a>
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink() ?>" title="Опубликовать ссылку на статью в ВКонтакте" onclick="window.open(this.href, 'Опубликовать ссылку на статью в Вконтакте', 'width=500,height=300'); return false"><img src="/img/bg-icon-vkontakte.png" alt="" /></a> 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" title="Опубликовать ссылку на статью в Facebook" onclick="window.open(this.href, 'Опубликовать ссылку на статью в Facebook', 'width=500,height=300'); return false"><img src="/img/bg-icon-facebook.png" alt="" /></a>

Первая строка вставляет кнопку Твиттера, вторая — ВКонтакте, а третья, соответственно, — Фэйсбука. В каждой из строк есть параметры width=500, height=300. Эти параметры определяют соответственно ширину и высоту всплывающего по клику на кнопку окошка.

На месте моих путей типа /img/bg-icon-twitter.png вставляете свои пути к иконкам.

Далее о функциях WordPress, используемых здесь:

  • wp_get_shortlink() — возвращает короткую ссылку на статью в виде http://ваш-сайт.ру/?p=n, где n — id статьи. Используем это в Твиттер-кнопке, т.к. Твиттер нас «слегка» ограничивает по количеству символов.
  • the_title() — возвращает заголовок статьи.
  • the_permalink() — возвращает полную ссылку на статью.

Вот и всё, как видите, всё просто и без лишних заморочек, плагинов и виджетов. Если что не понятно — спрашивайте в комментариях. Посмотреть как всё работает можно на моем же блоге в самом верху статьи.

И не забывайте подписываться на новые статьи, впереди еще много чего интересного. До встречи!

  • Может стоит объединить все выбранные кнопки в div блок и указать точное место вставки кода в index.php и single.php, а то далеко не все хорошо разбираются в php…

  • Виталий, точное место я указать никак не могу, т.к. шаблоны у всех разные.

  • Не только блогам нужны кнопки.
    Интернет-магазины тоже начали активно «социализироваться».
    Спасибо за статью!

  • Спасибо за статью. Попробую реализовать у себя.

  • Очень грамотно, красиво, во внешнем окне вообще класно.

  • Сделал у себя на сайте — красота и движок не грузит! Спасибо автору!)

  • кнопки можно использовать не только на wordpress. Они используются на любом движке.

  • А для гугл+ и одноклассников какие ссылки для share, не знаете?

  • Как войти в панель управления WordPress и дальше шаблон — внешний вид-редактор…