Evgenii Legotckoi
Evgenii Legotckoi24 сентября 2016 г. 9:59

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

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
B

C++ - Тест 002. Константы

  • Результат:16баллов,
  • Очки рейтинга-10
B

C++ - Тест 001. Первая программа и типы данных

  • Результат:46баллов,
  • Очки рейтинга-6
FL

C++ - Тест 006. Перечисления

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии
k
kmssr8 февраля 2024 г. 15:43
Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Анатолий Кононенко4 февраля 2024 г. 22:50
Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVA25 декабря 2023 г. 7:30
Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJo25 декабря 2023 г. 5:38
Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
Gvozdik18 декабря 2023 г. 18:01
Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Сейчас обсуждают на форуме
P
Pisych27 февраля 2023 г. 1:04
Как получить в массив значения из связанной модели? Спасибо, разобрался:))
AC
Alexandru Codreanu19 января 2024 г. 8:57
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCT27 декабря 2023 г. 5:57
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
Дмитрий10 января 2024 г. 1:18
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii Legotckoi12 декабря 2023 г. 3:48
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Следите за нами в социальных сетях