0 commentaire
On vous le dit depuis ses tout débuts, Kiubi permet une liberté totale dans la réalisation d’un site. Cela signifie, entre autres, que vous pouvez étendre le périmètre fonctionnel de la plateforme en intégrant des services tiers. C'est possible pour n'importe quel site mais également, pour certains services, au sein même de la console d’administration.

Mais l’affirmer n’est pas tout et comme le suggère l’adage selon St-Twitter :
“Twitpic or it didn’t happened !“
nous allons illustrer notre propos avec l’intégration de contenus issus de Dribbble et leur gestion directement depuis la console d'administration.

Ce tutoriel va aborder deux cas d'usage : afficher la fiche d'un profil et gérer l'affichage des derniers shots de Players choisis (par exemple les membres d'une équipe).

Les exemples cités ici se basent sur le thème Shiroi, disponible pour tous les Kiubistes. Pour les exploiter sur un thème personnalisé, pas de panique : cela fonctionne de la même manière, seules vos CSS seront à adapter.

Au préalable : Ajouter un plugin jQuery

La récupération des données de Dribbble va se faire grâce au plugin jQuery Jribbble. Par conséquent votre site doit intégrer la librairie jQuery. D'après certaines statistiques plus de 90% des sites utilisant javascript intègrent jQuery*. Il y a donc de fortes chances pour que jOuery soit déjà présent sur le site (c'est le cas pour le thème Shiroi). Mais au cas où, voici comment faire :

Dans vos templates de pages il suffit de rajouter une ligne incluant jQuery :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Vous pouvez utiliser une autre version de jQuery ou inclure le fichier dans votre thème et l'insérer de cette manière dans votre html :
<script type="text/javascript" src="{racine}/{theme}/{lg}/templates/jquery.min.js"></script>
Il suffit d'en faire de même pour le plugin Jribbble, auquel on rajoute une petite feuille de style pour les besoins de cet article :
<script type="text/javascript" src="{racine}/{theme}/{lg}/templates/jribbble.js"></script>
<link href="{racine}/{theme}/{lg}/templates/jribbble.css" rel="stylesheet" type="text/css" media="screen" />
On en profite pour remercier Tyler Gaw pour la création de ce plugin, dont les sources sont disponibles sur Github.

1er exemple : Intégrer un profil Dribbble

Le but est de pouvoir afficher un profil Dribbble à n'importe quel endroit du site. Pour cela nous allons ajouter un nouveau type de billet au CMS en créant le répertoire /theme/fr/billets/fiche_dribbble/ via l'accès FTP au thème graphique et en y créant les fichiers config.xml et index.html.
 
La configuration du type du billet se fait dans le fichier config.xml. Cela permet de construit automatiquement le formulaire d'édition du billet dans la console d'administration :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE type SYSTEM "http://www.kiubi-admin.com/DTD/typesbillets.dtd">
<type tri="1">
<desc>Fiche Dribbble</desc>
    <listechamps>
        <champ champ="titre" type="text" intitule="Identifiant Dribbble" />
    </listechamps>
</type>
Dans ce billet, que nous avons nommé Fiche Dribbble, nous utilisons le champ titre pour saisir l'identifiant Dribbble de l'utilisateur dont on souhaite afficher le profil.

Dans la console d'administration du site nous allons créer une nouvelle page, que l'on nommera Dribbble pour plus de commodité, et dans laquelle nous allons rédiger un billet du type de celui que nous venons de créer, à savoir Fiche Dribbble.

Il suffit de connaître un identifiant Dribbble pour renseigner le billet. Par exemple (et totalement au hasard) trolldidees :



Reste à définir le template HTML pour le rendu du billet. C'est là qu'intervient le fichier index.html du billet, dont voici le contenu :
<!-- BEGIN: main -->
    <script type="text/javascript">
    jQuery.jribbble.getPlayerById('{titre}', function(data){
        var div = jQuery('#dribbble_{titre}');
        div.find('div a').attr('href', data.url);
        if(data.avatar_url) {
            div.find('div a').append('<img src="'+data.avatar_url.replace('normal', 'small')+'" alt=""/>');
        }
        div.find('h3').html(data.name+' / '+data.location);
        div.find('h4 a').attr('href', data.url).html(data.url);
        div.find('li:eq(0)').html('<b>Shots: </b>'+data.shots_count);
        div.find('li:eq(1)').html('<b>Following: </b>'+data.following_count);
        div.find('li:eq(2)').html('<b>Followers: </b>'+data.followers_count);
        div.find('li:eq(3)').html('<b>Liked: </b>'+data.likes_received_count);
        div.show();
    });
    </script>
    <div class="playerProfile" style="display:none;" id="dribbble_{titre}">
        <img src="http://dribbble.com/images/dribbble-tm.png" alt=""/>
        <h3></h3>
        <h4><a href="" target="_blank"></a></h4>
        <div>
            <a href="" target="_blank"></a>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
<!-- END: main -->

Quelques explications sur ce code

Nous récupérons dans un premier temps les données Dribbble de l'identifiant symbolisé par la balise {titre} qui est le nom du champ utilisé dans le fichier config.xml.

Puis nous complètons la structure HTML avec les données de l'utilisateur, à savoir son adresse Dribbble et son avatar, que l'on affiche en mode réduit alors que l'url renvoyée correspond à l'avatar original.

On ajoute ensuite le nom et la situation géographique de l'utilisateur et pour finir le nombre de ses shots, de players suivis, de followers et de likes reçus.

Afficher le profil dans le site

