Кнопки социальных сетей javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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

License

maxulyanov/SocialButtons

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

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

• Подключить SocialButtons.css и SocialButtons.js или их минифицированные версии
• Создать экземпляр кнопок с помощью вызова new SocialButtons, передав нужные параметры
• При необходимости подключить es6-promise.js
• Никакие дополнительные библиотеки (например jQuery) для работы не требуются
• Установить можно так же из NPM:
  npm install social-buttons

Какие сервисы поддерживаются?

На данный момент это — Вконтакте, Facebook, Google+, Одноклассники, Twitter, Мой Мир, Livejournal, Linkedin
Функциональные названия:
[‘facebook’, ‘vkontakte’, ‘odnoklassniki’, ‘googleplus’, ‘twitter’, ‘moimir’, ‘lj’, ‘linkedin’]

services — Массив сервисов, кнопки которых должны быть сгенерированы в текущем виджете
components — Какие элементы кнопки должны быть отрисованы.
Доступные значения: icon , text , count (положение элементов в массиве не имеет значения)
counter — Отображать ли счетчики публикаций. По умолчанию false
outputCountCallback — Функция для изменения отображения счетчика, ожидается, что будет возращен результат модификации.
В единственном параметре можно получить текущий счетчик. theme — Варианты отображения кнопок. Изначально доступно несколько тем: default , color
Вы так же можете создать свою тему, добавив соответствующие стили, сами кнопки получат постфикс вида — b-social-button—yourtheme
showZeros — Показывать ли счетчики, если они равны нулю. По умолчанию — false
buttonSize — Размер кнопок: small , middle , large или любое другое значение, которое может быть преобразовано в число
id — Уникальный идентификатор DOM элемента, к которому будет привязан и отрисован виджет кнопок
url — URL расшариваемой публикации, параметр имеет наивысшей приоритет, если он не указан значение берется из meta тега property og:url , по умолчанию title текущей страницы
description — Описание расшариваемой публикации, параметр имеет наивысшей приоритет, если он не указан значение берется из meta тега property property vkontakte», который в свою очередь имеет следующее поля:

• text — Текст кнопки
• title — Тег title для кнопки
• counter — Пользовательская функция, переопределяет сервис получение счетчика по-умолчанию
• customClass — Дополнительный класс для кастомизации

callbacks — Объект с функциями, которые будут вызваны при наступлении определенных событий, по-умолчанию все функции объекта callbacks равны — NULL .

• create — виджет успешно создан
• share — попытка расшаривания публикации
  Так же Для каждой функции при создании в параметре можно получить полезные данные о событии

Скрипт не работает, не отображается ни одна кнопка

Стоит проверить консоль:
Ошибка: #yourID not found!
Решение:

• Вызов new SocialButtons необходимо осуществить после загрузки DOM дерева — DOMContentLoaded
• Проверьте наличие элемента c ID — yourID на вашей странице

Ошибка: Uncaught ReferenceError: Promise is not defined
Решение: Подключите файл es6-promise.js

Не отображается счетчик публикаций

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

Публикуется неправильный контент

Выполните рекомендации из предыдущего раздела

Все современные браузеры.
IE начиная с 9 версии и выше.

Источник

Кнопки социальных сетей javascript

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

Добавляем следующий HTML на страницу

Добавляем в наш JS файл

 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)<>); > 

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

Источник

Элементарные социальные 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 и дает возможность вести собственную статистику на своем же сервере.

Источник

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

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

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

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

Вот такие коды кнопок. Что же мы видим? Vkontakte единственный из представленных кодов, не использует HTML 5. В данном случае на использование HTML 5 указывает атрибут data- в html тегах. Еще интересно, что у Twitter и Facebook очень похожие коды, видимо, подсматривают друг у друга. Еще у Twitter и Facebook не указан type=«text/javascript», что соответствует HTML5, атрибут type теперь не является обязательным. Значение по умолчанию JavaScript (ECMAScript). А Google продолжает указывать type=«text/javascript». Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async, соответствующего спецификации HTML 5.

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

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

Как это касается Вас? Не каждый пользователь будет ждать загрузки Вашего сайта, а если дождется в дальнейшем, может, не вернутся, зачем ему возвращаться на «тормозной» сайт. Делаем вывод, что в ряде случаев асинхронная загрузка скриптов — нужная вещь.

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

С помощью javascript, атрибут data- устанавливается очень просто, например:

document.getElementById(id).dataset.annotation = "none" 

Как всегда не обошлось без нюансов. Работает во всех браузерах, кроме… Как Вы уже догадались, кроме IE до ie8, в ie9 уже работает. Но мы запишем по-другому, что бы работало во всех браузерах:

document.getElementById(id).setAttribute("data-annotation", "none"); 

В конечном итоге вот, что у меня получилось:

1. Немного изменил HTML, главным образом мне на сайте совсем не нужна прямая ссылка на Twitter, а в своем коде они проставляют такую ссылку: Твитнуть , зачем им это не понятно, что о них кто-то еще не знает? Или рейтинг в поисковиках маленький? В общем, записал так: Твитнуть , можно, конечно rel=«nofollow» поставить, но я выбрал максимально кардинальный метод. Вообще бы убрал тег «А», но без него не работает. HTML блок кнопок, вставляем туда, где хотим увидеть кнопки:

2. Javascript код асинхронной загрузки скриптов для кнопок, вставляйте куда хотите, обычно или в head или в конец страницы. Кстати у Twitter и Facebook в коде есть защита от повторной загрузки скриптов, сделанная, на случай если код вставить в страницу несколько раз, не думаю, что мой код кто-то вставит несколько раз, но на всякий случай защиту от повторной загрузки скриптов я оставил:

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

Источник