Реклама

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

РуководствоDjangoShare, Social1356

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

Qt/C++ - Урок 023. Перетаскивание QGraphicsItem на QGraphicsScene мышью

Ну например так можете сделать.void MoveItem::mousePressEvent(QGraphicsSceneMouseEvent *event){ if (QApplication::mouseButtons() == Qt::RightButton) { this->deleteLa...

  • Mark
  • 13 июля 2017 г. 1:26

Qt/C++ - Урок 023. Перетаскивание QGraphicsItem на QGraphicsScene мышью

Подскажите пожалуйста как в данном проекте по перетаскиванию организовать удаление объекта со scene методом delete item, допустим при щелчке ПКМ по объекту QGraphicsScene. Мои попытки оказалис...

  • EVILEG
  • 10 июля 2017 г. 21:34

Qt/C++ - Урок 048. QThread - работа с потоками с помощью moveToThread

А что делали? Повторяете урок или как? Пытались просто скачать проект в конце статьи и запустить?

Qt/C++ - Урок 048. QThread - работа с потоками с помощью moveToThread

У меня происходит переполнение счетчика count, появляется ошибка malloc(): memory corruption (fast). Не подскажите, как с этим бороться?

  • EVILEG
  • 9 июля 2017 г. 2:07

GameDev на Qt - Урок 3. Уничтожение противников

Поэтому в пятом уроке есть исходники всего проекта )))). Вообще, все эти материалы были не предыдущей версии сайта, которая на WordPress. Во время переноса мог что-то потерять.

Сейчас обсуждают на форуме

Как реализовать отправку e-mail

Возможно что уже и нет необходимости в почтовом клиенте, но в своё время так же столкнулся с данной проблемой в QT. Нашел один интересный проект под названием libqxt, там реализовано дов...

  • BlinCT
  • 18 июля 2017 г. 0:00

тестирование классов в QT

Это был вопрос или утверждение? Не понятно что вы хотели этим сказать. Интересное у вас обращение.

  • Asteri
  • 14 июля 2017 г. 12:23

css

Делюсь, может, пригодится когда-нибудь) QTableView QHeaderView { background-color: #ffffff; } Вот так эта проблема лечится, градиент задать не получается, но хоть...

  • EVILEG
  • 12 июля 2017 г. 19:52

QSqlQuery выполнение sql запросов из файла

Мне думается, что это уже будет дело вкуса и вашего взгляда на проект. Если Вы действительно собираетесь просто скармливать своему софту SQL скрипты, которые должны будут выполняться для...

QML Canvas + Line. Bug?

Вот оно что, значит не баг) Спасибо