Skip to main content

Django

Installation

We're going to use flyyer/flyyer-python to format Flyyer URLs in a context processor to render meta-tags into the <head /> of your views dynamically with few lines of code.

Alternatively, you can set it with django-meta meta-tags helper, just jump to it ↓.

1. Install flyyer module

Install it with Poetry, the modern package manager

Terminal.app
poetry add flyyer

2. Create a myapp/custom_context_processors.py file

Find your project identifier here. If you don't have a project yet, create one here.

myapp/custom_context_processors.py
from django.http.request import HttpRequest
from flyyer import Flyyer

# ...

def flyyer_href(request: HttpRequest):
flyyer = Flyyer(
project="your-project-identifier",
path=request.get_full_path(), # set current pathname dynamically
)
return {'flyyer_href': flyyer.href()} # pass smart image link to views templates

3. Add myapp.custom_context_processors.flyyer_href to project settings

myapp/settings.py
# ...
TEMPLATES = [
{
# ...
'OPTIONS': {
# ...
'context_processors': [
# ...
'myapp.custom_context_processors.flyyer_href',
],
},
},
# ...
note

If you're using Django < 1.8, it should work like this:

myapp/settings.py
# ...
TEMPLATE_CONTEXT_PROCESSORS = (
# ...
'myapp.custom_context_processors.flyyer_href',
)

4. Add the meta-tags to the <head /> to your base.html

When added to the base.html they should be added to each one of your pages. Please make sure they are not overwritten elsewhere.

myapp/templates/base.html
<!-- ... -->

<head>
<meta property="og:image" content="{{ flyyer_href }}" />
<meta name="twitter:image" content="{{ flyyer_href }}" />
<meta name="twitter:card" content="summary_large_image" />

<!-- [Recommended] Keep your original og:image handy for your project -->
<!-- <meta name="flyyer:default" content={{your-original-og-image}} /> -->

<!-- ... -->
</head>

<!-- ... -->
note

If you inspect the <head /> of your HTML you should see the og:image and twitter:image tags with cdn.flyyer.io URLs with your project identifier and current pathname on it. If you're having trouble, please make sure they are not overwritten elsewhere.

5. Voilà 🎉

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Installation with django-meta

The django-meta module helps you rendering meta-tags efficiently.

1. Install flyyer module and django-meta

Install them with Poetry, the modern package manager

Terminal.app
poetry add flyyer django-meta

2. Complete settings.py

You can Find your project identifier here. If you don't have a project yet, create one here.

myapp/settings.py
from flyyer import Flyyer

INSTALLED_APPS = [
# ...
'meta',
]

# ...

FLYYER_DEFAULT = {
'project': "your-project-identifier",
}

META_SITE_DOMAIN = 'mydomain.com'
META_USE_OG_PROPERTIES = True
META_USE_TWITTER_PROPERTIES = True
META_DEFAULT_IMAGE = Flyyer(**FLYYER_DEFAULT).href()
META_TWITTER_TYPE = "summary_large_image"

3. Pass the current pathname to Flyyer instance

In Django there are function views and class views that may render HTML. Here you have an example for each one of them.

mymodel/views.py
from django.http import HttpRequest
from django.shortcuts import render
from django.conf import settings
from meta.views import Meta
from flyyer import Flyyer
from .models import Choice, Question

# Flyyer smart image link helper
def flyyer_href(current_pathname):
flyyer = Flyyer(**{
**settings.FLYYER_DEFAULT,
'path': current_pathname,
})
return flyyer.href()

# Class view example
class DetailView(generic.DetailView):
model = Question
template_name = 'polls/detail.html'

def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
question = context['object']
context['meta'] = Meta(
title=f'Question: #{question.id}',
description=question.question_text,
image=flyyer_href(self.request.get_full_path()),
)
return context

# Function view example
def index(request: HttpRequest):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
meta = Meta(image=flyyer_href(request.get_full_path()))
context = {'latest_question_list': latest_question_list, 'meta': meta}
return render(request, 'polls/index.html', context)

Check other ways to integrate Flyyer on Django views. Then don't hesitate to contribute to the docs.

4. Render meta-tags on views

Put the following code in your base.html.

{% load meta %}

<!DOCTYPE html>
<html lang="en">

<head>
{% include 'meta/meta.html' %}
<!-- ... -->
</head>

<!-- ... -->
note

If you inspect the <head /> of your HTML you should see the og:image and twitter:image tags with cdn.flyyer.io URLs with your project identifier and current pathname on it. If you're having trouble, please make sure they are not overwritten elsewhere.

5. Voilà 🎉

Now you're able to manage your link previews from your dashboard, create content from templates while preserving your brand style and export it as social media formats.

Go to your dashboard 🚀

Advanced usage

Signed URLs

The package flyyer supports HMAC and JWT signatures.

Find your secret key here under Signed URLS, and enable the signing strategy you desire.

If you integrated Flyyer with a context processor then set it like below.

myapp/custom_context_processors.py
from django.http.request import HttpRequest
from flyyer import Flyyer

def flyyer_href(request: HttpRequest):
flyyer = Flyyer(
project="your-project-identifier",
path=request.get_full_path(),
secret="your-secret-key",
strategy="JWT", # or "HMAC"
)
return {'flyyer_href': flyyer.href()} # pass smart image link to views templates

# ...

If you integrated Flyyer with django-meta, then in settings.py set FLYYER_DEFAULT as follows.

myapp/settings.py
# ...

FLYYER_DEFAULT = {
'project': "your-project-identifier",
'secret': "your-secret-key",
'strategy': "JWT", # or "HMAC"
}

# ...