Django - Урок 009. Иконки социальных сетей "Поделиться" без JavaScript

Share, Social

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

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

Social Sharing без Javascript

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

Для меня целевыми социальным сетями являются:

• VKontakte
• Twitter
• FaceBook
• Google+
• Linkedin - профессиональная социальная сеть, которая в первую очередь служит для развития профессиональных связей.

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

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

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

{% load staticfiles %}
<a href="http://vk.com/share.php?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/vk.png' %}">
</a>
<a href="https://twitter.com/share?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/twitter.png' %}">
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://evileg.com/ru/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/facebook.png' %}">
</a>
<a href="https://plus.google.com/share?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/google-plus.png' %}">
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/linkedin.png' %}">
</a>

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

Совсем немного JavaScript

И всё-таки я добавлю совсем немного Javascript, который не будет нагружать страницу. Дело в том, что если совсем без JavaScript , то будет открываться отдельная страница за счёт target="_blank" , в которой пользователь сможет добавить комментарии. Но привычный вариант тот, в котором открывается отдельное окно. Поэтому лучше будет навесить обработчики на событие onclick , которые будут вместо вкладки открывать отдельное окно.

{% load staticfiles %}
<a href="http://vk.com/share.php?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/vk.png' %}">
</a>
<a href="https://twitter.com/share?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/twitter.png' %}">
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://evileg.com/ru/{{ article.get_absolute_url }}"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/facebook.png' %}">
</a>
<a href="https://plus.google.com/share?url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/google-plus.png' %}">
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://evileg.com/ru/{{ article.get_absolute_url }}"
   onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/linkedin.png' %}">
</a>

Для Django рекомендую VDS-сервера хостера Timeweb .