How to Integrate Social Share Button in Django?
Hi Dev,
Today our leading topic is how to integrate social share button in django. step by step explain how to add social share button in django. I’m going to show you about how to add social media icons in django. if you want to see example of social-share links in django then you are a right place. Alright, let’s dive into the steps.
So, Sometimes we are showing social share buttons on most of the websites they play an important role in ecommerce or any blogging or affiliate sites. as a web developer, you surely want people to like your website and want them to tell about your site to others on social media.
django-social-share it is python’s lightweight and dependency-free module, which is used to integrate a social share button in django app.
Here i explained simply step by step example of how to integrate social share button in django.
Step 1: Create a ProjectIn this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:
django-admin startproject exampleStep 2: Create a App
Now we'll create a single app called core to store a list of post names. We're keeping things intentionally basic. Stop the local server with Control+c and use the startapp command to create this new app.
python3 manage.py startapp coreStep 3: Update setting.py
Then update INSTALLED_APPS within our settings.py file to notify Django about the app.
settings.py
....
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'core',
]
Step 4: Installing the django-social-share library
In this section first of all we need to install django-social-share library through below following command:
pip install django-social-shareStep 5: Creating the Views
In this step, we need to configure views. The youtube page will just be a template and we will help to download to youtube video in backend. open the core/views.py file and add:
core/views.py
from django.shortcuts import render
# Create View
def home(request):
return render(request, "home.html")
Step 6: Creating the Templates
Next, then with your text editor create new templates files: core/templates/home.html file and the add:
core/templates/home.html
<!DOCTYPE html>
<html lang="en">
{% load social_share %}
<head>
<meta charset="UTF-8">
<title>Profile Image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.font-size{
font-size: 30px !important;
}
.linkedin-this{
margin-top: 10px;
}
body{
background-color: #f7fcff;
}
</style>
</head>
<body>
<div class="container mt-5 pt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h4>How to Add Social Share button in Django? - <span class="text-primary">Tuts-Station.com</span></h4>
</div>
<div class="card-body">
<div class="row text-center">
<div class="col-md-12 d-flex">
{% post_to_facebook object_or_url "<i class='fa fa-facebook-official font-size p-2'></i>" %}
{% post_to_linkedin object_or_url %}
{% post_to_telegram "New Song: " object_or_url "<i class='fa fa-telegram font-size p-2'></i>" %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 7: Creating URLs
In this section, we need a urls.py file within the core app however Django doesn't create one for us with the startapp command. Create core/urls.py with your text editor and paste below code.
core/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name="home"),
]
Next, we require to add a URL path for our example app which can be done by importing include and setting a path for it.
example/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('core.urls')),
]
Run the Server
In this step, we’ll run the local development server for playing with our app without deploying it to the web.
python manage.py runserver
Next, go to the http://localhost:8000 address with a web browser.
I hope it will help you....
Happy Pythonic Coding!