Социальные кнопки 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-страницы:
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');
});
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);
Протестируем кнопки
Все кнопки на этой странице рабочие. Они должны показывать одинаковое количество лайков. Примерно одинаково должны выглядеть и посты на странице. На деле все не так!!!
Схема теста следующая: поочередно ставлю like стандартной кнопкой, проверяю показания счетчиков и вид поста на странице в профиле. Удаляю пост, проверяю сброс показаний счетчиков. Повторяю действия с Pluso и кастомной социальной кнопкой.
Результаты теста:
- Пост в Одноклассниках кастомной кнопкой выглядит на много лучше.
Вид поста в одноклассниках стандартной кнопкой и виджетом Pluso
Вид поста в одноклассниках кастомной кнопкой
- Пост любой кнопкой в Facebook получается унылым.
Facebook не позволяет добавлять кастомные описание, заголовок и изображение для поста.
- Пост ВКонтакте кастомной кнопкой смотрится более привлекательно.
Вид поста ВКонтакте стандартной кнопкой и виджетом Pluso
Вид поста ВКонтакте кастомной кнопкой
Кастомные кнопки не всегда могут добавить желаемое изображение и описание к посту, хотя все делается по документации к api. Пока не понятно почему так происходит.
Итоги подсчета количества лайков, общие замечания:
- Часто кнопки не изменяют счетчик при удалении поста
- Кастомные кнопки чувствительны к наличию слэша в uri, стандартная кнопка в одноклассниках чувствительна еще и к якорю
- Для кастомных кнопок Facebook и VKontakte имеет значение вид протокола, при переходе с http на защищенное соединение в backEnd-скрипте также следует указывать https адрес страницы
- Бывает, что кнопки обновляют показания счетчиков с задержкой, возможно данные берутся из кэша, который обновляется с задержкой
- Виджет Pluso прибавляет счетчик даже после отказа разместить пост
Выводы:
Предпочтительно использовать кастомные социальные кнопки так как они позволяют делать красивые посты, можно по своему усмотрению изменять внешний вид и поведение кнопок.
Количество лайков на страницу зависит от метода их подсчета. Все социальные кнопки показывают некорректную информацию и не учитывают удаленные посты. Часто отсутствует подробная документация о api методах подсчета лайков.
Авторизуйтесь для написания коммента
Хорошая статья, полезная. Респект!