대부분의 웹사이트에서 소셜 공유 버튼을 쉽게 찾아볼 수 있습니다. 이러한 버튼은 전자상거래 사이트나 블로그, 제휴 마케팅 사이트에서 매우 중요한 역할을 합니다. 웹 개발자라면 누구나 자신의 웹사이트를 방문자들이 좋아하고, 방문자들이 소셜 미디어를 통해 자발적으로 사이트를 널리 알려주기를 바랄 것입니다.
이 글에서는 Django를 활용해 자동화된 웹사이트 소셜 공유 버튼을 만드는 방법을 단계별로 살펴보겠습니다.
실습 예제
1. 프로젝트 및 앱 생성
먼저 Django 프로젝트와 앱을 생성합니다.
2. django-social-share 패키지 설치
소셜 공유 기능을 손쉽게 구현할 수 있도록 도와주는 django-social-share 패키지를 설치합니다.
pip install django-social-share
3. settings.py 설정
settings.py 파일의 INSTALLED_APPS 목록에 django_social_share 앱을 추가합니다.
INSTALLED_APPS += ['django_social_share']
4. 프로젝트 urls.py 설정
프로젝트의 urls.py 파일을 아래와 같이 작성하여 앱의 URL을 연결합니다.
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('socialShare.urls')) # 앱의 urls 파일
]5. 앱 urls.py 설정
앱의 urls.py 파일에서 뷰(view)를 렌더링하도록 경로를 설정합니다.
from django.urls import path,include
from . import views
urlpatterns = [
path('', views.home, name="home")
]6. views.py 작성
views.py 파일에 홈 페이지를 렌더링하는 간단한 함수를 작성합니다.
from django.shortcuts import render
# 여기에 뷰를 생성합니다.
def home(request):
return render(request,"home.html")여기서는 프론트엔드 HTML 파일을 단순히 렌더링하는 방식으로 구현했습니다.
7. 템플릿 생성
앱 폴더 안에 templates 폴더를 만들고, 그 안에 home.html 파일을 생성한 후 다음과 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>TUT</title>
</head>
<body>
{% load social_share %}
{% post_to_facebook object_or_url "<p style='color: green;'>facebook</p>" %}
{% post_to_linkedin object_or_url %}
{% post_to_telegram "New Song: " object_or_url %}
</body>
</html>위 코드에서는 프론트엔드 HTML을 작성하고, {% load social_share %} 태그로 라이브러리를 로드한 뒤, post_to_(소셜 미디어 이름) 형식의 템플릿 태그 뒤에 object_or_url을 지정하여 어떤 소셜 미디어에 무엇을 공유할지 설정했습니다. object_or_url에는 웹사이트 링크가 전달됩니다.
템플릿 태그 안에 원하는 스타일, 클래스, 아이콘 등 어떤 요소든 자유롭게 추가할 수 있습니다. 이제 실제 출력 결과가 어떻게 보이는지 확인해 보겠습니다.
실행 결과
이처럼 django-social-share 패키지를 활용하면 복잡한 API 연동 없이도 페이스북, 링크드인, 텔레그램 등 다양한 소셜 미디어 공유 버튼을 몇 줄의 코드만으로 간편하게 구현할 수 있습니다. 추가로 트위터, WhatsApp 등 다른 플랫폼도 유사한 템플릿 태그(post_to_twitter 등)로 지원되므로, 필요에 따라 확장하여 사용하시기 바랍니다.