Integrate Social Buttons Into Your Django Project: Tutorial

One possible way to add social buttons to your Django project, is using a package called django-social-buttons¹. You can install it using pip:

python -m pip install django-social-share

For an even more streamlined process, consider either adding or generating a requirements.txt file, and subsequently, install it using the following command:

pip install -r requirements.txt

Locate your settings.py file and navigate to the INSTALLED_APPS variable. Add django_social_share to it:

INSTALLED_APPS = [
             .
             .
             .,
    'django_social_share',

]

Navigate to the TEMPLATES variable and include django.template.context_processors.request if it is not already present:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'your_app/templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
            ],
        },
    },
]

Moving forward, you'll have the capability to load a template tag, enabling you to employ two types of tags: snippet and context.

At the beginning of your HTML template file, be sure to include the tag: `{% load social_share %}`.

The package provides templatetags for:

• X (Twitter)
• Facebook
• Telegram
• Whatsapp
• Linkdin
• Pinterest
• emailto
• Copy to Clipboard

There are two possible ways to include the social buttons, as mentioned earlier: one through snippet tags and another through context tags. A snippet tag is a template that returns HTML code which is customizable, and they are:

{% post_to_facebook <object_or_url> <link_text> <link_class> %}

{% post_to_gplus <object_or_url> <link_text> <link_class> %}

{% post_to_twitter <text_to_post> <object_or_url> <link_text> <link_class> %}

{% post_to_linkedin <object_or_url> <link_class> %}

{% post_to_reddit <text_to_post> <object_or_url> <link_text> <link_class> %}

{% post_to_telegram <text_to_post> <object_or_url> <link_text>  <link_class> %}

{% post_to_whatsapp <object_or_url> <link_text> <link_class> %}

{% save_to_pinterest <object_or_url>  <link_class> %}

{% add_pinterest_script %}

<text_to_post>, if supported by the social platform, can be any text containing valid Django Template code that will appear in the social post.

<object_or_url>: If you pass an object, the package will invoke the get_absolute_url method on it. Alternatively, you can specify the URL as a string for the page.

<link_text> is optional and serves to specify the text that will be inserted into the <a> element.

<link_class>, which is optional, can be employed to include custom CSS classes for styling the <a> HTML element.

{% add_pinterest_script %} is required if you wish to enable users to save the text to Pinterest.

<div class="social-buttons-wrapper">
  {% post_to_facebook post.get_absolute_url "Facebook" %}
  {% post_to_linkedin post.get_absolute_url "LinkedIn" %}
  {% post_to_telegram "{{ post.title }}" post.get_absolute_url "Telegram" %}
  {% post_to_whatsapp post.get_absolute_url" WhatsApp" %}
  {% post_to_reddit "{{ post.title }}" post.get_absolute_url "Reddit" %}
</div>

To customize the appearance of the elements, you'll need to override the default template files for each social platform in your templates folder:

• you_project/templates/django_social_share/templatetags/post_to_twitter.html
• you_project/templates/django_social_share/templatetags/post_to_facebook.html
• you_project/templates/django_social_share/templatetags/post_to_linkedin.html
• you_project/templates/django_social_share/templatetags/post_to_reddit.html
• you_project/templates/django_social_share/templatetags/post_to_telegram.html
• you_project/templates/django_social_share/templatetags/post_to_whatsapp.html
• you_project/templates/django_social_share/templatetags/save_to_pinterest.html

When I customized the links, I've chosen to open a new external window to retain the user on my website. I'll showcase a template file to demonstrate how I did, specifically: /mysite_django/template/django_social_share/templatetags/post_to_facebook.html

<div class="facebook-this">
    <div class="div-button" onclick="((e) => {
        e.preventDefault();
        window.open('{{ facebook_url }}', 'facebook-share-dialog', 'width=626,height=436,left=' + ((window.innerWidth / 2) - 313) + ',top=' + ((window.innerHeight / 2) - 218));
    })(event)">
        <svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 512 512" width="100%" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="currentColor" d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H342.978V319.085h66.6l12.672-82.621h-79.272v-53.617c0-22.603 11.073-44.636 46.58-44.636H425.6v-70.34s-32.71-5.582-63.982-5.582c-65.288 0-107.96 39.569-107.96 111.204v62.971h-72.573v82.621h72.573V512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892z"></path></svg>

    </div>
</div>

The context tag will provide your template with a variable that holds just the URL for the service's share feature. For additional information, please refer to the official GitHub page of the package¹.

To wrap up, the process of integrating social buttons into a Django project is made seamless with the inclusion of the django-social-buttons package. While the documentation, particularly on the context tag, could be more comprehensive, the package significantly contributed to improving my blog. Customizing the appearance and behavior of each button is straightforward, guaranteeing a consistent style across the entire website. I trust that this tutorial proves beneficial to someone, and for more in-depth insights into the package, don't hesitate to explore the official GitHub page.

[1] Github, “Django Social Share”, https://github.com/fcurella/django-social-share