Nous avons choisi d'afficher le profil de l'utilisateur dans la sidebar du site (mais vous pouvez l'afficher où bon vous semble :)).

Dans la console d'administration, on édite la mise en page de notre page et on y glisse un Widget Contenu d'une page libre que l'on configure de la manière suivante :



Une fois notre mise en page enregistrée, on va viiiite voir le résultat !
 
Vous pouvez donc insérer très facilement votre profil Dribbble sur votre site, en sachant que d'autres données fournies par Dribbble sont disponibles et exploitables grâce à la fonction getPlayerById de jribbble, à savoir :

avatar_url url de l'avatar
comments_count nombre de commentaires postés
comments_received_count nombre de commentaires reçus
created_at date de création du compte
drafted_by_player_id nombre de reconnaissance faites
draftees_count nombre de reconnaissance
followers_count nombre de followers
following_count nombre de personnes suivies
id numéro unique Dribbble
likes_count nombre de like
likes_received_count nombre de like reçus
location localisation
rebounds_count nombre de rebonds
name nom
rebounds_received_count nombre de rebonds reçu
shots_count nombre de shots
twitter_screen_name identifiant twitter
url url Dribbble
username nom utilisateur Dribbble
website_url url du site de l'utilisateur

2ème exemple : afficher les derniers shots de certains Players

Le but est d'afficher dans le site une fiche avec les derniers shots de Players que l'on choisera et ce de façon aléatoire sur chaque page.

Premièrement, il faut là encore inclure jQuery et le plugin jribbble. Si vous ne l'avez pas encore fait, rendez-vous au début de ce billet pour en comprendre l'intégration.

Nous allons ensuite ajouter un nouveau type de billet au CMS pour afficher les shots Dribbble. Pour cela, on crée un répertoire /theme/fr/billets/shots_dribbble/ et on y crée les fichiers config.xml et index.html.
 
Regardons la configuration du fichier config.xml de notre billet :
<?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE type SYSTEM "http://www.kiubi-admin.com/DTD/typesbillets.dtd">
    <type tri="1">
        <desc>Shots Dribbble</desc>
        <listechamps>
            <champ champ="titre" type="text" intitule="Identifiant Dribbble" />
            <champ champ="sstitre" type="text" intitule="Nombre de shots à afficher" />
        </listechamps>
</type>
Cette fois nous utilisons deux champs du billet, toujours le champ titre pour l'identifiant Dribbble, mais aussi le champ sstitre pour définir le nombre de shots à afficher, ce qui vous permettra d'ajuster le contenu affiché.

Dans la console d'administration, on ajoute une nouvelle page et on y rédige autant de billets de type Shots Dribbble que de Players choisis :



Reste à définir le contenu du fichier index.html qui correspond au template du billet :
<!-- BEGIN: main -->
    <script type="text/javascript">
    jQuery.jribbble.getPlayerById('{titre}', function(player){
        var div = jQuery('#dribbble_{titre}');
        div.find('h3').html(player.name+' / '+player.location);
        div.find('h4 a').attr('href', player.url).html(player.url);
        jQuery.jribbble.getShotsByPlayerId('{titre}', function(data){
            console.log(data);
            if(data.shots.length) {
                var sdiv = div.find('div');
                var li = [];
                for(var i in data.shots) {
                    var s = data.shots[i];
                    var liContent = '<li><h3>'+s.title+'</h3><h4>Vu '+s.views_count+' fois<br/>';
                    liContent += s.comments_count+' commentaire'+(s.comments_count>1?'s':'')+'</h4>';
                    liContent += '<a href="'+s.url+'"><img src="'+s.image_teaser_url+'" alt=""></a></li>';
                    li.push(liContent);
                }
                sdiv.append('<ul class="">'+li.join('')+'</ul>');
            }
            div.show();
        }, {per_page: '{sstitre}'});
    });
    </script>
    <div class="shotList" style="display:none;" id="dribbble_{titre}">
        <img src="http://dribbble.com/images/dribbble-tm.png" alt=""/>
        <h3></h3>
        <h4><a href="" target="_blank"></a></h4>
        <div></div>
    </div>
<!-- END: main -->

Quelques explications sur ce code

On récupère le profil de l'utilisateur puis ses derniers shots que l'on limite avec la balise {sstitre} et on complète la structure HTML. Laquelle, avec les CSS, permet au survol d'un shot d'en afficher le nombre de vues et le nombre de commentaires.

Afficher les shots dans le site

Pour terminer, on rajoute dans notre mise en page un Widget Contenu de page libre et on le configure de manière à afficher un billet de façon aléatoire. Ceci afin d'alterner l'affichage entre les Players choisis :


Une fois notre mise en page enregistrée, on va viiiite voir le résultat !

Dans notre exemple, l'encart Dribbble est masqué par défaut et affiché une fois chargé. Vous pouvez bien sur modifier cela en y mettant un loader.

Il est également possible d'afficher beaucoup d'autres données issues de Dribbble grace à jribbble. Ainsi avec tout autant de facilité vous pourrez afficher les likes d'une personne, les shots des personnes suivies ou encore les commentaires d'un shot. Toutes les fonctionnalités sont listées sur cette page : http://lab.tylergaw.com/jribbble/

Si vous le pouvez, jetez un oeil au code du plugin, ce n'est pas long et facilement compréhensible. Chez Troll en tout cas on aime bien la façon dont il est fait :)

Pour finir on vous fait gagner du temps en vous mettant à disposition l'ensemble des fichiers de ce tutoriel sur Github.

N'hésitez pas à nous faire part de votre intégration d'un service tiers sur votre site Kiubi !


* Source des stats jQuery sur w3techs.com : ici et

(facultatif)

(facultatif)
(anti-spam)Combien font six moins trois ? (chiffres)