Social-Media-Icons, mit denen ein Artikel von einer Site geteilt werden kann, sind auf den meisten Sites bereits etabliert. Website-Promotion durch Mundpropaganda ist im Allgemeinen eine sehr effektive Option für das Wachstum vieler Ressourcen, insbesondere wenn das Thema sehr große soziale Gruppen betreffen kann. Aber generell geht es jetzt nicht darum. Und darüber, wie man solche Buttons befestigt, ohne Dienste von Drittanbietern zu verwenden, wie Buttons von Yandex oder den ziemlich bekannten Dienst UpToLike , mit dem Sie auch Statistiken verfolgen können.
Der Hauptnachteil all dieser Dienste besteht jedoch darin, dass sie die Seiten des Benutzers verlangsamen. Besonders in letzter Zeit hat mich UpToLike verärgert. Daher ist es durchaus logisch, solche Buttons ohne JavaScript zu implementieren.
Social Sharing benötigt Javascript
Um diese Art von Schaltflächen ohne JavaScript zu organisieren, müssen Sie alle sozialen Zielnetzwerke durchlaufen und deren API lesen. Und um genau zu sein, finden Sie die URL, unter der die Adresse der Seite Ihrer Site, die der Besucher teilt, weitergegeben wird.
Für mich sind die sozialen Zielnetzwerke:
- VKontakte
- Google+
- Linkedin ist ein professionelles soziales Netzwerk, das in erster Linie dazu dient, berufliche Verbindungen aufzubauen.
Nun, wenn Sie bedenken, dass die Site in Django entwickelt wird, dann wird ein Beispiel nur für dieses Framework sein.
Die Site verwendet das Artikelmodell für Artikel, das eine get \ _absolute \ _url ()-Methode hat, die verwendet wird, um die Seitenadresse ohne Berücksichtigung der Domain zu erhalten. Das Laden von Bildern aus statischen Dateien wird ebenfalls verwendet.
Diese Informationen sollten reichen, daher liegt nun der Code für alle fünf sozialen Netzwerke im Studio:
{% 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>
Wo Sie die Symbole selbst erhalten können, empfehle ich Ihnen, sich die Website MaterialDesignIcons anzusehen. Es gibt viele verschiedene Symbole im Materialdesign-Stil, die Sie kostenlos verwenden können, einschließlich die notwendigen Social-Media-Icons.
Nur ein bisschen JavaScript
Trotzdem werde ich einiges an Javascript hinzufügen, das die Seite nicht lädt. Tatsache ist, dass wenn kein JavaScript vorhanden ist, eine separate Seite auf Kosten von target = "\ _ blank" geöffnet wird, in der der Benutzer Kommentare hinzufügen kann. Die übliche Option ist jedoch die, bei der ein separates Fenster geöffnet wird. Daher wäre es besser, Handler an das Ereignis onclick zu hängen, wodurch ein separates Fenster anstelle eines Tabs geöffnet wird.
{% 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>
Für Django empfehle ich Timeweb VDS-Server .
