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

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

Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂

Для начала нужно подключить библиотеку jquery.

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

В head вставляем следующий код:

Код приведенный ниже вставляем в теги

сюда код

И вставляем сразу после подключенной библиотеки.
Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
Создайте файл buttons.js и вставляем код в него.
Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.

Собственно, сам код:

Share = { /** * Показать пользователю диалог шаринга в сооветствии с опциями * Метод для использования в inline-js в ссылках * При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему * * @example like+ * * @param Object _element - элемент DOM, для которого * @param Object _options - опции, все необязательны */ go: function(_element, _options) { var self = Share, options = $.extend({ type: "vk", // тип соцсети url: location.href, // какую ссылку шарим count_url: location.href, // для какой ссылки крутим счётчик title: document.title, // заголовок шаринга image: "", // картинка шаринга text: "", // текст шаринга }, $(_element).data(), // Если параметры заданы в data, то читаем их _options // Параметры из вызова метода имеют наивысший приоритет); if (self.popup(link = self(options)) === null) { // Если не удалось открыть попап if ($(_element).is("a")) { // Если это , то подставляем адрес и просим браузер продолжить переход по ссылке $(_element).prop("href", link); return true; } else { // Если это не , то пытаемся перейти по адресу location.href = link; return false; } } else { // Попап успешно открыт, просим браузер не продолжать обработку return false; } }, // ВКонтакте vk: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://vkontakte.ru/share.php?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&image=" + encodeURIComponent(options.image) + "&noparse=true"; }, // Одноклассники ok: function(_options) { var options = $.extend({ url: location.href, text: "", }, _options); return "http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1" + "&st.comments=" + encodeURIComponent(options.text) + "&st._surl=" + encodeURIComponent(options.url); }, // Facebook fb: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://www.facebook.com/sharer.php?s=100" + "&p=" + encodeURIComponent(options.title) + "&p=" + encodeURIComponent(options.text) + "&p=" + encodeURIComponent(options.url) + "&p=" + encodeURIComponent(options.image); }, // Живой Журнал lj: function(_options) { var options = $.extend({ url: location.href, title: document.title, text: "", }, _options); return "http://livejournal.com/update.bml?" + "subject=" + encodeURIComponent(options.title) + "&event=" + encodeURIComponent(options.text + "
" + options.title + "") + "&transform=1"; }, // Твиттер tw: function(_options) { var options = $.extend({ url: location.href, count_url: location.href, title: document.title, }, _options); return "http://twitter.com/share?" + "text=" + encodeURIComponent(options.title) + "&url=" + encodeURIComponent(options.url) + "&counturl=" + encodeURIComponent(options.count_url); }, // Google+ gg: function (_options) { var options = $.extend({ url: location.href }, _options); return "https://plus.google.com/share?url=" + encodeURIComponent(options.url); }, // Mail.Ru mr: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: "", text: "", }, _options); return "http://connect.mail.ru/share?" + "url=" + encodeURIComponent(options.url) + "&title=" + encodeURIComponent(options.title) + "&description=" + encodeURIComponent(options.text) + "&imageurl=" + encodeURIComponent(options.image); }, // Открыть окно шаринга popup: function(url) { return window.open(url,"","toolbar=0,status=0,scrollbars=1,width=626,height=436"); } }

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

ВКонтакте Facebook Twitter Одноклассники Google+ Mail.Ru LiveJournal

Как я писал раньше, результат будет без картинок, а просто украшен стилями.
Добавляем данный код в Файл стилей вашего сайта.

Share_this{margin-top:15px;width:100%;} .social_share{float:right;margin-left:5px;color:#fff;padding:2px;} .social_share:hover{cursor:pointer;} .vk:hover{background:#ff6600;} .fb:hover{background:#ff6600;} .tw:hover{background:#ff6600;} .gg:hover{background:#ff6600;} .ok:hover{background:#ff6600;} .mr:hover{background:#ff6600;} .lj:hover{background:#ff6600;} .vk{background:#339900;} .fb{background:#339900;} .tw{background:#339900;} .gg{background:#339900;} .ok{background:#339900;} .mr{background:#339900;} .lj{background:#339900;}

Вот и все. Если проделанная работа выполнена правильно, то кнопки должны прекрасно выполнять свою функцию.
На этом все, спасибо за внимание 🙂

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

Поэтому очень важно знать, как установить кнопки социальных сетей на сайт, чтобы помочь развиваться веб-ресурсу. Будут рассмотрены самые популярные социальные сети

• Вконтакте
• Фейсбук
• Одноклассники
• Гугл «+1»
• Твиттер
• Мой Мир

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

Кнопка достаточно гибкая, надпись на ней можно менять на любую желаемую (по умолчанию «сохранить»).

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

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

Поле «текст » позволяет изменять стандартную надпись «сохранить» на свою.

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

Код для вставки состоит из двух частей: первая должна располагаться в любом месте между тегами и , вторая – в том месте, где должна отображаться кнопка. Об установке кнопки на сайт читайте в пункте .

Второй вариант кнопки – виджет «Мне нравится ». Его будет проще установить на сайт, т.к. в конце вы получите всего одну часть кода, которую нужно будет разместить в нужном месте сайта.

Для настройки кнопки перейдите по этой ссылке . Здесь также необходимо заполнить ряд параметров.

Название сайта – здесь лучше указать краткое и настоящее название вашего сайта.

Адрес сайта – укажите адрес главной страницы вашего сайта.

Основной домен сайта – укажите главное зеркало сайта (его можно найти в в качестве параметра оператора «Host»), если затрудняетесь это сделать – то оставьте предлагаемое ВКОНТАКТЕ.

Варианты кнопки – это различные стили кнопки, они влияют на ее внешний вид.

Высота кнопки – геометрические размеры «Мне нравится».

Название кнопки – доступно два варианта (мне нравится, это интересно).

Код для вставки – тот код, который нужен для отображения кнопки социальной сети Вконтакте.

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

URL to Like – url-адрес страницы для кнопки (если поле не заполнено, то будет браться адрес страницы, на которой расположена кнопка).

Send Button – наличие галочки включает новую возможность – отправлять ссылку в Фейсбук (отобразится дополнительная кнопка – «отправить»). При включении будет одновременно отображаться две кнопки.

Layout Style – стиль кнопки, влияет на ее внешний вид (стандартным считается button_ count ).

Width – ширина кнопки в пикселях.

Show Faces – при включении будут показываться аватары людей, уже нажавших на данную кнопку.

Font – тип шрифта кнопки.

Color Scheme – фон пространства рядом с кнопкой (белый и черный).

Verb to display – название кнопки (нравится, я рекомендую).

Get Code – кнопка, формирующая код скрипта.

Данные социальные сеть приобрели широкую популярность в русскоязычном интернете, там обитает огромное число людей, поэтому не стоит пренебрегать установкой кнопки «Класс» от сервиса «Одноклассники» и «Нравится» от сайта «Мой мир».

Для настройки кнопок нужно перейти на . Можно добавлять кнопки по отдельности, настраивая каждую по-своему, а можно редактировать обе кнопки одновременно.

Размер по высоте – геометрический размер кнопок.

Вид – внешний вид рамки кнопок.

– выбор кнопок (нравится, класс)

Счетчик – включение и выключения счетчика нажатий на кнопки (справа, сверху – расположение счетчика).

Текст на кнопках – выбор одного из трех названий, доступных для кнопок.

Код для вставки – код скрипта, который нужно будет устанавливать на сайт.

Новая социальная сеть, которая за короткое время набрала огромную аудиторию. Трудно представить себе сайт без кнопки «+1», т.к. она не только позволяет добавлять ссылки в социальную сеть и увеличивать количество «плюсиков», но и может влиять на результаты сайта в ТОПе поисковой системы Google.

Все подробности об этом, а также установка и настройка кнопки находятся .

Популярнейший сервис коротких сообщений оставлять без внимания нельзя. Установите себе кнопку от данной социальной сети и увидите, как быстро люди станут делиться ссылками на ваш сайт в Твиттере. Настроить кнопку можно на этой .

Сначала нужно выбрать нужную кнопку (нас интересует первый вариант – кнопка «отправить ссылку»).

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

Отправить ссылку – выбор страницы, на которой расположена кнопка, или любой другой.

Текст – выбор текста, который будет появляться рядом с кнопкой (НЕ НА САМОЙ КНОПКЕ).

Показывать счетчик – включить или выключить отсчет количества нажатий на кнопку.

С помощью – выбор способа добавления сообщения ссылки в Твиттер (практически ни на что не влияет).

Отметить – выбор метки, которая будет публиковаться в Твиттере (практически ни на что не влияет).

Большая кнопка – увеличение геометрического размера кнопки.

Отказаться от адаптации Твиттера – отказ от стилей Твиттера (лучше оставить поле без галочки).

Язык – выбор языка кнопки.

Справа будет сформирован код, который нужно добавить на сайт.

Для этого нужно заполнить несколько полей, которые сформируют нужный код скрипта.

Размер – маленький или большой размер кнопки.

Стиль – выбор между кнопкой или иконкой.

Наличие счетчика – включение или выключение счетчика нажатий на кнопку.

Внешний вид кнопки – пример того, как будет выглядеть кнопка.

Заголовок – выбор заголовка для страницы (произвольный или заголовок текущей страницы).

Код для вставки – нужный код, который добавляется на сайт.

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

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

Набор сервисов – выбор кнопок социальных сетей для сайта (те, что с галочкой – будут отображаться на сайте).

Код – нужный скрипт, который необходимо добавить на сайт.

В последнее время широкую популярность приобрел конструктор кнопок социальных сетей – PLUSO. Перейти на сайт можно по этой ссылке .

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

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

Затем необходимо настроить ряд параметров, выбрав

• расположение блока (вертикальный, горизонтальный);
• цвет кнопок (яркие, темные);
• величину блока (крупный, маленький);
• счетчик (наличие или отсутствие);
• фон (бесцветный или цветной);

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

Еще один сервис, позволяющий сконструировать кнопки для своего сайта – Share42.com/ru .

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

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

Тип панели с иконками – отображение блока кнопок (очень интересен вариант «вертикальная плавающая»).

Ограничить видимое кол-во иконок – выбор числа отображаемых кнопок (другие будут скрыты за ссылкой).

Кодировка сайта – выбор кодировки вашего сайта.

Добавить иконку сайта Share42.com – возможно, следует убрать галочку.

Показывать счетчики – включение счетчика нажатий по кнопкам (только при работающем jQuery).

Установка данного скрипта довольно сложная, но она пошагово описывается на самом сайте Share42.

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

Первую часть кода нужно добавить между тегами и . Для этого зайдите в админ-панель WordPress и перейдите к редактору шаблона.

В редакторе шаблона нужно найти файл «Заголовок» (header. php) , если такого нет, тогда – «Основной шаблон» (index.php) . Теперь необходимо найти тег или . Если в указанных файлах таких тегов нет (все темы разные, такое вполне может быть), тогда вам придется открывать для редактирования все файлы и искать в каждом из них тег . Для поиска можно использовать сочетание клавиш «Ctrl+F».

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

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

Чаще всего кнопки добавляются перед статьей или в ее конце. Проще, конечно, второй вариант. Его мы и рассмотрим.

Вам нужно найти то место, где заканчивается статья (основная текстовая часть страницы). Для этого нужно редактировать файл «Одна запись» (single. php) .

Теперь нужно найти тот оператор, который отвечает за вывод основного содержимого статьи. В моем случае это «the_content», сразу после него и размещается код кнопок.

Аналогично можно размещать код вначале статьи, нужно только найти место между заголовком и текстом статьи.

В Интернете, вероятно, не осталось сайтов, на которых бы не были размещены кнопки для постинга материалов в социальные сети. Последние давно и прочно заняли место в наших жизнях. Мы там общаемся, знакомимся, раскручиваем бизнес, читаем новости и прочее. Полный спектр. Неудивительно, что веб-мастера стремятся расширить присутствие своих сайтов в соцсетях любыми доступными методами. Ведь там лежат тонны потенциального траффика, который нужен абсолютно всем. Поток посетителей - это деньги, репутация, рост. Всё строится вокруг него. Лакомый кусок.

Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель - выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

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

Состав команды аттестуемых таков:

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

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

Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.

Здесь же можно активировать кнопку "Вверх", включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

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

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

Примеры кода микроразметки для популярных социальных сетей (код нужно прописывать перед тегом ):

1. Facebook и Вконтакте используют Open Graph protocol:

3. Для Twitter код выглядит так:

4. Для Google+ так:

- cсылка на профиль автора в Google+
- название сайта
- текст сниппета (до 40 символов)
- описание сайта
- путь к файлу изображения

Инструменты для работы с микроразметкой.

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

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

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

Расшаривание с помощью соц. кнопок позволяет увеличить посещаемость сайта до 20% !

Эффективные инструменты для шаринга могут быть добавлены двумя способами:

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

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

К основным преимуществам этих «помощников» можно отнести:

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

Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

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

• Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
• Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
• Периодическое появление рекламы;
• Отсутствие стабильного алгоритма работы через AJAX;
• Возможное использование памяти браузеров;
• Наличие сомнительного трафика;
• Непредставление гарантий безопасности данных пользователей.

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

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

Варианты внешнего вида:

Список доступных для шаринга сетей:

Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

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

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

Окно предварительного просмотра и дополнительных опций:

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

(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement("script"), g = "getElementsByTagName"; s.type = "text/javascript"; s.charset="UTF-8"; s.async = true; s.src = ("https:" == window.location.protocol ? "https" : "http") + "://share.pluso.ru/pluso-like.js"; var h=d[g]("body"); h.appendChild(s); }})();

Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.

Наряду с инструментами для шаринга дает возможность установить специальные служебные элементы: «печать», «в закладки» и т.д.

Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

Скрипт социальных кнопок выглядит так:

Для работы с виджетом код сложнее:

window.informerPosition = {vert:"top",hor:"left"}

Для установки достаточно поместить данные в шаблон.

Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок - Pip.Qip . Простота здесь лишь подчеркивает комфорт.

Для получения заветного кода нужно:

Останется лишь поместить его в код сайта.

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

Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.

Первую часть кода следует поместить внутри тега :

Вторую – в место непосредственного расположения кнопки:

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

Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже - то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?

тогда ссылка в соц.сети будет выглядеть так:

Здесь «Сегодня день Рождения allsoft.ru - 8 лет:)» - текст написанный пользователем, остальное - информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share , остальные соц.сети тоже их вполне понимают.

Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице - заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети

Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.

New Ya.share({ element: "ya_share_normal", elementStyle: { "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] }, link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: { twitter: { title: "Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" } } });
1. Здесь ya_share_normal - id элемента на странице (), в котором будет появляться блок с социальными кнопками, link - ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:

и 4 блока кода в JavaScript, как указано выше.

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