Кнопка like

В социальном мире, подключенном к социальным сетям (social network), все большую популярность набирают социальные кнопки стали неотъемлемым атрибутом любого сайта. Однако у любого человека, может возникнуть вопрос, а следят ли за мной? Хорошо или плохо? и как же добавить такую кнопочку к себе на сайт/блог?

У пользователей AdBlock кнопки могут быть скрыты!

Приватность

Большинство кнопок от социальных сетей распространяются путем страивания "чужеродного кода" в страницу, то есть вам предлагается добавить на свой сайт JavaScript файл от поставщика социальной кнопки. Разумеется, загружая такой код, посетитель ресурса оставляет о себе информацию, поскольку процесс загрузки состоялся, то социальная сеть уже знает, на каком ресурсе вы находитесь.

Кнопки

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

ВКонтакте

https://vk.com/share.php?url=

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?98"></script>

<script type="text/javascript">
  API_ID = 1; //код вашего приложения
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full", height: 18});
</script>

Код приложения можно получить тут. А более подробную информацию следует искать в разделе /developers.php.

Facebook

https://www.facebook.com/sharer/sharer.php?u=
YOUR_URL
APP_ID
<iframe src="//www.facebook.com/plugins/like.php?href=YOUR_URL&width=100&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=APP_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

Код приложения можно получить тут. А более подробную информацию следует искать в разделе developers.facebook.

Twitter

http://www.twitter.com/share?url=

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Удобный конструктор кнопок находится тут

Mail.ru

http://connect.mail.ru/share?share_url=

Нравится

<a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '3', 'tp' : 'mm'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>

Больше информации можно найти тут.

Одноклассники

http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=

var URL_TO_SHARE = '';//ссылка на вашу страницу (location.href) <- ссылка на текущую страницу
<script>
!function (d, id, did, st) {
var js = d.createElement("script");
js.src = "http://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertShareWidget(id,did,st);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_shareWidget","URL_TO_SHARE","{width:170,height:30,st:'straight',sz:20,ck:3}");
</script>

Google+

https://plus.google.com/share?url=

<!-- Вставьте этот тег в заголовке страницы или непосредственно перед закрывающим тегом основной части. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>

<!-- Поместите этот тег туда, где должна отображаться кнопка "Поделиться". -->
<div class="g-plus" data-action="share" data-annotation="bubble"></div>

Конструктор от g+ можно найти тут.

Готовые решения

Яндекс.Поделиться

Решение "Поделиться" от Яндекс позволяет значительно сократить количество запросов к сторонним сайтам.

AddThis

Очень популярный зарубежный сервис. Подробная информация тут.

↑ Расскажите друзьям о статье


Comments system Cackle

© EduNow.su — материалы подлежат полному/частичному копированию при указании прямой ссылки на источник. (Сегодня 24.11.17)