Django - Підручник 009. Іконки соціальних мереж «Поділитися» без JavaScript

Share, Social

Іконки соціальних мереж, за допомогою яких можна поділитися статтею з сайту, вже міцно увійшли в ужиток більшості сайтів. Розкрутка сайту за рахунок сарафанного радіо взагалі досить ефективний варіант зростання багатьох ресурсів, особливо якщо тематика може торкатися дуже великих соціальних груп. Але зараз загалом питання не про це. А про те, як прикрутити подібні кнопки без використання сторонніх сервісів, на кшталт кнопок від Яндекса або досить відомого сервісу UpToLike, який також дозволяє відстежувати статистику.

Але головний мінус всіх цих сервісів у тому, що вони гальмують роботу сторінок у користувача. Особливо останнім часом мене засмучує UpToLike. Тому цілком логічним кроком є впровадження подібних кнопок без жодного JavaScript.

Обмін у соціальних мережах без Javascript

Для того, щоб організувати подібні кнопки без JavaScript, вам доведеться пройтися всіма цільовими соціальними мережами і почитати їх API. А якщо бути точним, то знайти за якою URL-адресою передається адреса сторінки вашого сайту, якою ділиться відвідувач.

Для мене цільовими соціальними мережами є:

• VKontakte
• Твіттер
• 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 .