Реклама

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 .

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
  • falcon
  • 16 января 2018 г. 17:25

Qt - Тест 001. Сигналы и слоты

  • Результат 100 баллов
  • Очки рейтинга 10
  • falcon
  • 16 января 2018 г. 17:22

Qt - Тест 001. Сигналы и слоты

  • Результат 68 баллов
  • Очки рейтинга -1
  • falcon
  • 16 января 2018 г. 17:18

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

  • Результат 73 баллов
  • Очки рейтинга 1
Последние комментарии

QML - Урок 021. Переключение между окнами в QML

Спасибо всем. Все получилось. Прикручиваю логику.

  • BlinCT
  • 14 января 2018 г. 19:28

Разработка на Qt под iOS

Вот честно, на сколько же муторно под огрызок что то делать. Куча проблем) А вод линь или под Андроид все просто и тривиально))

  • folax
  • 12 января 2018 г. 9:16

QML - Урок 021. Переключение между окнами в QML

Ничего сложного, делаете по тех заданию 3 файла qml, называете их как указанно в тех задании, потом из первого окна через Loader их переключаете, в окне 2 и 3 делаете сигналы которые при закры...

QML - Урок 021. Переключение между окнами в QML

Все верно, я и не говорил что этот кусок кода лично мое произведение. Это тоже верно: Это задание для прохождения на собеседование в одну из крупных украинских IT компаний. Логику ...

  • folax
  • 12 января 2018 г. 8:13

QML - Урок 021. Переключение между окнами в QML

int main(int argc, char *argv[]){ QApplication app(argc, argv); Logic logic; QQmlApplicationEngine engine; engine.rootContext()->setContextProperty("logic", &logic)...

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

Как проверить доступность сервера

Точно!!! Я сейчас так пробую QNetworkReply *replay_news = networkManager_news->get(QNetworkRequest(QUrl(url_news)));connect(networkManager_news, &QNetworkAccessManager::...

ChartView. Отображение метки данных точки серии при наведении курсора

Спасибо большущее за советы! Все получилось через ScatterSeries. Методы remove() как-то сходу не дались, удаляет в первый раз, а потом программа падает... Не стал тратить время и воспользовалс...

QGraphicsScene

спасибо, за подробное объяснение строчки, а с зумом я разобрался, все работает

  • EVILEG
  • 15 января 2018 г. 17:21

Qt webgl

Насчёт проверки подключения клиента я не в курсе. Что касается экземпляров приложения, то из того, что я читал получается, что нет необходимости в нескольких экземплярах для нескольких кл...

  • EVILEG
  • 15 января 2018 г. 11:39

Проблема добавления #DEFINE при сборке CMak'ом

А Вы не пробовали сделать предкомпилированные библиотеки boost под свою систему, а потом уже подключать собранные библиотеки Boost`а? Просто один только boost может собираться на пару гиг...