Ludovic ROLAND

Blog technique sur mes expériences de développeur.

Créer un blog statique avec Octopress (5/7) : un blog social

14 novembre 2014

Nous savons maintenant ajouter du contenu à notre blog, mais vous l’avez sans doute remarqué, vous êtes seuls à pouvoir interagir sur le blog alors que de nombreux blogs sur internet permettent à d’autres personnes d’interagir au travers notamment de commentaires.

Il n’y a aucune raison pour que votre blog ne puisse pas lui aussi accueillir les interventions d’autres personnes. C’est pourquoi dans ce chapitre, nous allons faire d’un blog Octopress un véritable blog social au travers l’intégration d’un module de commentaires et l’intégration des principaux réseaux sociaux.

Plan

Les commentaires

Comme je vous le disais plus tôt dans ce tutoriel, Octopress délègue un certain nombre de fonctions à des outils spécialisés comme par exemple la fonction de recherche à Google. C’est notamment le cas de la gestion des commentaires qui est déléguée à la plate-forme Disqus.

Qu’est-ce que la plate-forme Disqus ?

Disqus est un service gratuit créé en 2007 et qui permet de centraliser la gestion des commentaires d’articles. Ainsi, avec un seul identifiant, vous pourrez poster des commentaires sur tous les sites utilisant cette plate-forme. Disqus est une plate-forme qui n’a plus besoin de faire ses preuves et qui est utilisée par de nombreux sites internet comme par exemple :

  • le site de CNN ;
  • les sites de FrAndroid, FraWin, iAddict, FraTizen et LesArdoises ;
  • le site de Metronews.

Prise en main de Disqus

Afin de pouvoir intégrer Disqus à un blog Octopress, la première étape consiste à ouvrir un compte sur la plate-forme. Pas de panique, c’est gratuit ! ;)

Pour vous inscrire sur Disqus, rendez-vous sur le site officiel. Une fois l’inscription terminée, connectez-vous et rendez-vous dans l’interface d’administration. Comme vous pouvez le constater, cette interface est composée de plusieurs sections :

  • comments ;
  • discussions ;
  • analytics ;
  • settings.

La section comments, comme son nom le laisse deviner permet de visualiser tous les commentaires associés à votre compte Disqus. Il peut donc s’agir de vos propres commentaires ou alors des commentaires écrits par d’autres sur des discussions associées à votre compte Disqus. Nous reviendrons dans le paragraphe suivant sur la notion de discussions. Dans la section comments, les commentaires peuvent être affichés selon leur état à savoir approuvé, en attente de validation, considéré comme span ou effacé.

La section discussions regroupe toutes les discussions associées à votre compte Disqus. Une discussion, dans le cadre d’un blog Octopress, est associée à l’URL d’un article ou d’une page et constitue le fil de commentaires déposés sur un article ou une page.

La section analytics, comme son nom le laisse deviner, permet de fournir quelques analytiques en rapport avec les commentaires déposés sur les articles et les pages de votre blog.

Finalement, la section settings vous permet de paramétrer Disqus.

###Intégrer Disqus à Octopress

Maintenant que les présentations avec Disqus sont faites, il est temps de l’intégrer à votre blog Octopress. Ne vous inquiétez pas, l’intégration est simple et rapide !

La première étape consiste à renseigner son identifiant Disqus dans le fichier _config.yml d’Octopress. Vous trouverez votre identifiant Disqus dans l’insterface administration, section settings et plus précisément dans la partie Site Identity. Il s’agit de votre shortname.

Une fois votre shortname repéré, ouvrez le fichier _config.yml dans un éditeur de texte et rendez-vous dans la section 3rd Party Settings et repérez les deux lignes concernant Disqus. Par défaut, voici ce à quoi elles ressemblent :

disqus_short_name:
disqus_show_comment_count: false

Il convient donc d’ajouter votre shortname Disqus au niveau de la ligne disqus_short_name.

Activer / désactiver les commentairesdans Octopress

Maintenant que Disqus est configuré au niveau de votre blog Octopress, il est extrêmement simple de pouvoir activer ou désactiver les commentaires sur un article ou une page. En effet, dans l’entête YAML d’un article ou d’une page il est convient alors de placer à true ou false le paramètre comments :

#active les commentaires
comments: true

#désactive les commentaires
comments: false

Si les commentaires sont activés, la discussion associée à l’article ou à la page est automatiquement créée dans Disqus au moment de la génération du blog.

Voici par exemple ce à quoi ressemble une discussion Disqus dans un article ou une page Octopress :

Facebook, Twitter et Google+

Nous venons de voir comment ajouter un côté du social dans un blog Octopress à travers l’intégration de commentaires. Voyons comment aller plus loin en ajoutant au blog quelques fonctionnalités en rapport avec les réseaux sociaux. Au programme de ce chapitre : Facebook, Twitter et Google+.

