Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Partager un article avec Facebook

Partager un article avec Facebook
Publication : Le 02/10/2012 à 16:22:40

Introduction

Comment ignorer le premier réseau social quand il s'agit de communiquer sur Internet ?

Même si ce réseau est décrié (protection de la vie privée) il faut savoir l'utiliser.

L'Open Graph Protocol

Facebook s'appuie sur l'Open Graph Protocol. Ce protocole va transformer votre page en média transmissible sur le célèbre réseau social.

Ce protocole se divise en deux :

- Le script à intégré dans votre page.
- Les métas données OGP.

Pour le script :
<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
Pour les métas données :

Il faut inscrire ces balises dans le < head > de la page.

Pour chaque type de contenu, des balises métas sont adaptées, pour celles de base on trouve :

- og:title, le titre de votre page
- og:description, le texte associé
- og:type, le type d'information
- og:image qui va contenir l'url de l'image
- og:url, le lien de la page
- og:site_name, le nom de votre site
<meta property="og:title" content="Titre de la page" />
<meta property="og:desctiption" content="Sur cette page vous allez trouver plein de textes et d'images" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.monsite.fr/mon-article/" />
<meta property="og:image" content="http://www.monsite.fr/mon-image.jpg" />
<meta property="og:site_name" content="monsite.fr" />
Mais il en existe beaucoup d'autres, si il y a une vidéo vous pouvez gérer la taille, si c'est une musique pour pourrez récupérer le titre de la chanson, l'auteur, etc...

Vous trouverez toutes les métas sur les pages en lien.

Le bouton partage

Pour créer un bouton vous devrez passer en paramètres des attributs pour pouvoir le personnaliser.

Par exemple :
- href pour le lien de la page
- layout pour le type de bouton

D'autres attributs sont disponibles, vous les trouverez sur la page développeur de Facebook.
<div class="fb-like" data-href="http://www.monsite.fr" data-send="false" data-layout="box_count" data-width="70" data-show-faces="false"></div>

Conclusion

Ce qui est bien avec l'Open Graph Protocol c'est que celui-ci est maintenant utilisé par Google +. De quoi faciliter le partage sur les réseaux sociaux.

Sur le même thème

Partager un article avec Facebook
Publication : Le 02/10/2012 à 16:22:40

Tags

Tags : réseaux sociaux / facebook

Suggestion :

Enrichissez vos tweets de contenu avec des Twitter Cards

Enrichissez vos tweets de contenu avec des Twitter Cards