Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Insérer le bouton "Like" J'aime de Facebook dans un site web

 

Le bouton "like" "j'aime" de Facebook permet à un utilisateur de partager votre contenu avec ses amis sur Facebook. Lorsque l'utilisateur clique sur le bouton Comme sur votre site, une histoire apparaît dans Feed Nouvelles amis de l'utilisateur des avec un lien vers votre site.

Lorsque votre page Web représente une entité du monde réel, des choses comme des films, des équipes sportives, des célébrités et des restaurants, utiliser le protocole Open Graph pour spécifier des informations sur l'entité. Si vous incluez les balises Open Graph sur votre page Web, votre page devient équivalente à une page Facebook. Cela signifie que lorsque l'utilisateur clique sur un bouton comme sur votre page, une connexion est établie entre votre page et l'utilisateur. Votre page apparaîtra dans le "Goûts et Loisirs» du profil de l'utilisateur, et vous avez la possibilité de publier des mises à jour de l'utilisateur. Votre page apparaîtra dans les lieux mêmes que les pages Facebook apparaissent autour du site (par exemple de recherche), et vous pouvez cibler des annonces sur les gens qui aiment votre contenu. Remarque: Le nombre sur le bouton Like inclure tous les goûts et les actions alors que la connexion comme sur l'API graphique ne comprend que le nombre de gens comme pour l'objet.