Intégration de Facebook

Octopress nous offre la possibilité d’ajouter la fonctionnalité like et partage de Facebook aux articles et pages du blog. Pour activer cette fonctionnalité, il convient de se rendre dans le fichier de configuration _config.yml d’Octopress et plus précisément dans la section 3rd Party Settings. Repérez la propriété facebook_like et mettez sa valeur à true pour l’activer (et false pour la désactiver).

# Facebook Like
facebook_like: true

Suite à l’activation de la fonctionnalité, vous devriez voir le logo Facebook apparaître au bas de vos articles et pages permettant ainsi à vos visiteurs d’aimer ou partager le contenu de votre blog sur Facebook.

En cliquant sur Share, vous avez ainsi la possibilité de partager un article ou une page sur Facebook comme en témoigne les captures d’écran ci-dessous :

Rendez-vous sur votre mûr Facebook pour y constater le bon fonctionnement du partage.

Intégration de Twitter

Nous venons de voir qu’Octopress nous permet d’intégrer des fonctionnalités liées à Facebook. Sachez qu’Octopress a également pensé à la concurrence et notamment Twitter que nous allons maintenant étudier. Ainsi, Octopress nous offre la possibilité de partager un article ou une page de votre blog à travers Twitter. Comme pour Facebook, cette fonctionnalité s’active au niveau du fichier de configuration _config.yml et plus précisément dans la section 3rd Party Settings. Repérez la propriété twitter_tweet_button et mettez sa valeur à true pour l’activer (et false pour la désactiver).

# Twitter
twitter_tweet_button: true

Suite à l’activation de la fonctionnalité, vous devriez voir le logo Twitter apparaître au bas de vos articles et pages permettant ainsi à vos visiteurs de partager le contenu de votre blog sur la plate-forme de micro blogging.

En cliquant sur Tweet, vous avez ainsi la possibilité de partager un article ou une page sur Twitter comme en témoigne la capture d’écran ci-dessous :

Intégration de Google+

Nous venons de voir comment intégrer des fonctionnalités relatives à Facebook et Twitter sur un blog Octopress. Voyons maintenant comment intégrer des fonctionnalités relatives à l’autre réseau social d’influence : Google+. Une nouvelle fois, cette fonctionnalité s’active au niveau du fichier de configuration _config.yml et plus précisément dans la section 3rd Party Settings. Repérez la propriété google_plus_one et mettez sa valeur à true pour l’activer (et false pour la désactiver).

# Google +1
google_plus_one: true

Une autre propriété nous permet de choisir la taille du bouton. Il s’agit de la propriété google_plus_one_size qui par défaut est égale à medium (moyen). Les autres tailles disponibles sont small (petit) et big (grand).

Octopress nous offre également la possibilité d’associer les publications de votre blog à votre profil Google+. Ainsi, lors de l’affichage des résultats d’une recherche Google, les informations relatives à votre profil seront affichées comme par exemple la photo de votre profil comme en témoigne la capture d’écran ci-dessous :

Pour associer les publications de votre blog à un compte Google+, il convient de renseigner l’identifiant de votre compte Google+ au niveau de la propriété googleplus_user dans le fichier _config.yml et plus précisément dans la section 3rd Party Settings.

# Google Plus Profile
googleplus_user: 11111

Si en plus vous souhaitez ajouter sur votre blog un bouton Google+ redirigeant vers votre profil sur le réseau social, il convient, toujours dans le fichier _config.yml, de placer la propriété googleplus_hidden à false. Après génération du blog, vous devriez alors voir dans la barre latérale droite de votre blog l’apparition du dit bouton comme en témoigne la capture d’écran ci-dessous :

Les autres sites sociaux

Nous venons de voir comment intégrer sur un blog Octopress des fonctionnalités relatives aux réseaux sociaux Facebook, Twitter et Google+. Sachez que ce n’est pas les seuls sites internet qui peuvent être intégrés à Octopress. Ainsi, dans ce chapitre, nous allons voir comme intégrer des fonctionnalités relatives aux sites sociaux Delicious et Pinboard. Finalement, pour les plus geeks d’entres vous, nous verrons comment intégrer des fonctionnalités relatives à Github sur un blog Octopress.

Delicious

Débutons avec Delicious. Pour ceux qui l’ignorent, Delicious est un site internet social, créé en 2003, qui permet de gérer (sauvegarde et partage) des marques-pages Internet. Octopress offre donc la possibilité d’afficher dans la barre latérale droite du blog les derniers marques pages que vous avez sauvegardés / partagés sur le site. Comme d’habitude, cette fonctionnalité s’active au niveau du fichier de configuration _config.yml et plus précisément dans la section 3rd Party Settings. Repérez la propriété delicious_user et saisissez votre identifiant Delicious afin que vos marques-pages soient chargés. Par exemple :

