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

РуководствоDjangoShare, Social, Социальные сети892

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

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
Последние комментарии
  • EVILEG
  • 24 апреля 2017 г. 20:44

Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

У меня пока мыслей на этот счёт нет ((

Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

Пробовал играться с шарком, либо я криво смотрел, либо почему-то POST запросы на oauth.yandex.ru не летят, хотя должны постом лететь, я и исходники QOAuth2AuthorizationCodeFlow ковырял на пред...

  • EVILEG
  • 24 апреля 2017 г. 13:39

Подключение вашего Qt приложения к сервисам Google, используя OAuth 2.0

Возможно, стоит Wireshark`ом запросы посмотреть. В чём отличие идёт аякс запроса от запроса из библиотеки. Возможно, что не хватает какой-нибудь заголовочной информации.

Сейчас обсуждают на форуме
  • Arrow
  • 1 мая 2017 г. 1:00

Callback функции

Первый раз пытаюсь работать с Callback функциями. Помогите понять, что и где я не так делаю. Вот код: ReverseString.h #ifndef REVERSESTRING_H#define REVERSESTRING_H#includ...

  • EVILEG
  • 30 апреля 2017 г. 10:22

QMenu

Вам не кажется, что вы увлеклись со скриншотами? Добавляйте голый программный код в сообщения через специальный диалог. Это кнопка с двумя фигурными скобками. Иногда требуется повторить код у ...

  • CJIaBiK
  • 29 апреля 2017 г. 21:07

QPushButton

Спасибо

  • CJIaBiK
  • 29 апреля 2017 г. 17:57

QWebEngineView

спасибо помогло

  • EVILEG
  • 29 апреля 2017 г. 17:47

Ошибка

Такое случается, когда добавляете новые файлы, а объектный файл, в данном случае mainwindow.obj, не пересобирается как положено. Приходится чистить сборку.