С ростом популярности социальных сетей и сервисов кнопки поделиться прочно укоренились на страницах большинства сайтов. Имея свою колонку на «Фейсбуке» или «Вконтакте», человек волей-неволей собирает на неё интересующий его материал, так почему бы не предложить ему поделиться статьёй и с нашего сайта. Для этих целей сегодня мы и попытаемся реализовать функционал кнопок поделиться для основных соцсетей.
Перед тем, как углубляться в кодинг, давайте осмотримся и обратим внимание нате ресурсы, которые уже нам предоставляет глобальная паутина. К слову их очень много мы же рассмотрим два наиболее популярных.
Первое, что стоит отметить – это технологии Яндекса. Причем, довольно не случайно, такой гигант рунета как Яндекс уделил подобное внимание кнопкам поделиться. Социальные сети – это, хоть и весьма кривое, но зеркало вкусов и мнений людей, соответственно из них можно почерпнуть уйму полезной информации. Хотя, на данный момент, это и не афишируется, но социальные факторы набирают все больше оборотов в поисковом ранжировании. Сегодня, конечно, просто с кучей лайков сайт в топ не выведешь, но завтра, возможно, кого больше «любят» - тот и будет выше.
Теперь перейдем по ссылке yandex share и, таки посмотрим, что для нас подготовили разработчики Яндекс, к слову сказать «Технологии» – жуть, какая полезная штука, но это уже тема для следующих статей. Итак, в окне браузера мы видим простой конструктор для создания блока кнопок поделиться. Расставляем галочки, выбираем внешний вид блока и копируем готовый код к себе на сайт. Всё, дальше за нас всё сделает сам Яндекс.
Ещё один сервис достойный нашего внимания – share42, представляет собой такой же простой конструктор, вот только кнопок с сервисами и сетями гораздо больше, некоторые из которых, признаться, я увидел впервые. Главное отличие от «Яндекс.Технологий» – мы получаем полностью сгенерированный скрипт, который будет отрабатываться не облачно, а непосредственно на нашем сервере.
Казалось бы, при наличии столь замечательных решений никому и в голову не придет вновь «изобретать велосипед»? А нет, написанный кем-то скрипт хорош ровно настолько, насколько нам самим лень над ним заморачиваться. Конечно, он будет исправно работать и выполнять свои функции, но – это универсальное решение, написанное для общей массы сайтов, т.е. оно не учитывает наших личных маленьких потребностей и условностей.
С чем же мы рискуем столкнуться, используя готовые кнопки поделиться?
Во-первых: дизайн кнопок фактически железный. Да он узнаваем и предоставляется самими соцсетями, но только нашим потребностям не соответствует. Ну вот, у кнопочки края закруглены, а дизайн нашего сайта требует, чтобы кнопка была квадратной, что делать? – Брать спрайт и перерисовывать! Кто пробовал, тот знает – дело неблагодарное: замена одной кнопки чревата пятью-шестью пробами «правильно» разместить её на спрайте. И это только замена одной/нескольких кнопок, а если сайт в готическом стиле и все кнопки нужны тёмные?
Во-вторых: в надежности Яндекса сомневаться не приходится, но кнопки, в отличие от счетчика метрики, почему-то грузятся тяжело, и не редко происходит видимое их запаздывание от основного контента страницы. Особенно это заметно при хорошем высокоскоростном соединении, когда страница вылетает фактически мгновенно, а у вас несколько блоков с кнопками.
В-третьих: для теста сгенерируйте скрипт на share24 – он большой. Все ли из предоставленных строк кода так уж нам необходимы? – Не думаю.
Взвесив за и против, вы со мной согласить, что собственные кнопки поделиться подойдут вам намного лучше. Но, выбирая свой вариант, следует учесть, что поддержка и ответственность за его работу ляжет целиком на вас. URL по которому происходит репост хоть и меняется очень редко, но все же меняется, и это приходится отслеживать.
Теперь перейдём к самому написанию скрипта, он будет делиться на три части: HTML, CSS и, собственно, сам код, написанный на JavaScript. Дополнительно я буду использоваться для удобства библиотеку jQuery.
Подключаем все необходимые файлы:
<link href="main.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="share.js" type="text/javascript"></script>
Теперь добавляем в файл share.js скрипт, он будет выглядеть таким образам:
var share = {
twitter: function($this){
var data = share.data($this);
if(data){
var url = "http://twitter.com/share?";
url += "text=" + encodeURIComponent(data.text);
url += "&url=" + encodeURIComponent(data.url);
url += "&hashtags=" + "";
url += "&counturl=" + encodeURIComponent(data.url);
share.popup(url);
};
return false;
},
vk: function($this){
var data = share.data($this);
if(data){
var url = "http://vkontakte.ru/share.php?";
url += "url=" + encodeURIComponent(data.url);
url += "&title=" + encodeURIComponent(data.title);
url += "&description=" + encodeURIComponent(data.text);
url += "&image=" + encodeURIComponent(data.img);
url += "&noparse=true";
share.popup(url);
};
return false;
},
facebook: function($this){
var data = share.data($this);
if(data){
var url = "http://www.facebook.com/sharer.php?s=100";
url += "&p[title]=" + encodeURIComponent(data.title);
url += "&p[summary]=" + encodeURIComponent(data.text);
url += "&p[url]=" + encodeURIComponent(data.url);
url += "&p[images][0]=" + encodeURIComponent(data.img);
share.popup(url);
};
return false;
},
data: function($this){
if($this){
return $.parseJSON($this.parent("div").attr("data-share-data"));
};
return false;
},
popup: function(url){
window.open(url, "", "toolbar=0, status=0, width=626, height=436");
return false;
}
};
Это объект с набором методов: twitter(), vk(), facebook(), data(), popup(). Первые три метода непосредственно отвечают за процесс поделиться. Вначале идёт обращение к методу data(), где парсится значение атрибута data-share-data и возвращается json. Далее формируется URL c с учётом полученных данных и вызывается метод popup(). Он отвечает за создания нового окна одной из этих соцсетей.
Добавляем разметку на страницу:
<div class="share">
<div data-share-data='{"url": "http://falbar.ru/article/vsplyvayushhie-podskazki-na-chistom-css", "img": "http://falbar.ru/storage/images/2017/07/strelochka-ukazatel.png", "title": "Всплывающие подсказки на чистом CSS ", "text": "Всплывающие подсказки без jQuery на чистом CSS."}'>
<div onclick="share.twitter($(this))" class="twitter"></div>
<div onclick="share.vk($(this))" class="vk"></div>
<div onclick="share.facebook($(this))" class="facebook"></div>
</div>
</div>
Структура довольно простая, а именно обёртка с классом share, далее идёт div с атрибутом data-share-data, о котором было упомянута выше. Строка формируется из четырех параметров со своими значениями.
- url – адрес которым мы делимся;
- img – картинка, если она не нужна указываем пустую строку;
- title – заголовок страницы;
- text – нужное нам описание.
Внутри div лежат сами кнопки с навешенным на них событием onclick. По клику будет вызываться один из методов описанных выше.
Осталось только придать кнопкам человеческий вид и добавить CSS:
.share{
background-color: #ececec;
display: inline-block;
padding: 7px 5px;
}
.share div[data-share-data]:after{
content: "";
display: block;
clear: both;
height: 0;
}
.share div:first-child{
margin-left: 0;
}
.share .twitter,
.share .vk,
.share .facebook{
background-image: url(share.png);
margin-left: 7px;
border-radius: 3px;
height: 24px;
width: 24px;
float: left;
cursor: pointer;
}
.share .twitter{
background-color: #00aced;
background-position: 0 -61px;
}
.share .twitter:hover{
background-color: #008abe;
}
.share .vk{
background-color: #48729e;
background-position: 0 -32px;
}
.share .vk:hover{
background-color: #3a5b7e;
}
.share .facebook{
background-color: #3c5a98;
background-position: 0 0;
}
.share .facebook:hover{
background-color: #30487a;
}
В итоге после добавления CSS кнопки получаться вида:
На этом написание скрипта законченно, в примере я использовал всего три социальных сети, если нужно подключить другие, то это не составит большого труда. Для этого потребуется добавить новый метод в объект share, не забывая прописать также дополнительно HTML и CSS. Ссылки, по которым происходит репост в соцсети можно получить двумя способами:
- Воспользоваться API социальной сети, что не всегда помогает;
- Выковырять у аналогичного сервиса, воспользовавшись firebugом или другим инструментом для веб-разработчика.
На этом я сегодня закончу, в одной из следующих статей допишем счетчик репостов для наших кнопок поделиться.