Vk share php description

Элементарные социальные share-кнопки

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

HTML

Share = < vkontakte: function(purl, ptitle, pimg, text) < url = 'http://vkontakte.ru/share.php?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&image=' + encodeURIComponent(pimg); url += '&noparse=true'; Share.popup(url); >, odnoklassniki: function(purl, text) < url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'; url += '&st.comments=' + encodeURIComponent(text); url += '&st._surl=' + encodeURIComponent(purl); Share.popup(url); >, facebook: function(purl, ptitle, pimg, text) < url = 'http://www.facebook.com/sharer.php?s=100'; url += '&p[title]=' + encodeURIComponent(ptitle); url += '&p[summary]=' + encodeURIComponent(text); url += '&p[url]=' + encodeURIComponent(purl); url += '&p[images][0]=' + encodeURIComponent(pimg); Share.popup(url); >, twitter: function(purl, ptitle) < url = 'http://twitter.com/share?'; url += 'text=' + encodeURIComponent(ptitle); url += '&url=' + encodeURIComponent(purl); url += '&counturl=' + encodeURIComponent(purl); Share.popup(url); >, mailru: function(purl, ptitle, pimg, text) < url = 'http://connect.mail.ru/share?'; url += 'url=' + encodeURIComponent(purl); url += '&title=' + encodeURIComponent(ptitle); url += '&description=' + encodeURIComponent(text); url += '&imageurl=' + encodeURIComponent(pimg); Share.popup(url) >, popup: function(url) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); >>; 

Счетчик шаринга

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

Но у меня стояла другая задача, надо было отследить статистику нажатий именно на кнопку шаринга размещенную непосредственно на расшариваемой странице. Далеко не уходя от способа шаринга представленного выше, эта задача была решена табличкой в БД, еще одним параметром функции и простым ajax’ом:

 popup: function(url,soc) < window.open(url,'','toolbar=0,status=0,width=626,height=436'); $.post('/social/share', , function (data)<>); > 

В моем случае принимающий скрипт достает с URL айдишник записи, заносит в табличку запись и/или увеличивает счетчик на 1 для конкретной социальной сети.

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

Источник

1000 и 1 репост: гайд по кнопке «поделиться» в русских соц сетях

Недавно передо мной встала задача — провести на нашем сайте «народное голосование» за номинантов на премию в нашей отрасли (франчайзинг). В рамках народного голосования человек размещал на своей странице в социальной сети пост, рассказывающий о том, за кого именно он проголосовал. Чтобы реализовать эту задачу, мне пришлось перелопатить массу информацию о том, как именно устроен шаринг в различных соцсетях, и как лучше размещать эти самые посты. Кроме того, была создана система подсчета количества размещенных репостов.

К сожалению, большая часть информации на эту тему, которую можно найти на хабре или stackoverflow — уже устарела, поэтому я постарался превратить этот в пост в актуальный мега-гайд по шерингу страниц в соц сетях. Я рассмотрел 5 наиболее популярных в России социальных сетей: контакт, facebook, твиттер, одноклассники и мой мир. Для каждой социальной сети приведен актуальный URL для шаринга, небольшие советы и рекомендации по использованию, а также JS код, позволяющий узнать количество шеров конкретного URL в каждой из соц. сетей.

В конце статьи есть сводная таблица со всеми ссылками и кратким описанием возможностей каждой из сетей.

PHP скрипт

Написал скрипт-генератор ссылок для шаринга, а также для получения данных о количестве шеров.
Качать тут:
github.com/iskander-g/socialhelper

Вконтакте

Самая популярная в России социальная сеть, имеет также и самую богатую функциональность для шеринга, но есть и досадный баг.

URL для того, чтобы поделиться ссылкой в этой соц. сети имеет следующий вид:

http://vk.com/share.php?url=&title=&description=&image=&noparse=true 

• url: адрес страницы, которой вы делитесь
• title: заголовок поста
• description: описание ссылки
• image: ссылка на изображение
• noparse: укажите true, если вам не нужно, чтобы контакт парсил метатеги со страницы, а взял информацию из переданных параметров

Tips&Tricks:

Вы можете добавлять в конец заголовка (title) свои хештеги, и если при шаринге пользователь не введет описание — то они попадут в пост пользователя.

Баги:

У контакта был обнаружен только один, но очень критичный баг: если по вашей ссылке переходит пользователь, не авторизованный в контакте, то ему будет предложено залогиниться и потом он получит белую страницу с надписью «too long to param». Единственный вариант решения этой проблемы — не передавать описание и т.д., и ограничиться только ссылкой. Ну или просто забить, как мы поступили мы. Это не помешало на данный момент собрать более 900 репостов нашей премии вконтакте.

Получение количества шеров:

Получение количество шеров вконтакте основано на том, что вы добавляете себе на страницу тег script со следующим адресом:

var index = "1"; // если вы хотите на одной странице получить шеры для нескольких ссылок - у каждой должен быть свой уникальный индекс. // индекс - обязательно целое число. var url = "http://example.com"; $("body").append(""); 

Этот скрипт вызовет метод VK.Share.count(index, count). Соответственно, вам необходимо опеределить его в глобальной области видимости, например так:

var VK = <>; VK.Share = <>; VK.Share.count = function(index, count)

Facebook

Вторая по популярности социальная сеть в России имеет довольно урезанный инструментарий для шаринга ссылок.

URL для того, чтобы поделиться ссылкой в facebook, имеет вид:

https://www.facebook.com/sharer/sharer.php?u=&picture=

• og:title — заголовок ссылки
• og:description — описание ссылки
• og:image — изображение для шаринга

Tips & Tricks

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

Это удалось реализовать, создав «технические» страницы для каждого номинанта с нужными мета-тегами, которые успешно скачивались и парсились фейсбуком, но при заходе на эту страницу обычного пользователя — он автоматически редиректился на страницу номинации (для этого использовался мета-тег refresh и дублирующий яваскрипт на всякий случай).

Баги

http://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D= 

НО! Эта ссылка не работает с мобильной версией фейсбука. Необходимо использовать просто sharer/sharer.php?u=

Подсчет количества шеров Facebook

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

Он выглядит следующим образом:

$.get("https://graph.facebook.com/" + url, <>, function(data) < console.log(data.share.share_count); >, 'json'); 

Также по этой ссылке можно прочитать OG-параметры, которые хранит фейсбук, и некоторые другие свойства урла.

Twitter

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

URL для твиттера выглядит следующим образом:

https://twitter.com/share?url=&text=&hashtags=&via=

• url — собственно ссылка
• text — текст размещаемого твита
• hashtags — хештеги, без решетки и через запятую, например «habr, хабр»
• via — ваш основной аккаунт, будет добавлен в конец твита как «via @AccountName»

Подсчет количества твитов

Подсчет количества шеров конкретного урла в твиттере методами самой соц сети невозможен.
twitter.com/twitterdev/status/667836799897591808

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

По своей сути шаринг в одноклассниках полностью аналогичен шарингу в facebook.

Url для шаринга в одноклассниках:

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

Количество шеров страницы в одноклассниках

А вот процесс подсчета количества шеров в одноклассниках больше похож на контакт — также подключается JS скрипт, который вызывает метод ODKL.updateCount(rel, count).

Отличие от контакта в том, что в качестве индекса может быть использован произвольный текст, а не только целое число.

Код, который я использую для подсчета шеров:

var ODKL = <>; ODKL.updateCount = function(uid, count) < console.log(count); >var uid = "mainpage"; // UID - аналог index у контакта var url = "http://example.com"; $.getJSON('https://connect.ok.ru/dk?st.cmd=extLike&uid=' + uid + '&ref=' + encodeURIComponent(url) + '&callback=?', function(e) <>); 

Мой мир

В принципе, URL и процесс шаринга в моем мире аналогичен таковому в контакте.

Ссылка для моего мира выглядит следующим образом:

http://connect.mail.ru/share?url=&title=&description=&image_url=

• url: адрес страницы, которой вы делитесь
• title: заголовок поста
• description: описание ссылки
• image_url: ссылка на изображение

Получение данных о количестве шеров моего мира

 $.getJSON('https://connect.mail.ru/share_count?url_list=' + encodeURIComponent(url) + '&callback=1&func=?', function(response) < var url = encodeURIComponent(url); for (var url in response) < if (response.hasOwnProperty(url)) < var count = response[url].shares; console.log(count); >> >); 

Google

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

Простого способа получить количество расшариваний в g+ нет, но есть грязные, например, спарсить из ответа по адресу:

https://apis.google.com/u/0/se/0/_/+1/sharebutton?plusShare=true&usegapi=1&action=share&url=

Подводя итог

Соц. сеть	Ссылка	Кастомные описания	Счетчик	Хештеги
Вконтакте	http://vk.com/share.php?url=&title=&description=&image=&noparse=true	Поддерживает для любой страницы	Имеется	В тайтле
Facebook	https://www.facebook.com/sharer/sharer.php?u=&picture=	Только картинка, остальное через OG	Имеется	Отсутствуют
Twitter	https://twitter.com/share?url=&text=&hashtags=&via=	Поддерживает для любой страницы	Отсутствует	Штатно
Одноклассники	https://connect.ok.ru/offer?url=	Используя OG-метатеги	Имеется	Отсутствуют
Мой мир	http://connect.mail.ru/share?url=&title=&description=&image_url=	Поддерживает для любой страницы	Имеется	Отсутствуют
Google	https//plus.google.com/share?url=	Используя OG-метатеги	Грязный способ	Отсутствуют

P.S. оптимальный размер изображения для шаринга в соц сетях, которое одинаково хорошо будет выглядеть везде — 1024×512 пикселей.

Источник

Оптимизируем страницу при помощи собственных социальных кнопок

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

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

Готовые решения социальных кнопок

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

• лишний трафик
• не всегда корректно работает через ajax
• реклама
• долго загружаются или не загружаются вообще
• поедают память браузера, особенно когда контент постоянно обновляется через ajax

На github есть много готовых решений, например:

Создание собственных кнопок

Так как на сайте мы уже использовали шрифты с социальными иконками (для кнопок авторизации через соц сети и для ссылок на группы) то мы просто взяли их — дополнительной памяти на них не требуется.

Так же можно воспользоваться готовыми элементами, например для bootstrap — lipis.github.io/bootstrap-social который использует Font Awesome (Font Awesome сам по себе очень большой, по этому если Вам надо только определенные иконки, то советуем выбрать только те которые нужны через fontello.com)

Рассмотрим код на JS (приведена часть для Вконтакте, в конце статьи есть ссылка на полный пример со всеми социальными кнопками, которые нам были нужны).

Итак, сначала создадим объект и добавим функцию инициализации, в которой укажем классы объекта для запуска события и данных, которыми будем делиться и добавим к каждому объекту на странице eventListener:

Далее, опишем eventListener, добавив его к уже созданному классу:

 addEventListener: function(el, eventName, opt) < var _this = this, handler = function() < _this.share(opt.id, opt.url, opt.title, opt.desc); >; if(el.addEventListener) < el.addEventListener(eventName, handler); >else < el.attachEvent('on' + eventName, function() < handler.call(el); >); > > 

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

 share: function(id, url, title, desc) < url = encodeURIComponent(url); desc = encodeURIComponent(desc); title = encodeURIComponent(title); switch(id) < case 'vk': this.popupCenter('https://vk.com/share.php?url=' + url + '&description=' + title + '. ' + desc, this.title, this.width, this.height); break; default: break; >; >, popupCenter: function(url, title, w, h) < var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; var left = ((width / 2) - (w / 2)) + dualScreenLeft; var top = ((height / 3) - (h / 3)) + dualScreenTop; var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); if (window.focus) < newWindow.focus(); >> 

Если вы используете jQuery, то инициализировать можно так:

$('.share-btn a').on('click', function() < var < var data = $(this).parent('.share-btn'); var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || ''; cubeShare.share(id, url, title, desc); >>); 

Так же можно вызвать шаринг-кнопку таким образом:

cubeShare.share(id, url, title, desc); 

• id — одно из значений fb,vk,gb,tw,in,mail
• url — полная ссылка
• title — заглавие
• desc — описание

• Класс share-btn
• Атрибут data-url — полная ссылка. Если нету то берет значение из браузера (location.href)
• Атрибут data-title — заглавие (не обязательно)
• Атрибут data-desc — описание (не обязательно)

Статистика и выводы

• Addthis — примерно 11 запросов на сервис и примерно 200кб трафика (с кешем примерно 2.6кб)
• Pluso — примерно 9 запросов на сервис и примерно 45кб трафика (с кешем примерно 1.4кб)
• Рассмотренное в статье решение — 3.5кб сам скрипт (с кешем примерно 200б) + иконки на ваше усмотрение.

Источник