AccueilRéférencement naturelComment intégrer des statuts sociaux dans un site web ?

Comment intégrer des statuts sociaux dans un site web ?

Comment intégrer un post facebook ou instagram dans wordpress ou dans un autre CMS ? Pas besoin de plugin ni widget. Suivez cette méthodologie simple pour embarquer le code html et ainsi enrichir vos contenus web.

Sommaire de l’article

  1. Intégrer un statut Facebook
  2. Intégrer un tweet
  3. Intégrer une photo Instagram
  4. Intégrer un post Google+

Les réseaux sociaux sont l’espace idéal pour repérer les UGC (User Generated Contents), autrement dit les contenus générés par les utilisateurs. Une matière vivante et diversifiée, constituée de messages, de photos, de vidéos. Et en plus, c’est gratuit ! L’étape suivante consiste donc à sélectionner et à republier ces contenus sociaux sur votre site web ou blog.

Pour cela, les principales plates-formes de social media proposent des fonctionnalités pour embarquer le code html des statuts et autres tweets. Une vieille recette que certains avaient déjà mise en place depuis longtemps, comme les hébergeurs de vidéos YouTube, Daily Motion ou Vimeo.

Dans cet article, je vous montrerai comment intégrer les statuts provenant de 4 réseaux majeurs de la webosphère sociale : Facebook, Twitter, Instagram et Google+.

 

Intégrer un statut Facebook

Pour ajouter un statut Facebook à votre blog, rien de plus simple. Cela commence par un petit clic sur le picto « … » qui apparaît au survol de la souris en haut à droite. Dans la liste déroulante qui apparaît alors, cliquez sur Intégrer à un site.
Intégrer des statuts sociaux sur un site Web - Facebook

Une nouvelle fenêtre vous donne alors le code embed à copier/coller (surligné en bleu dans la capture d’écran ci-dessous) :
Comment copier le code embed d'un post facebook pour l'intégrer à son site

A noter que juste en dessous de ce code, vous pouvez voir un aperçu du post embarqué.

Copiez ce code et collez le dans la fenêtre de rédaction html de votre article dans le back office de votre blog. Par exemple sur WordPress dans votre onglet texte :
Coller le code html d'un post Facebook dans son site ou blog

Outre le fait d’embarquer tout le contenu (texte + image + lien), ce code permet d’interagir avec le statut grâce à la fonction « J’aime« , exactement comme si vous étiez sur Facebook. Par contre, impossible de le commenter : lorsque vous cliquez sur « Commenter« , une nouvelle fenêtre s’ouvre dans votre navigateur vous renvoyant sur Facebook.

Et voici ce que ça donne :
Rendu d'un post Facebook intégré dans son site grâce au code embed

 

Intégrer un tweet

Dans Twitter, placez votre curseur sur le tweet qui vous intéresse. Au survol de la souris, plusieurs options apparaissent : Répondre, Retweeter, (ajouter en) Favori et ••• Plus. C’est sur cette dernière que vous allez cliquer puis sur le lien Insérer le tweet qui s’affiche :

Comment intégrer un tweet sur son site ou son blog

Comme pour Facebook, une nouvelle fenêtre vous présente le code embed pré sélectionné. Copiez-le !

Comment intégrer un tweet à son site avec le code embed

Il ne vous reste plus qu’à le coller dans votre fenêtre de rédaction html pour obtenir ce résultat :
Résultat obtenu sur le site avec l'intégration d'un twwet dans le code html

Les 3 fonctionnalités principales de Twitter (Répondre, Retweeter et Ajouter en favori) sont présentes en dessous du tweet mais cliquer dessus ouvrira une nouvelle fenêtre dans votre navigateur.

 

Intégrer une photo publiée sur Instagram

Vous avez repéré une photo et vous souhaitez la partager sur votre blog ? Rien de plus facile avec Instagram ! Placez-vous sur le cliché concerné puis cliquez sur les 3 petits points qui apparaissent en bas à droite. Sélectionnez Intégrée :

Intégrer des statuts sociaux sur un site Web - Instagram

Vous voyez alors le code :

Intégrer des statuts sociaux sur un site Web - Instagram

Cliquez sur Copier le code intégré puis allez le placer dans votre fenêtre de rédaction html. Vous obtenez alors sur votre blog :

 

Intégrer un post Google+

Intégrer un post Google+ n’est plus possible aujourd’hui. Voici ci-dessous la manipulation qu’il fallait effectuer à l’époque de la première diffusion de notre article. On ne sait jamais, les réseaux sociaux sont changeants et la fonctionnalité pourrait réapparaître un jour ou l’autre.

Cliquez sur la petite flèche en haut à droite du statut qui vous intéresse, puis sur le lien Intégrer le post :

 Intégrer des statuts sociaux sur un site Web - Google+

Une nouvelle fenêtre s’ouvre et vous présente le code embed à copier/coller. Par défaut il est déjà sélectionné, vous n’avez donc plus qu’à le copier (Ctrl + C ou clic droit et copier) :

Intégrer des statuts sociaux sur un site Web - Google+Rendez-vous maintenant dans votre fenêtre de rédaction html pour y coller le code. À noter que vous pouvez supprimer les 2 phrases suivantes qui ne sont là que dans un but informatif :

  1. <!– Place this tag in your head or just before your close body tag. –>
  2. <!– Place this tag where you want the widget to render. –>

Ne vous reste donc plus que :

<script type= »text/javascript » src= »https://apis.google.com/js/plusone.js »></script>
<div data-href= »https://plus.google.com/104612362983867234140/posts/ZtXiSn7Gc98″></div>

Et voici le résultat final :

Contrairement à un post Facebook embarqué, aucune interaction n’est possible. Si vous cliquez sur +1 ou Commenter, vous serez redirigé sur Google+.

 

En guise de conclusion…

Vous l’aurez compris, quel que soit le réseau social, il y a de grandes chances pour qu’il propose cette fonctionnalité de code embarqué. Et les développeurs ayant tendance à copier ce qui fonctionne ailleurs, cette possibilité de rediffuser des contenus prend généralement la même forme : un lien apparaissant dans les options du statut vous permettant de copier/coller le précieux code embed.

La méthode marche aussi pour Vine, Youtube, Vimeo, Issuu, SlideShare, etc. Et vous, quels autres plates-formes embarquez-vous sur votre site ou blog ?

Pour recevoir régulièrement les conseils web d’Editoile, abonnez-vous à la newsletter

Social Media Manager à Editoile, agence webmarketing à Bordeaux (Gironde). Certifié Opquast Qualité Web niveau confirmé. Ses spécialités : le community management, les publicités sur les réseaux sociaux et le CMS (Content Management System) WordPress.

Commentaires(2)

  • 13 avril 2014, 23:30  Répondre

    Très instructif ce site web. 🙂
    http://www.KLWeb.fr

  • Mascaro
    12 avril 2015, 12:27  Répondre

    Bonjour merci pour ce tuto, j’aurais une question concernant l’intégration du statut Facebook (et autres) est ce que cela d’actualiser tout seul?
    C’est a dire si la page FB en question met a jour sont statut, ce script se mettra a jour sur mon site? Si non existerait-il un script HTML qui le ferais?
    Merci!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.