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 HttpRequestfrom 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 = TrueMETA_USE_TWITTER_PROPERTIES = TrueMETA_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 HttpRequestfrom django.shortcuts import renderfrom django.conf import settingsfrom meta.views import Metafrom flyyer import Flyyerfrom .models import Choice, Question
# Flyyer smart image link helperdef flyyer_href(current_pathname):    flyyer = Flyyer(**{        **settings.FLYYER_DEFAULT,        'path': current_pathname,    })    return flyyer.href()
# Class view exampleclass 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 exampledef 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 HttpRequestfrom 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"}
# ...