Simple Twitter Card : NOS et Twitter sont sur un bateau…

Il y a maintenant un bon moment que j’ai créé une petite application pour Novius OS. Elle avait pour but de faire que les tweets relayant un lien de mon blog affiche une twitter card. Ça permet d’avoir un aperçu de l’article avant même de cliquer. En plus, ça rend le tweet joli.

Bref j’ai fait cette application puis… Je ne l’ai jamais installée ! C’est maintenant chose faite ! Avec en bonus un petit article qui explique comment elle marche, et comment l’utiliser pour le commun des mortels !

Côté utilisateur

Quand je fais une application pour NOS, je mets un point d’honneur à ce qu’elle soit utilisable par quelqu’un qui ne code pas. Ça me semble être le minimum pour que quelqu’un envisage d’utiliser Novius OS pour son site internet.

Je me suis donc nettement inspiré de ce que propose wordpress pour la mise en place de Twitter Card. En voici un aperçu.

Comme vous pouvez le constater, c’est très simple. Vous avez le strict nécessaire pour paramétrer vos twitter cards. Vous choisissez le type de card (parmis types officiel qu’autorise twitter), le format de l’image et une image par défaut si vous le voulez. N’oubliez d’ailleurs pas de valider votre domaine auprès de twitter. Mais ça c’est expliqué dans la partie « validation » de l’appli. 😉

Par défaut, vos twitter cards seront présentes sur vos pages, articles de blog et posts de news. Si jamais vous en voulez plus, il faudra mettre les mains dans le cambouis, mais rassurez-vous, il n’y a rien de compliqué.

Côté développeur

Imaginons que pour une raison x ou y, vous vouliez insérer des twitter cards sur un item qui ne soit ni une actu, ni un billet et encore moins une page. Vous voulez que vos tweets sur les fiches produits de votre catalogue ait de la gueule ? Rien de plus simple. L’API de Novius OS possède de nombreux secrets et c’est le moment de les utiliser.

Les twitter cards utilisent le système de behaviour. Comme décrit dans la doc, les behaviours permettent à différents models de partager un comportement. Ici, notre comportement c’est bien évidemment d’intégrer une twitter cards dans la page de l’item lorsqu’il est affiché.

Mais comment savoir qu’un item est affiché ? Quand est ce que le behavior se déclenche ? Comment récupère t-il les données à intégrer dans la carte ?

Répondons tout d’abords à cette dernière question en regardant le code de l’appli.

//Add the twitter card behavior on pages
\Event::register_function('config|noviusos_page::model/page', function(&$config)
{
    if (!\Arr::get($config, 'behaviours')) $config['behaviours'] = array();
    $config['behaviours']['Twitter\Card\Orm_Behaviour_TwitterCard'] = array(
        'fields' => array(
            'title' => 'page_title',
            'summary' => array(
                'page_meta_description',
                'wysiwygs->content',
            ),
        ),
        'type' => 'summary', //Summary type is forced beacause there is no image on pages
    );
});

 

Ici, le behavior est ajouté sur les pages. C’est à ce moment que l’on dit au behavior quelles propriétés de l’item doivent aller dans les propriétés de la carte. Le code parle de lui-même : le titre de la carte sera le titre de la page, et sa description sera en priorité la meta description et, si elle est vide, ce sera le contenu qui sera tronqué et inséré comme description. On note aussi que le type de carte peut être spécifié pour chaque model, ce qui évite d’avoir un type « photo » sur un item qui n’en contient pas.

Maintenant que nos items ont dit au behaviour comment ils devaient remplir la carte, il faut que le behavior sache quand agir pour insérer la carte. Deux solutions ici. Soit, votre application utilise déjà l’API de NOS, et vous avez donc toutes mes félicitations : le travail est terminé ! Soit il faut aller dans votre application à l’endroit où votre controller va gérer l’affichage d’un de vos items (de toute manière, mieux vaux y aller pour vérifier 😉 ).

Dans le meilleur des mondes, il y a quelque chose qui ressemble à ça (code repris de l’application blognews).

\Nos\Nos::main_controller()->setItemDisplayed(
    $post,
    array(
        'meta_description' => $post->post_summary,
        'meta_keywords' => implode(',', $meta_keywords),
    ),
    array(
        'title' => ':page_title - :title',
    )
);

 

Ce qui nous intéresse ici c’est l’appel à la méthode « setItemDisplayed« . Cette méthode fait exactement ce qu’elle dit : vous lui passez un item en paramètre, et ce dernier sera considéré comme étant l’item affiché. Une fois ceci fait, l’application fera le reste et affichera la carte correspondant à votre item. La méthode « setItemDisplayed » permet d’ailleurs bien d’autres choses comme changer le titre ou le h1 de votre page sans que vous ayez à vous en préoccuper. Elle est pas belle la vie ?

Bref c’est ici que je vous quitte, en espérant qu’une belle twitter card s’affichera quand vous partagerez l’article sur twitter 😉