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
- Google+
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 .
