Привязка сайта к социальным сетям часть 2. Посты в Одноклассники, Фэйсбук, ВКонтакте
Опубликовано: 2018-07-25
Обновлено: 2018-09-01
Социальные кнопки like и share дают пользователям очень удобную возможность поделиться с друзьями по социальной сети понравившимся контентом, ну а владельцу контента популярность и приток посетителей.
Существует несколько способов добавить социальные кнопки на сайт.
1. Стандартные виджеты соц. сетей
Одноклассники, Фэйсбук и ВКонтакте предоставляют разработчикам уже готовый виджет, нуждающийся в минимальном количестве настроек.
Стандартная кнопка Класс
Стандартная кнопка Нравится в Фэйсбук
Стандартная кнопка Нравится в ВКонтакте
2. Сторонние разработки. Виджет Pluso
Опции конструкторов позволяют вносить только минимум изменений в настройки социальных кнопок. При использовании стандартных социальных кнопок и социальных кнопок сторонних разработчиков их внешний вид и поведение будет вне нашего контроля.
VK API WALL.POST Отправляем запись в группу методом post
3. Кастомные социальные кнопки с использованием RESTful API (он же HTTP GET)
Существует возможность создать индивидуальные социальные кнопки с использованием собственных изображений и подсчитать количество постов.
Пример кастомных социальных кнопок на футере этого сайта, код для шаринга приведен ниже.
FrontEnd
Разместим на странице кнопки (ссылки) шаринга со следующими атрибутами:
//ссылка шаринга в одноклассниках
href=’#’ data-type=’ok’ title=’Одноклассники’
//ссылка шаринга Facebook
href=’#’ data-type=’fb’ title=’Facebook’
//ссылка шаринга ВКонтакте
href=’#’ 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+»description=»+$(‘meta[name=description]’).attr(«content»)
+»)
+’
break;
case ‘fb’:
shareUrl=»http://www.facebook.com/sharer.php?s=100″+ ‘
break;
>
return window.open(shareUrl,»,’toolbar=0,status=0,scrollbars=1,width=626,height=436′);
>);
В качестве изображения используется картинка с хэдера или с для описания используется тег meta[name=description]. На javascript используются вызовы get api социальных сетей connect.ok.ru/offer, vk.com/share.php, facebook.com/sharer.php
vk api с помощью библиотеки requests
BackEnd
Получить количество лайков на страницу можно на php обращаясь к get api
//для ВКонтакте
$vkResp = file_get_contents(«http://vk.com/share.php?act=count.$_SERVER[‘HTTP_HOST’].$_SERVER[‘REDIRECT_URL’]);
$numSym = strpos($vkResp, ‘,’);
echo substr($vkResp, $numSym+1, strlen($vkResp)-2-$numSym-1);
Для Фэйсбук этот прием будет работать и на клиенте, для Одноклассников и ВКонтакте на javaScript получить количество лайков таким способом не получается.
Протестируем кнопки
Все кнопки на этой странице рабочие. Они должны показывать одинаковое количество лайков. Примерно одинаково должны выглядеть и посты на странице. На деле все не так.
-
Пост в Одноклассниках кастомной кнопкой выглядит на много лучше.
Вид поста в одноклассниках стандартной кнопкой и виджетом Pluso
Вид поста в одноклассниках кастомной кнопкой
Facebook не позволяет добавлять кастомные описание, заголовок и изображение для поста.
Вид поста ВКонтакте стандартной кнопкой и виджетом Pluso
Вид поста ВКонтакте кастомной кнопкой
Кастомные кнопки не всегда могут добавить желаемое изображение и описание к посту, хотя все делается по документации к api. Пока не понятно почему так происходит.
- Часто кнопки не изменяют счетчик при удалении поста
- Кастомные кнопки чувствительны к наличию слэша в uri, стандартная кнопка в одноклассниках чувствительна еще и к якорю
- Для кастомных кнопок Facebook и VKontakte имеет значение вид протокола, при переходе с http на защищенное соединение в backEnd-скрипте также следует указывать https адрес страницы
- Бывает, что кнопки обновляют показания счетчиков с задержкой, возможно данные берутся из кэша, который обновляется с задержкой
- Виджет Pluso прибавляет счетчик даже после отказа разместить пост
Выводы:
Предпочтительно использовать кастомные социальные кнопки так как они позволяют делать красивые посты, можно по своему усмотрению изменять внешний вид и поведение кнопок.
Количество лайков на страницу зависит от метода их подсчета. Все социальные кнопки показывают некорректную информацию и не учитывают удаленные посты. Часто отсутствует подробная документация о api методах подсчета лайков.
towel
+0 
-0
Источник: rightjoint.ru
Работа с Api Вконтакте
Хочу обратиться ко всем гуру, которые на ТЫ с Api Вконтакте.
На одном из проектов реализовали репостинг топиков на стену в группе.
Сейчас встала задача дать возможность пользователям сайта авторизованным Вконтакте лайкать посты в группе прямо с сайта. Такая возможность в апи есть:
Like(array( type: ‘post’, owner_id: -70092613, item_id: 37 )); function Like($aParams) < $sParams = http_build_query($mParams); return json_decode(file_get_contents( «https://api.vk.com/method/likes.add?$sParams )); >
В результате выполнения данного кода лайк ставится, но от имени того кто получил этот access_token.
Токен был получен путем перехода по ссылке вида
http://api.vk.com/oauth/authorize?client_id=redirect_uri=http://api.vk.com/blank.htmlКак получить для каждого пользователя свой токен?»
Пробовал получать токен путем авторизации описанной здесь, но вылетала ошибка, что токен должен быть получен через переадресацию на страницу oauth.vk.com/blank.html.
Возможно я что-то делаю не так…
Источник: livestreet.ru
Как установить кнопку «Мне нравится» от Вконтакте на сайт
Все большую и большую популярность приобретают кнопки «Мне нравится» от социальных сетей Facebook и ВКонтакте. Благодаря тому, что активные пользователи сетей жмут на эти кнопочки, увеличивается трафик сайта, приток посетителей.
Поставить кнопку «Мне нравится» от соцсети ВКонтакте.ру очень просто. Заходим на эту страничку. Разумеется, нужно быть залогиненным на сайте ВК.ру. Необходимо заполнить очень простую форму. В первой позиции нужно указать название и адрес сайта.
Затем выбрать тематику сайта. Далее выбираем внешний вид кнопки — образец показывается непосредственно под формой — и ее название («Мне нравится» или «Это интересно»). Нажимаем «Сохранить».
А теперь по частям копируем код для вставки на сайт. Код разделен на три части. Верхнюю часть кода необходимо установить между тегами <head>…</head> страницы вашего сайта.
of your page —> VK.init(< apiId: 1111111, onlyWidgets: true >);
Семь единиц красного цвета необходимо заменить на api id вашего сайта. В блоге WordPress его нужно установить в файл index.php той темы, которую вы используете.
Вторую часть кода необходимо установить в том месте, где вы хотите видеть кнопку «Мне нравится». На моем блоге она установлена в виджете под названием «Визитка». Этот вариант кнопки называется «кнопка с миниатюрным счетчиком». Код отличается для каждого сайта и типа кнопки.
VK.Widgets.Like(«vk_like», );
Если вы хотите установить более одной кнопки на странице, элемент vk_like должен иметь уникальное обозначение для каждого кода. Например, в одном месте оставляете vk_like, а в другом называете его vk_like1.
Ниже я установила кнопку с текстовым счетчиком. Если вам понравился пост и вы из него что-то для себя почерпнули, не забудьте нажать кнопку «Мне нравится»
(Продолжение следует… В следующем посте пойдет рассказ о том, как установить кнопку «Мне нравится» от Facebook…)
Источник: aryona.ru