≡ Menú

Django y el protocolo OpenGraph

Ya vimos en el artículo anterior como integrar el protocolo OpenGrap en Genesis Framework y ahora veremos como hacer esto mismo en Django, algo que todavía más simple.

Vamos a agregar las mismas propiedades que en un blog con WordPress, así que agregamos directamente las propiedades en nuestra plantilla de páginas, y en algunas propiedades usamos variables y en otras constantes, por ejemplo en og:site_name, og:locale, og:type, al igual que en el artículo anterior.

Pero observa la forma en que generamos la propiedad og:title, mientras que en WordPress necesitamos

<?php echo the_title_attribute( 'echo=0' ); ?>

en Django basta con {{entry.title}}, veamos las dos líneas juntas:

<meta property="og:title" content="<?php echo the_title_attribute( 'echo=0' ); ?>" />
<meta property="og:title" content="{{entry.title}}">

Este es un ejemplo de la eficiencia que puedes obtener al programar tu blog con Django.

Otro ejemplo es como generamos la imagen, que es la misma para todos los post1 y usamos la función static y le pasamos como parámetro la ruta del archivo, que Django busca y convierte en una URL correctamente formada.

<meta property="og:image" content="https://yo.toledano.org{% static 'img/namespace.logo.png' %}">

Antes de presentar el código completo, debemos recordar que el código se escribe directamente en la plantilla, en lugar de procesarlo primero en un una función que es evaluada en cada solicitud, por lo que volvemos a ganar eficiencia en comparación con WordPress.

Ahora si, el bloque completo.

{% block metafacebook %}
  <meta property="og:site_name" content="namespace.mx - Programamos en Python, Django y WordPress">
  <meta property="og:locale" content="es_LA">
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{entry.title}}">
  <meta property="og:image" content="http://namespace.mx{% static 'img/namespace.logo.png' %}">
  <meta property="og:image:type" content="image/jpeg">
    <meta property="og:image:width" content="200">
    <meta property="og:image:height" content="200">
  <meta property="og:description" content="{{ entry.resumen|truncatewords_html:30|striptags|safe }}">
  <meta property="og:url" content="http://namespace.mx{{ entry.permalink }}">
{% endblock metafacebook %}

  1. Más adelante, en un ejemplo más avanzado veremos como obtener las imágenes de un post. 

Sobre el autor: Auditor Líder ISO 9000 | Desarrollo Web Full Stack | JavaScript · Angular · VueJS · EmberJS | WordPress Advocator | Programador Django/Python | Lector | Generación X | Soy de Tlaxcala