ЗАКАЗ

Привязка сайта к социальным сетям часть 2. Посты в Одноклассники, Фэйсбук, ВКонтакте

Социальные кнопки like и share дают пользователям очень удобную возможность поделиться с друзьями по социальной сети понравившимся контентом, ну а владельцу контента популярность и приток посетителей.

Существует несколько способов добавить социальные кнопки на сайт.

1. Стандартные виджеты соц. сетей

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

Стандартная кнопка Класс

Стандартная кнопка Нравится в Фэйсбук

Стандартная кнопка Нравится в ВКонтакте

2. Сторонние разработки. Виджет Pluso

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

3. Кастомные социальные кнопки с использованием RESTful API (он же HTTP GET)

Существует возможность создать индивидуальные социальные кнопки с использованием собственных изображений и подсчитать количество постов.

Пример кастомных социальных кнопок на футере этого сайта, код для шаринга приведен ниже.

FrontEnd

Разместим на странице кнопки (ссылки) шаринга со следующими атрибутами:

//ссылка шаринга в одноклассниках
href='#' class='social_share' data-type='ok' title='Одноклассники'
//ссылка шаринга Facebook
href='#' class='social_share' data-type='fb' title='Facebook'
//ссылка шаринга ВКонтакте
href='#' class='social_share' data-type='vk' title='ВКонтакте'

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

$('.social_share').click(function(){
var dataType = $(this).attr('data-type');
var shareUrl=null;
var shareImg=null;
if($("#shareImg").length==1){
shareImg = 'http://'+location.hostname+$("#shareImg").attr('src');
}else{
shareImg = 'http://'+location.hostname+'/'+$(".imgBlock img").attr('src');
}
switch (dataType){
case 'ok':
shareUrl="https://connect.ok.ru/offer?url="+location.href+"&title="+document.title
+"&description="+$('meta[name=description]').attr("content")
+"&imageUrl="+shareImg;
break;
case 'vk':
shareUrl='http://vk.com/share.php?'
+'url='+ location.href
+'&image='+shareImg
+'&title='+ $('meta[name=description]').attr("content")
+'&noparse=true';
break;
case 'fb':
shareUrl="http://www.facebook.com/sharer.php?s=100"+ '&p[url]='+ location.href;
break;
}
return window.open(shareUrl,'','toolbar=0,status=0,scrollbars=1,width=626,height=436');
});
В качестве изображения используется картинка с хэдера или с id=shareImg, для описания используется тег meta[name=description]. На javascript используются вызовы get api социальных сетей connect.ok.ru/offer, vk.com/share.php, facebook.com/sharer.php

BackEnd

Получить количество лайков на страницу можно на php обращаясь к get api

//для Одноклассников
$okResp = json_decode(file_get_contents("http://connect.ok.ru/dk?st.cmd=extLike&tp=json&ref=http://"
. $_SERVER['HTTP_HOST'].$_SERVER['REDIRECT_URL']), true);
echo $okResp['count'];

//для Фэйсбук
$fbResp = json_decode(file_get_contents("https://graph.facebook.com/?fields=og_object{likes.summary(total_count).limit(0)},share&id=http://
. $_SERVER['HTTP_HOST'].$_SERVER['REDIRECT_URL']), true);
echo $fbResp['share']['share_count'];

//для ВКонтакте
$vkResp = file_get_contents("http://vk.com/share.php?act=count&url=http://".$_SERVER['HTTP_HOST'].$_SERVER['REDIRECT_URL']);
$numSym = strpos($vkResp, ',');
echo substr($vkResp, $numSym+1, strlen($vkResp)-2-$numSym-1);
Для Фэйсбук этот прием будет работать и на клиенте, для Одноклассников и ВКонтакте на javaScript получить количество лайков таким способом не получается.

Протестируем кнопки

Все кнопки на этой странице рабочие. Они должны показывать одинаковое количество лайков. Примерно одинаково должны выглядеть и посты на странице. На деле все не так!!!

Схема теста следующая: поочередно ставлю like стандартной кнопкой, проверяю показания счетчиков и вид поста на странице в профиле. Удаляю пост, проверяю сброс показаний счетчиков. Повторяю действия с Pluso и кастомной социальной кнопкой.

Результаты теста:

  • Пост в Одноклассниках кастомной кнопкой выглядит на много лучше.
    Вид поста в одноклассниках стандартной кнопкой и виджетом Pluso
    Вид поста в одноклассниках кастомной кнопкой
  • Пост любой кнопкой в Facebook получается унылым.
    Facebook не позволяет добавлять кастомные описание, заголовок и изображение для поста.
  • Пост ВКонтакте кастомной кнопкой смотрится более привлекательно.
    Вид поста ВКонтакте стандартной кнопкой и виджетом Pluso
    Вид поста ВКонтакте кастомной кнопкой

Кастомные кнопки не всегда могут добавить желаемое изображение и описание к посту, хотя все делается по документации к api. Пока не понятно почему так происходит.

Итоги подсчета количества лайков, общие замечания:

  • Часто кнопки не изменяют счетчик при удалении поста
  • Кастомные кнопки чувствительны к наличию слэша в uri, стандартная кнопка в одноклассниках чувствительна еще и к якорю
  • Для кастомных кнопок Facebook и VKontakte имеет значение вид протокола, при переходе с http на защищенное соединение в backEnd-скрипте также следует указывать https адрес страницы
  • Бывает, что кнопки обновляют показания счетчиков с задержкой, возможно данные берутся из кэша, который обновляется с задержкой
  • Виджет Pluso прибавляет счетчик даже после отказа разместить пост

Выводы:

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

Количество лайков на страницу зависит от метода их подсчета. Все социальные кнопки показывают некорректную информацию и не учитывают удаленные посты. Часто отсутствует подробная документация о api методах подсчета лайков.

Комментарии: 1Ответы: 0

  • Avatar
    towel
    2018-12-06 05:12:37

    Хорошая статья, полезная. Респект!