Evgenij LegotskojSept. 24, 2016, 7:59 p.m.

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

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.

ADS

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 .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Timeweb

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting
k

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

  • Result:64points,
  • Rating points-1
AG

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:30points,
  • Rating points-10
NK

C++ - Test 001. The first program and data types

  • Result:33points,
  • Rating points-10
Last comments
R

Установка драйвера QIBASE (Firebird) Qt 6.2.1 на openSUSE Tumbleweed

Just that is necessary. A good theme, I will participate. Together we can come to a right answer. https://gay0day.com
C
Y
  • Yar
  • Nov. 15, 2021, 2:33 a.m.

QML - Lesson 004. Signals and Slots in Qt QML

У связывания интерейса прогрммы с ядром через контекст (context->setContextProperty("appCore", &appCore);) есть один существенный недостаток, упоминание о котором я нигде не нашел, а выяв…
v
  • v
  • Nov. 9, 2021, 10:07 p.m.

Сборка драйвера QMYSQL (MariaDB) Windows 10 x64 QT 5.13.0 Mingw73_64

Спасибо, добрый человек! Перелопатил весь stackoverflow в поисках ответа почему MySql....no , не осознавая что mingw32-make clean не очищает то что надо. После удаления вышеуказаных…

Django - Tutorial 045. How to move model from one application to another

у меня была проблема что у меня в кубере автоматом миграция запускалась сделал так (как вариант решения, добовлял каждой миграции RunSQL): operations = [ migrations.RunSQL(''' …
Now discuss on the forum
s

Ключевое слово class

Разобрался,на стаковерфлоу нашел топик и понял почему так происходило .
IP

For each

For each разработан Microsoft для своего компилятора VS, в стандарте его нет, на официальном сайте не рекомендуется его использовать
U

Qt - как скомпилировать 32bit-программу под Linux 64bit?

Неожиданно появилась необходимость скомпилировать программу для 32-разрядного Linux-а сидя на 64-разрядном... Читал-листал интернеты, мало что понял... Проверил версию: gcc -v Target:…

Авторизация в приложении.

Ничего не надо скачивать, всё должно работать "из коробки".
o

Создание страницы в QML, где нужно выровнить текст по всей ширине экрана и создать скроллинг

https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html https://evileg.com/ru/post/186/
About
Services
© EVILEG 2015-2021
Recommend hosting TIMEWEB