Django

Repository: https://github.com/flayyer/integration-examples/tree/main/examples/django

Basically, we are going to use flayyer/flayyer-python to format Flayyer URL and nephila/django-meta to render them into the <head /> of your views.

Install#

Poetry
Pipenv
Pip

Install it with Poetry, the modern package manager.

Terminal.app

poetry add flayyer django-meta

Import Flayyer, add meta to INSTALLED_APPS and setup default values:

projectname/settings.py

from flayyer import Flayyer

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # ....
    'meta',
]

FLAYYER_DEFAULT = {
    'tenant': "my-company",
    'deck': "my-project",
    'template': "main",
}

META_SITE_PROTOCOL='https'
META_SITE_DOMAIN='example.com'
META_SITE_NAME='Flayyer Example'
META_INCLUDE_KEYWORDS=['flayyer', 'django', 'seo']
META_DEFAULT_KEYWORDS=META_INCLUDE_KEYWORDS
META_USE_OG_PROPERTIES=True
META_USE_TWITTER_PROPERTIES=True
META_USE_SCHEMAORG_PROPERTIES=True
META_USE_TITLE_TAG=True
META_DEFAULT_IMAGE=Flayyer(**FLAYYER_DEFAULT).href() # here we use Flayyer
META_TWITTER_TYPE="summary_large_image"
META_TWITTER_SITE="@example"
META_TWITTER_AUTHOR="@example"

To render the meta tags, simply add the meta dictionary/object to the template context, and add this inside the <head> tags in your main layout file:

projectname/templates/base.html

{% load static %}
{% load meta %}

<!DOCTYPE html>
<html {% meta_namespaces_schemaorg %} lang="en">
<head {% meta_namespaces %}>
  <link rel="stylesheet" href="style.css">

  {% include 'meta/meta.html' %}

  {% block head %}
  {% endblock %}
</head>

<body>
  <nav>
    {% block nav %}
    <ul>
      <li>
        <a href="/">
          Home
        </a>
      </li>
    </ul>
    {% endblock %}
  </nav>

  <main id="content">
    {% block content %}
    {% endblock %}
  </main>
</body>
</html>

Usage#

On its most simple form: all you have to do is set an instance of Meta from meta.views as context['meta'] on your view.py files.

Make sure every view has a meta value in their context, otherwise <meta /> won't be rendered.

context['meta'] = Meta() # use defaults from settings.py

To render Flayyer URL as og:image and twitter:image:

from flayyer import Flayyer

flayyer = Flayyer(tenant='my-company', deck='my-deck', template='my-template')
context['meta'] = Meta(image=flayyer.href())

Function views#

The most low-level views are just functions. Make sure to pass the context back to the render(...) method.

projectname/views.py

from django.http import HttpRequest # remove if you don't use types
from django.shortcuts import render
from meta.views import Meta # from django-meta

def index(request: HttpRequest):
    context = {}
    context['meta'] = Meta() # use defaults from settings.py
    return render(request, 'polls/index.html', context)

To render a Flayyer template when a page is shared can be done by overriding default values:

projectname/views.py

from django.http import HttpRequest # remove if you don't use types
from django.shortcuts import render
from django.conf import settings
from meta.views import Meta # from django-meta
from flayyer import Flayyer, FlayyerMeta

def about(request):
    flayyer = Flayyer(**{
      **settings.FLAYYER_DEFAULT,
      'variables': {
        'title': 'Get to know us',
      },
      'meta': FlayyerMeta(id='about'), # for analytics
    })
    context = {}
    context['meta'] = Meta(
      title='About',
      description='Lorem ipsum',
      image=flayyer.href(),
    )
    return render(request, 'polls/index.html', context)

Class views#

Official docs

Class-based views provide an alternative way to implement views as Python objects instead of functions. They do not replace function-based views, but have certain differences and advantages when compared to function-based views.

If you don't override the context_object_name attribute of the Views, the current object in the context is available as context['object'] for django.views.generic.DetailView and as context['object_list'] for django.views.generic.ListView.

Similar to the previous section, we need to set an instance of Meta to the context['meta'].

from django.views import generic
from django.conf import settings
from meta.views import Meta # from django-meta
from flayyer import Flayyer, FlayyerMeta

from .models import Question

# GET /polls/<int:pk>/
class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'
    # context_object_name = 'object' # defaults to `object`

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        question: Question = context['object'] # see 'context_object_name'
        flayyer = Flayyer(**{
            **settings.FLAYYER_DEFAULT,
            'template': 'item',
            'variables': {
                'title': question.question_text,
            },
            'meta': FlayyerMeta(id=question.id),
        })
        context['meta'] = Meta(
            title=f'Question: #{question.id}',
            description=question.question_text,
            image=flayyer.href(),
        )
        return context

Another way of setting the <meta /> tags is provided by django-meta:

from django.views import generic
from django.conf import settings
from meta.views import MetadataMixin
from flayyer import Flayyer

from .models import Question

class IndexView(MetadataMixin, generic.ListView):
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'

    def get_meta_image(self, context):
        n = len(context['latest_question_list']) # see context_object_name
        variables = { 'title': f'There is {n} questions' }
        return str(Flayyer(**settings.FLAYYER_DEFAULT, variables=variables))

    def get_queryset(self):
        """Return the last five published questions."""
        return Question.objects.order_by('-pub_date')[:5]

If you inspect the <head /> of your HTML you should see the og:image tags with URLs to flayyer.io.