Кнопки "Мне нравится!"

mff · 20.01.2011, 12:45

В общем крутил сегодня на сайте 5 кнопок, решил написать статейку. Может кому пригодится.

facebook.com

http://developers.facebook.com/docs/...e/plugins/like

Тут всё просто, заполняем форму и получаем вот такой код:
Код HTML:
```
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="button_count" show_faces="true" width="450" font="arial"></fb:like>
```
vkontakte.ru

http://vkontakte.ru/developers.php?o=-1&p=Like

Тоже не сложно, нужно авторизоваться, указать в форме "Название сайта" и "Адрес сайта", далее выбрать "Варианты кнопки".
На выходе 2 куска кода:
Это вставляется между тегами <head></head>:
Код HTML:
```
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>

<script type="text/javascript">
  VK.init({apiId: XXXXXXX, onlyWidgets: true});
</script>
```
и этот код в теле документа, на месте вывода кнопки:
Код HTML:
```
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "mini"});
</script>
```
twitter.com

http://twitter.com/goodies/tweetbutton

Тут выбираем из 3-х вариантов кнопки подходящую: "Vertical count", "Horizontal count" или "No count".
Получаем вот такой кусок кода:
Код HTML:
```
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
```

odnoklassniki.ru

http://dev.odnoklassniki.ru/wiki/dis...Social+Plugins

Тут всё не очень хорошо. Нужно вставить между тегами <head></head> код подгрузки стиля и яваскрипта:

Код HTML:

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>

далее код ссылки с фоном там, где вам нужно:

Код HTML:

<a class="odkl-klass-stat" href="Абсолютный адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

Самое ужасное то, что нужно в <body> прописать:

Код HTML:

<body onload="ODKL.init();">

Высота кнопки отличается от кнопок Твиттера и Фэйсбука, что так же не очень хорошо. Вместо "Абсолютный адрес страницы" я так понял нужно прописывать переменную адреса текущей странички вашего движка или я не знаю. В общем у меня не работает она. Они пишут:

Цитата:

Код этой кнопки, в отличии от обычной кнопки «Класс!» модифицировать нельзя, все что находится внутри <a></a> будет заменено.

но что то у меня ничего не заменяет...

mail.ru

http://api.mail.ru/sites/plugins/share/

Хорошо поработали. Делаем нужные изменения в форме, URL отсавляем пустым (кроме отдельных случаев) и получаем код для вставки в нужное нам место:
Код HTML:
```
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" rel="{'type' : 'button', 'width' : '550', 'show_text' : 'true', 'show_faces' : 'true'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
```

Чтобы выстроить кнопки горизонтально можно воспользоваться слоями:

Код HTML:

<div style="float:left; margin-bottom:4px;"></div>
<div style="float:left; margin-bottom:4px;">код кнопки</div>
<div style="float:left; margin-bottom:4px;">код кнопки</div>
<div style="float:left; margin-bottom:4px;">код кнопки</div>
<div style="float:left; margin-bottom:4px;">код кнопки</div>
<div style="clear:both;"></div>

Всем удачи.

EnD1 · 20.01.2011, 20:24

mff, твоя работа?

mff · 21.01.2011, 15:51

EnD1, да, моя статейка.

Вчера сел и всё таки добил одноклассников. В общем дело такое, нужно вместо "Абсолютный адрес страницы" прописать url текущей страницы. Сделал это при помощи php, функция определения текущего url:

PHP код:


			
function currentUrl(){

  $t = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";

  if ($_SERVER["SERVER_PORT"] != "80")

    return $t.$_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];

  else 

    return $t.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

}

потом пишем:

Код HTML:

<a class="odkl-klass-stat" href="<?php echo currentUrl(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

Можно это сделать и при помощи js, кому как удобнее. Для тех, у кого WP пишем:

Код HTML:

<a class="odkl-klass-stat" href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

На выходе рабочие одноклашки:

EnD1 · 21.01.2011, 16:27

mff, молодец, хорошая работа.

mff · 21.01.2011, 23:14

EnD1, спасибо.

mff · 16.02.2011, 04:33

Сегодня заметил, что на зеркале сайт.рф кнопка вКонтакте не работает. Указать в настройках виджета зеркало нельзя.
Сделал следующим образом: добавил в настройках виджета еще один домен и поставил временно затычку:

PHP код:


			
<?php

if($_SERVER["SERVER_NAME"]=="site.ru"){

echo'<script type="text/javascript">

  VK.init({apiId: xxxxxxx1, onlyWidgets: true});

</script>';

}

if($_SERVER["SERVER_NAME"]=="xn--xxxxxxx.xn--p1ai"){

echo'<script type="text/javascript">

  VK.init({apiId: xxxxxxx2, onlyWidgets: true});

</script>';

}

?>

Цифры на разных доменах будут разные, но за то не будет ошибки.

WmSeller · 11.11.2011, 17:43

Как по мне, нет смысла ставить эти кнопки. На SEO показатели они никак не влияют (кроме кнопки от Google +1).

m1zer · 25.03.2012, 12:44

Может кто-то объяснит конкретнее?

likedatjim · 15.04.2012, 11:23

mff, hello))if your good in js pls inform me at http://vk.com/id142452767, thank you))

likedatjim · 15.04.2012, 11:23

WmSeller, hello))if your good in js pls inform me at http://vk.com/id142452767, thank you))