Integrating FaceBook Like and Comment in Our Django Web Application

Facebook Integrations in Django

In this article, I will show you how you can integrate Facebook likes and Comment in Our Django Web Application. Integrating FaceBook Like & Comment in Our Django Web Application has become so much easy that every beginner progammer can do it. So before starting, I am assuming that you have some knowledge of the below topics in Django.

• Dynamic URLs
• Basic HTML

if you are comfortable with the above then you are good to go. you don’t need to be a master in these topics but at least a basic knowledge is required to continue with this tutorial.

I am making a new project to avoid any confusion, but you can implement this as per your requirements. I am using windows here but commands are not much different for Linux and mac except the commands you use for changing directory and run the server. so start with the below commands in your project’s parent folder.

• Activate the virtual environment if you had created it before in this folder. in my case, I have installed Django globally so I will directly run the commands without activating the virtual environment.

C:\Users\saurav>django-admin startproject fbcomnt

• now go to the project directory and start the server and open that localhost URL in your browser.

C:\Users\saurav>cd fbcomnt

C:\Users\saurav>fbcomnt>python manage.py runserver

• if you see the below image that means that your project has been set up successfully.

• Now open that folder in your favorite text editor. I recommend sublime text or vs code. if you are using vs code then in CMD type the command below.   

C:\Users\saurav>fbcomnt>code . 

The project directory structure should be like this:

• Now do the below changes in your views.py, urls.py, and settings.py. you will not have views.py by default so create that file and create the template too and the final code should look like this.

Settings.py

Urls.py

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.index),
    path('my_list/<int:num>/', views.comnt),
]

View.py ( need to be created )

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def comnt(request,num):
    data= {'num':num}
    return render(request,'comnt.html',data)

frontend/index.html

Now type the Facebook developer plugin into your browser search bar and click on the first link that appears or you can go to this link fb comment plugin page.

Here you will see many links on the left sidebar which are self-explanatory. Now click on get code button but before that change the url parameter as per your website url. In my case, I will use my Localhost urls.

Now copy the first code provided, on the top of the body tag in your codebase, and paste the second code wherever you want to see your comments. note that you need to copy the first code for one time only as you do with bootstrap CDN.

Here if you analyze my code then you notice that I have used dynamic URLs in the data-href attribute. the user enters the number in the URLs bar and the number is caught by the int as described in the urls.py after that number is passed to the view function which sends that number to the template file. now we can use that number within {{num}} templates. also, remember that the comments are fetched according to the URLs and stored by Facebook itself.

Here below is the reference code for this:

frontend/comnt.html

Note: you can repeat the same process with the Like and other Page Button

Now, Save all the Change and restart the server. if you have done everything correctly then you will see the comments on browser and if not then you may have done something wrong. Comment below your Queries and i will try to answer them as per my best.