How to Add Social Share Buttons in Django - Codewolfy

Want to increase your site’s traffic and engagement? The easiest way is to let users share your content. This guide will show you exactly how you can add social share buttons in Django using a simple, yet powerful package that does all the heavy lifting for you.

Regardless of whether it’s a blog, e-commerce, or portfolio, your content should be shareable. We’re going to use the django-social-share package for an easy implementation to share posts on popular platforms such as Facebook, Twitter, and LinkedIn. This will keep your code clean and maintainable.

Installing and Setting Up django-social-share

Now, let’s install and configure the package in your Django project. This should just take a minute. Open up a terminal and run the following command to install the package using pip:

pip install django-social-share

Once installed, you need to add it inside your Django project that it exists. To do this, open your project’s settings.py file and add 'django_social_share' to your INSTALLED_APPS list.

In settings.py:

INSTALLED_APPS = [
    # ... your other apps
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'django_social_share',
]

It’s for basic setup. The package is now ready to use in any of your templates or application.

Displaying Shareable Links in a Template in Django

Now, we can add the actual share buttons. The django-social-share package provides simple template tags that automatically generate the correct share links. You don’t need to manually build URLs or pass them from your views. Let’s imagine you have a blog post detail page and you want to add share buttons below the content.

First, you need to load the package’s template tags at the top of your HTML file. Then, you can call the specific tags for each social media platform you want to include. These tags intelligently use the current page’s URL.

{% extends "base.html" %}
{% load social_share %}
{% load static %} {# Make sure to load static if your CSS is a static file #}

<head>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    {# Add Font Awesome for icons (optional but recommended) #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

{% block content %}
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>

    <hr>
    <h3>Enjoyed this post? Share it!</h3>

    <div class="social-share-buttons">
        {% post_to_facebook object_or_url '<i class="fab fa-facebook-f"></i> Facebook' %}
        {% post_to_twitter "Check out this great post: {{object.title}}" object_or_url '<i class="fab fa-twitter"></i> Twitter' %}
        {% post_to_linkedin object.title '<i class="fab fa-linkedin-in"></i> LinkedIn' %}
        {% post_to_whatsapp object_or_url '<i class="fab fa-whatsapp"></i> WhatsApp' %}
        {% post_to_reddit object.title '<i class="fab fa-reddit-alien"></i> Reddit' %}
        {% send_email object.title "Hey, I thought you would like this post: {{object.get_absolute_url}}" '<i class="fas fa-envelope"></i> Email' %}
    </div>
{% endblock %}

In this example:

  • {% load social_share %} makes the share tags available.
  • {% post_to_facebook %} creates a Django Facebook share button. Which handles sharing on Facebook.
  • {% post_to_twitter %} does the same for Twitter and even lets you customize the tweet text.

The django social share package handles correct links creation, so you can focus on building your app. You can easily add more buttons for different platforms like Reddit, WhatsApp, or Telegram.

Conclusion

This brings you to the end of learning how you can easily add social share buttons in Django. Give your users the ability to become advocates of your content by utilizing the django-social-share package, and create organic traffic that will bring visibility to your site. This is a clean and scalable approach for handling social sharing in Django, ensuring your project scales easily as you continue to grow.