Делаем блок из кнопок "Мне нравится" на блогеПриветствую читателей блога! Наконец-то решил сделать блок из кнопок «Мне нравится«, вернее уже сделал его и в этом посте поделюсь с вами уже готовым вариантом. Давно ещё упоминал о таком блоке, но руки никак не доходили. Задачей было сформировать блок, в котором находятся кнопки типа «Мне нравится» разных социальных сетей, кнопки нужно было выстроить в один ряд. В блок вошли кнопки-счётчики социальных сетей Facebook, ВКонтакте, Mail.Ru, Одноклассники.

Готовый вариант блока:

[css autolinks=»false» collapse=»false» firstline=»1″ gutter=»true» htmlscript=»false» light=»false» padlinenumbers=»false» smarttabs=»true» tabsize=»4″ toolbar=»true»]
<div class="addsoz">
<noindex>Понравился пост? >>
<br />
<br />
<table>
<tbody>
<tr>
<td><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=button_count&show_faces=false&width=140&
action=like&colorscheme=light& height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:21px;" allowTransparency="true"></iframe></td>
<td><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script></td>
<td><a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{‘type’ : ‘button’, ‘width’ : ‘120’}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></td>
<td><a class="odkl-klass-stat" href="" onclick="ODKL.Share(this);return false;" ><span>0</span></a></td>
</tr>
</tbody>
</table>
</noindex>
</div>
[/css]





Блок имеет табличную структуру:

[css autolinks=»false» collapse=»false» firstline=»1″ gutter=»true» htmlscript=»false» light=»false» padlinenumbers=»false» smarttabs=»true» tabsize=»4″ toolbar=»true»]
<table>
<tbody>
<tr>
<td>Кнопка "Мне нравится" от Facebook</td>
<td>Кнопка "Мне нравится" от ВКонтакте</td>
<td>Кнопка "Нравится" от Mail.Ru</td>
<td>Кнопка "Класс!" от Одноклассники</td>
</tr>
</tbody>
</table>
[/css]

Выглядит он так:

Блок из кнопок "Мне нравится"

Если вы добавляли до этого кнопки на свой блог, то сталкивались с тем, что для кнопок ВКонтакте и Одноклассники нужно было вставить отдельный код между тегами <head>…</head>. Если эта операция уже проделана, то выше предоставленный код можно скопировать и вставить в нужное вам место. Единственное, что нужно будет сделать — это подкорректировать ширину блока, т.е. меняя ширину кнопок Facebook и Mail.Ru можно добиться нужной ширины всего блока. Ширина кнопок ВКонтакте и Одноклассники не меняется.

Если же предварительно не добавлялся код, то его нужно добавить. Как это делать, я писал в соответствующих постах:

ВКонтакте – рекламная площадка для блога. Мне нравится!
Одноклассники.ru – рекламная площадка для блога. Класс!
Facebook – рекламная площадка для блога. Мне нравится!

В отличие от блока кнопок добавления в социальные сети у этих несколько недостатков. При нажатии на кнопку запись автоматически публикуется в социальную сеть, при этом нет возможности редактировать вид картинки к анонсу, кроме кнопки-счётчика «Класс!».