# Delicious
delicious_user: test

Générez le blog et prévisualisez le. Vous devriez alors voir vos marques-pages Delicious s’afficher à l’écran comme en témoigne la capture d’écran ci-dessous :

Comme vous pouvez le constater, une section ayant pour titre On Delicious a été créée. Dans cette section, on retrouve la liste des derniers marques-pages suivie d’un lien renvoyant vers le profil Delicious.

Par défaut, la liste de vos marques-pages est composée de trois liens. Il est possible de changer ce nombre en modifiant le paramètre delicious_count qui se trouve dans le fichier _config.yml et plus précisément dans la section 3rd Party Settings.

# Delicious
delicious_count: 3

Pinboard

Sachez que Delicious n’est pas le seul site internet social permettant de gérer des marques-pages Internet. Un peu moins connu que son concurrent, Pinboard, lancé en 2009 est également un site internet social permettant de gérer ses marques-pages. Tout comme pour Delicious, Octopress offre la possibilité d’afficher dans la barre latérale droite du blog les derniers marques pages que vous avez sauvegardés / partagés au travers de la plate-forme. Pour ne rien changer, cette fonctionnalité s’active au niveau du fichier de configuration _config.yml et plus précisément dans la section 3rd Party Settings. Repérez la propriété pinboard_user et saisissez votre identifiant Pinboard afin que vos marques-pages soient chargés. Par exemple :

# Pinboard
pinboard_user: test

Générez le blog et prévisualisez le. Vous devriez alors voir vos marques-pages Pinboard s’afficher à l’écran comme en témoigne la capture d’écran ci-dessous :

A l’image de Delicious, une section ayant pour titre My Pinboard a été créée. Dans cette section, on retrouve la liste des derniers marques-pages suivie d’un lien renvoyant vers le profil Pinboard.

Par défaut, la liste de vos marques-pages est composée de trois liens. Il est possible de changer ce nombre en modifiant le paramètre pinboard_count qui se trouve dans le fichier _config.yml et plus précisément dans la section 3rd Party Settings.

# Pinboard
pinboard_count: 3

Github

Il est temps de conclure ce chapitre en étudiant les fonctionnalités proposées par Octopress en rapport avec la plate-forme Github. Pour ceux qui l’ignore, GitHub est une plate-forme, créée en 2008, permettant l’hébergement de site internet ainsi que l’hébergement. Mais ce n’est pas la seule fonctionnalité offerte par Github. En effet, la fonctionnalité pour laquelle Github est plus connu est l’hébergement du code source de logiciels au travers d’un gestionnaire de versions puissant : Git est un service web d’hébergement et de gestion de développement de logiciels, utilisant le programme Git.

A l’image de ce que nous avons vu jusqu’à maintenant, Octopress offre la possibilité d’afficher dans la barre latérale droite du blog les dépôts publics associés à un compte Github. Pour ce faire, rendez-vous dans le fichier de configuration _config.yml et plus précisément dans la section 3rd Party Settings. Repérez alors la propriété github_user et saisissez votre identifiant Github.

# Github repositories
github_user: imathis

Générez le blog et prévisualisez le. Vous devriez alors voir vos dépôts publics Github s’afficher à l’écran comme en témoigne la capture d’écran ci-dessous :

Comme vous pouvez le constater, une section ayant pour titre Github Repos a été créée. Dans cette section, on retrouve la liste des dépôts publics suivie d’un lien renvoyant vers le profil Github. Par défaut, cette liste est potentiellement composée d’un grand nombre d’entrées. Il est possible de paramétrer le nombre d’éléments à afficher via le paramètre github_repo_count qui se trouve dans le fichier _config.yml et plus précisément dans la section 3rd Party Settings. Pour utiliser les paramètres par défaut, saisissez le nombre 0, sinon, saisissez un nombre correspondant au nombre d’éléments que vous souhaitez voir apparaître dans la liste.

# Github repositories
github_repo_count: 0

Il est encore possible d’affiner les éléments affichés dans cette liste. Ainsi, si vous ne souhaitez pas afficher les dépôts correspondants à des forks, il convient d’utiliser le paramètre github_skip_forks disponible dans le fichier _config.yml et plus précisément dans la section 3rd Party Settings. La valeur false affichera les forks tandis que la valeur true les enlèvera de la liste.

# Github repositories
github_skip_forks: true

Finalement, il est possible de ne pas afficher à la fin de la liste un lien vers le profil Github grâce au paramètre github_show_profile_link lui aussi disponible dans le fichier _config.yml, section 3rd Party Settings. Il convient de le placer à true pour afficher le lien et à false pour ne pas l’afficher.

# Github repositories
github_show_profile_link: true

Commentaires