Je tiens à offrir un coup d'œil à l'intérieur de la technologie derrière l'initiative de Facebook Open Graph pour montrer combien il est facile de marquer votre site Web et permettent aux utilisateurs de Facebook d'interagir avec lui.Ce n'est qu'une partie de la stratégie Open Graph large de la société a annoncé lors de sa conférence de 2010 développeurs F8. (Lire notre couverture complète de la keynote).Fondamentalement, Facebook offre un ensemble de widgets - il les appelle Social Plug-ins - que vous pouvez déposer dans n'importe quelle page web pour rendre cette page plus Il ya un bouton 'j'aime', un widget recommandations qui montre ce que les autres pages du peuple »Facebooky." amis lisent, un widget Flux d'activité qui montre une version simplifiée du personnel du visiteur fil de nouvelles Facebook, Facebook et d'un bar, d'une barre d'outils propriétaires de sites peuvent flotter au bas de l'écran qui sert toutes ces choses à la fois.Utilisation des widgets Open Graph, vous pouvez incorporer quelques-uns des principaux traits de Facebook interaction sociale dans n'importe quelle page sur le web.Le plug-in social le plus important et celui que nous allons sans doute voir le plus recours, est le bouton 'j'aime'. Mettez-le sur votre page, et si un utilisateur visite votre site Facebook et clique dessus, un lien vers votre page est ajoutée à leur flux d'activité. Soudain, tous leurs amis peuvent voir ce lien, cliquez dessus et vous serez conduits directement dans votre page. Quand ce deuxième personne arrive, le bouton 'j'aime' est personnalisé pour eux - cela montre que de leurs amis ont déjà cliqué dessus, et quand il clique dessus, un lien vers votre page est ajoutée à leur flux.Il ya en fait deux versions du bouton 'j'aime', qui utilise un i-frame et celui qui utilise JavaScript.La version i-framePour le simple i-frame version, c'est une ligne de code:<iframe src="Some Facebook URL" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px">Vous pouvez générer votre propre bit de i-frame de code pour toutes les URL de votre choix (et modifier les paramètres) en utilisant l'outil au bas de cette page sur le site développeur de FacebookLe contenu à l'intérieur du i-frame est hébergé par Facebook et Facebook peut détecter si l'utilisateur est connecté ou non à l'aide d'un cookie. Si la personne est connecté à Facebook, les trucs dans le i-frame est personnalisé pour eux. Il affiche une liste de leurs amis qui ont également aimé la page. S'ils ne sont pas connectés, ils vous sera demandé de vous connecter ou de rejoindre.La version JavaScriptLa version JavaScript légèrement plus compliquée du bouton utilise deux autres bits de la technologie: le Facebook fb XFBML: comme le chat de Facebook et JavaScript SDK.<fb:like href="Your URL" layout="standard" show-faces="true" width="450" ??action="like" colorscheme="light" />Vous obtenez toutes les fonctionnalités de personnalisation mêmes que la version i-frame, de sorte que chaque utilisateur connecté Facebook qui visite votre site qui voit de leurs amis ont cliqué sur le bouton «J'aime», et un lien vers votre site est partagé entre son graphe social. En outre, comme la version i-frame, vous pouvez modifier les paramètres comme vous le souhaitez.Mais la version JavaScript propose quelques extras. Dans le code ci-dessus, vous pouvez également voir qu'il ya un drapeau show-visages qui vous montrera les photos de profil de vos amis qui ont cliqué sur le bouton 'j'aime'.La version de JavaScript permet également à vos visiteurs la possibilité d'ajouter un commentaire à la liaison quand ils cliquent sur le bouton 'j'aime'.Si un utilisateur n'est pas connecté à Facebook quand ils visitent votre site, vous pouvez les authentifier automatiquement en utilisant OAuth 2.0, qui prend désormais en charge Facebook. Tous les détails sont ici.Marquer votre pageQuand un utilisateur aime votre page, il fait plus que simplement passer le lien autour. Si vous êtes un groupe, ou si vous exécutez un site pour un film, vous pouvez ajouter un peu de balisage sémantique à votre page Facebook qui indique le type de chose que votre page représente. De cette façon, si je vais à votre page de film et de "J'aime" de votre film, Facebook peut facilement ajouter un lien vers le site de votre film dans mon profil. Si je garde une liste de mes films préférés dans mon profil Facebook, un lien vers votre site Web public sera ajouté là où il appartient.Cette partie est facultative, mais elle est recommandée. Il suffit d'ajouter quelques balises meta Graphique ouvertes sur votre page afin Facebook sait ce que vous êtes. Il ya quatre qui sont nécessaires, le reste est sauce. Vous pouvez demander l'identité de votre entité en choisissant le type de contenu le plus pertinent. La liste est longue - musicien, équipe de sport, blog, boisson, hôtel, film, livre, ville, de la cause - donc tout ce que représente votre page, Facebook peut-il comprendre et à gérer correctement le lien quand quelqu'un clique sur votre bouton 'j'aime'.S'habituer àComme les boutons sont un cran au dessus des boutons de partage d'autres qui sont sur le web depuis des années. Contrairement à ceux de Digg et Twitter, qui vient d'afficher le nombre total de clics aveugle de tout le monde sur le réseau social, le Facebook Like button vous montre comment vos amis sont en interaction avec la page que vous êtes sur.On peut certainement s'attendre à d'autres réseaux sociaux revenir sur ce modèle et commencer à servir des listes de vos amis, et peut-être même leurs visages, aux côtés de leurs propres widgets sociaux.

Il ya deux implémentations bouton comme: XFBML et Iframe. Le XFBML (également disponible en HTML5 balisage conforme) la version est plus polyvalent, mais requiert l'utilisation du SDK JavaScript. Le XFBML dynamiquement redimensionne sa hauteur selon que il ya des photos de profil à afficher, vous donne la possibilité (grâce à la bibliothèque Javascript) pour écouter comme des événements afin que vous sachiez en temps réel lorsque l'utilisateur clique sur le bouton Like, et il donne toujours à l'utilisateur la possibilité d'ajouter un commentaire optionnel de la comme. Si les utilisateurs font ajouter un commentaire, l'histoire publiés à partir de Facebook est donné plus d'importance.

Remarque: Les URL dans le code sont protocole relatif. Cela permet au navigateur de charger le SDK sur le même protocole (HTTP ou HTTPS) que la page contenant, ce qui permettra d'éviter "Insecure" Contenu avertissements. Manquant http et https dans le code est intentionnel.

Pour commencer, il suffit d'utiliser le configurateur ci-dessous pour obtenir le code à ajouter à votre site.

 

 

 

 

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site