В этом небольшом уроке мы создадим простые и кастомные кнопки для шаринга в социальные сети.
Предлагаемый мной вариант лишен этих недостатков — все файлы будут на вашем сервере (то есть упадёт вместе с сайтом), ничего не подгружая извне, и к тому же очень хорошо кастомизируется. Кроме того, у нас будет небольшой плюс — обыкновенно в состав социальных кнопок входит большая тройка (ВКонтакте, Facebook и Twitter). В нашем случае в обойме присутствует Mail.Ru, Одноклассники и Telegram, чтобы никто не ушёл с нашего сайта нерасшаренным.
Единственный существенный минус: количество нажатий на кнопки считаться не будет . Мы уходим за рамки простоты и гибкости.
Впервые вопрос о собственных кнопках соц.сетей меня посетил в тот момент, когда для страницы на сайте социальный шаринг был очень нужен, но все ресурсы не подходили по дизайну. И не меня одного — сама идея кастомных кнопок далеко не новая. Самое интересное решение, на мой взгляд, было мной обнаружено на Хабре и после непродолжительных поисков привела на GitHub . Я взял за основу логику работы таких кнопок шаринга и творчески их доработал.
Решение простое как валенок — делаются ссылки для социальных сетей, внутри которых передаются понятные им параметры. Поскольку для этого используется тег , то в него можно завернуть практически всё, что угодно — простор для кастомизаций (ради чего всё это и делается) огромный.
Но у этого скрипта есть один недостаток — скрипт, который обрабатывал поведение браузера при нажатии на одну из кнопок. Привожу его часть, в которой вы сами легко увидите две проблемы:
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); },
Первая проблема небольшая и многие могут сказать мне: “Эй, чувак написал это в 2012 году! Просто поменяй строчку и всё”. И я с вами соглашусь, что можно просто поменять vkontakte.ru на vk.com и просто закрыть вопрос.
Вторая — под каждый сервис нужно писать новый блок. Который тоже сделать не очень-то проблемно, просто скопипастив и убрав/добавив нужные параметры.
Но что делает этот скрипт в итоге? Он просто создаёт всплывающее окно, в которое передаёт перечисленные параметры. Вот эти строчки:
Popup: function(url) { window.open(url,"","toolbar=0,status=0,width=626,height=436"); }
Вот именно работу этого скрипта я немного видоизменил. Но об этом чуть ниже. Рассмотрим сами кнопки и принцип их работы.
Вначале нам необходимо иметь несколько переменных для кнопок шаринга:
- $Title — Заголовок (название) страницы
- $Description — Описание страницы
- $ImageUrl — путь к изображению страницы
- $Link — прямая ссылка на страницу
Я назвал их условно, чтобы было наглядно понятно, сколько их необходимо и что они из себя представляют. Каким способом они будут браться на вашем сайте — вручную или автоматически — зависит только от приложения, на котором это будет исполнено. Например, в CMS WordPress это будет выглядеть так:
- $Title — это
- $Description —
- $ImageUrl —
- $Link —
Теперь в нужном нам месте вставляем следующий код, где на место переменных подставляем нужные значения (если необходимо):
ВКонтакте Facebook Mail.Ru Одноклассники Twitter Telegram
Готово. Код уже рабочий и его можно использовать — при нажатии на ссылку открывается новая вкладка социальной сети. А теперь давайте сделаем так, чтобы он не плодил вкладок, а открывал небольшое окошко поверх браузера. Чуть ниже добавим следующего кода:
function setOnclick(a) {
a.setAttribute("onclick","popupWin = window.open(this.href,"contacts","toolbar=0,status=0,width=626,height=436"); popupWin.focus(); return false");
}
function externalLinks() {
var links = document.getElementsByTagName("a");
for (i=0; i
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows