Django - Tutorial 009. Icons of social networks "Share" without JavaScript

Share, Social

Icons of social networks, with which you can share the article from the site, has become part of everyday life for most sites. Web site promotion due to word of mouth is generally pretty efficient variant of growth of many resources, especially if the subject can affect a very large social groups. But now, in general, the question is not about that. And how to fasten a button without using these third-party services, such as buttons or by Yandex fairly well-known service UpToLike , which also allows you to track statistics.

But the main disadvantage of all these services is that they are retarding the work pages the user. Especially in recent upsets me UpToLike. Therefore, a logical step is the introduction of these keys without any JavaScript.

Social Sharing without Javascript

To organize these buttons without the JavaScript, you have to go through all the targeted social networks and check out their API. And to be precise, to find in what URL is passed to the address of the page of your site, the visitor is divided.

For me, the target social networks are:

  • VKontakte
  • Twitter
  • FaceBook
  • Google+
  • Linkedin

Well, if we take into account that the site is developed on the Django, and it is just an example of this framework.

The site for the articles used the Article model, which has a get_absolute_url () method, which is used to obtain the page address without the domain Registry. Also used loading images from a static file.

{% load staticfiles %}
<a href="http://vk.com/share.php?url=https://evileg.com/en/{{ 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/en/{{ 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/en/{{ 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/en/{{ 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/en/{{ article.get_absolute_url }}"
   target="_blank" rel="nofollow">
    <img src="{% static 'images/social/linkedin.png' %}">
</a>

As for where you can take the icons themselves, I recommend a look at MaterialDesignIcons site, there are many different icons in the style of material design, which can be used free of charge, including the available and necessary social networking icons.

Quite a bit of JavaScript

Still, I will add quite a bit of Javascript, which will not load the page. The fact is that, if at all, without the JavaScript, it will open a separate page at the expense of target = "_ blank", in which users can add comments. But the familiar version of the one which opens a separate window. Therefore, it would be better to hang on the onclick event handler that will be in place to open a separate window tab.

{% load staticfiles %}
<a href="http://vk.com/share.php?url=https://evileg.com/en/{{ 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/en/{{ 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/en/{{ 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/en/{{ 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/en/{{ 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>

For Django I recommend VDS-server of Timeweb hoster .

10% refund of hotel reservation amount on Booking
10% refund of hotel reservation amount on Booking
We offer a link with a 10% return on the amount of the order when booking a hotel through Booking
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
m
May 19, 2019, 1:49 a.m.
mahhaki

Qt - Test 001. Signals and slots

  • Result:78points,
  • Rating points2
S
May 17, 2019, 1:14 p.m.
SunBro

Qt - Test 001. Signals and slots

  • Result:42points,
  • Rating points-8
b
May 17, 2019, 4:18 a.m.
banana

C++ - Тест 003. Условия и циклы

  • Result:57points,
  • Rating points-2
Last comments
May 21, 2019, 8:10 p.m.
Дмитрий

Приветствую! Я думаю дойдёт и до этого, но пока изучать его у меня нет желания.
May 20, 2019, 7:20 p.m.
Евгений Легоцкой

Добрый день! Вы не думали разместить репозиторий проекта на GitHub?
P.
May 18, 2019, 2:03 p.m.
PELMYACH .

Спасибо большое! Вскоре буду разбираться!
May 18, 2019, 9:13 a.m.
Евгений Легоцкой

Добрый день! Отнимать значение общего счётчика можно в деструкторе класса кнопки QDynamicButton::~QDynamicButton(){ ResID--;} При этом я бы ещё переустанавливал значения вс...
P.
May 14, 2019, 10:33 p.m.
PELMYACH .

Здравствуйте!А не подскажите, как можно при удалении какой либо кнопки, у щётчика отнять значение?Дабы например четвёртой кнопке соответствовал ID 4, а не 5 скажем
Now discuss on the forum
May 24, 2019, 6:48 a.m.
Евгений Легоцкой

Если там будут только перечисления внутри namespace, то жа, достаточно будет заголовочного файла
May 24, 2019, 6:28 a.m.
Андрей Янкович

работает любой http сервер, и можно использовать обсалютно любой портпример <RemoteRepositories> <Repository> <Url>http://178.124.160.6:3030/A/B&l...;
May 23, 2019, 2:40 p.m.
Михаиллл

Попробовал сделать этот запрос по http и получил json файл. request.setUrl(QUrl("https://jsonplaceholder.typicode.com/todos/1")); Как Вы думаете, почему https не работает и как это и...
May 23, 2019, 10:42 a.m.
Михаиллл

Спасибо, помогло.
May 23, 2019, 6:31 a.m.
Евгений Легоцкой

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

For registered users on the site there is a minimum amount of advertising

EVILEG
About
Services
Join us
© EVILEG 2015-2019
Recommend hosting TIMEWEB