Кнопки Like от Vkontakte и Facebook для блога на WordPress без плагинов

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

like_facebook2
Казалось бы — что тут сложного? Можно (как говорят в народе) вальнуть плагин и остается только выбрать место размещения и какие сети отражать, но все дело в том, что гораздо лучше сделать это без сторонних расширений, инструментами тех же социалок. В этой статье мы рассмотрим — как поставить кнопки Like от Vkontakte и Facebook на свой блог самостоятельно без помощи плагинов.

У себя на ресурсе я это уже реализовал, после каждой статьи, кроме кнопочек распространения, Вы можете увидеть и кнопки Like от Вконтакте и Фейсбук (можете даже лайкнуть). Выглядит это дело очень хорошо, компактно и минималистично.

Без долгих преамбул давайте перейдем к реализации. Первую кнопочку мы поставим от социальной сети Vkontakte — настоящий адрес vk.com

Для того, чтобы подключить свой блог, заполняем необходимые данные. Выбираем «Подключить новый сайт», прописываем название сайта и адрес (домен подставится автоматом, если нет — прописываем) и жмем кнопочку «Сохранить» — приложение подключен к Вашему блогу.

Теперь можно поиграть с настройками кнопки. Я выбрал «Кнопка с миниатюрным счетчиком», так как она более приятна и ее легче разместить в один ряд с другими. «Кнопка с текстовым счетчиком» мне не понравилась тем, что сам текст растягивается и трудно ее выровнять в строке, две другие — очень маленькие. Настраиваете высоту и сам надпись на кнопке. Выбирайте то, что Вам больше нравится.

После этого можно встраивать «Мне нравится» в блог. За отображение лайков отвечают два куска кода, первый из которых нужно вставить между тегами <head> </ head>, а второй — в то место, где кнопки должны выводиться.

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

Можем начинать реализацию кнопки. Как я уже говорил — за отображение соответствуют два куска кода. Один нужно вставить между тегами <head> </ head>, а второй в файл, который отвечает за вывод полной версии нашей статьи.

Итак, давайте разберемся с кодом. На изображении я Вам покажу какой код и куда вставлять. Первая часть кода вставляется в файл header.php или index.php, в зависимости от построения Вашей теме. Копируем эту часть.

Идем в Дизан-редактор и выбираем файл header.php (или index.php), ищем закрывающий тег </ head> и перед ним вставляем этот код, сохраняем изменения.

Далее — копируем вторую часть кода.

В редакторе открываем файл single.php и ищем место, где заканчивается вывод текста статьи. Вот туда и вставляем второй код и сохраняем измененный файл.

Все, готово! Кнопочка «Нравится» от Vkontakte у Вас будет отображаться!

Идем дальше — на очереди кнопка Like от Facebook.

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

Когда все готово — жмете «Get Code» и копируете из предложенных вариантов вот этот код себе в Блокнот.

Почему в Блокнот? Я заметил такую ​​вещь — если вставить код без изменений, то лайкатись будет сайт в целом виде, а нам нужны ругательства отдельных постов. Поэтому в блокноте делаем следующие изменения: ищем в коде кусок, который находится между

<iframe src=»//www.facebook.com/plugins/like.php?href=

и

layout=button_count&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21″ scrolling=»no» frameborder=»0″ style=»border:none;

overflow:hidden; width:450px; height:21px;» allowTransparency=»true»></iframe>

 

и заменяем его на

1 <?php echo urlencode(get_permalink($post->ID)); ?>

 

Если же Вы не хотите играть с кодом или боитесь что-то не так сделать, но Вас устраивает внешний вид кнопки Like у меня на блоге, то просто скопируйте вот этот код и все, ничего не меняйте:

<Iframe src = «/ / www.facebook.com/plugins/like.php?href = <? Php echo urlencode (get_permalink ($ post-> ID)); scrolling = «no» frameborder = «0» style = «border: none; overflow: hidden; width: 450px; height: 21px;» allowTransparency = «true»> </ iframe>

Этот код будет «лайкать» отдельные статьи, а не блог в целом — осталось вставить код кнопки в файл single.php

Я повторяться не буду, все делаем по аналогии с кодом кнопки от Vkontakte (без кода в header.php).

Для того, чтобы кнопочки были в одну строку, я сделал простую табличку, которую можете использовать тоже.

<table width=»100%» border=»0.01″ cellspacing=»10″>

<tr>

<td width=»300″ align=»center» valign=»middle»> Vkontakte </ td>

<td width=»300″ align=»center» valign=»middle»> Facebook </ td>

</ tr>

</ table>

Вместо Vkontakte и Facebook вставляете коды кнопок, затем всю табличку в файл single.php и храните изменения.

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

_____________________________________________________________________________

Кстати, сейчас очень просто стало продавать и покупать б/у видеокарты — плагины тоже помогают их продвигать в сети. Нажал рядом с объявлением про б/у видеокарты и уже все друзья и знакомые узнали про то, что такая штука в продаже!