forum
research
partner

Archives 5 août 2010site-map

search

Optimiser le partage de son site sur facebook

Quand on partage une page sur Facebook,(ou qu'on utilise le bouton « like » présent sur certains sites) Facebook propose de laisser un commentaire et leur ajoute , le titre de la page, généralement son premier paragraphe, et vous propose de choisir une illustration pour illustrer le document parmi celles présentes sur la page.

Par exemple si on essaye de partager cette page d'exemple sur Facebook on obtient une proposition de présentation ressemblant à ce qu'on peut voir sur l'illustration suivante.

Pour le concepteur de page web Il peut parfois être intéressant de personnaliser l’affichage avec par exemple une image spécifique (le logo d'un site, d'une marque ou la photo d'un produit, un texte plus « percutant » ou l'affichage automatique du nom du site web. C'est possible gâce aux protocole Opengraph, ce standard, utilisez par Facebook permet d'ajouter grace à des balises spécifiques des informations qui seront affichées spécifiquement sur les pages et timelines Facebook.

la syntaxe de ces balises est la suivante :

  1. nom de l'argument opengraph" content="contenu à afficher"/>

On peut par exemple en ajoutant 3 lignes entre les balises de notre page d'exemple obtenir la présentation suivante pour notre lien.

Le code ajouté à la page est le suivant :

  1. og:title" content="Titre pour Facebook"/>
  2. og:image" content="http://passeurs-de-savoirs.fr/lab/image_facebook.png"/>
  3. og:description" content="voici la description spécifique pour Facebook"/>

Les balises Opengraph :

  • og:title - titre que vous souhaitez voir apparaitre spécifiquement sur Facebook.
  • og:image - URL de l'image à afficher (selon la doc de Facebook, elle est idéalement carrée et d'une dimension de plus de 50 px de coté. 
  • og:description - phrase descriptive de la page
  • og:url - URL canonique de base de votre page pour éviter les problèmes de duplicate content  (si par exemple on peut arriver au contenu via plusieurs adresse).

La liste complète des balises (ainsi que des exemples) sont disponibles sur le site d'Open graph

Pour aller plus loin :

rss
forum

Créer un Widget pour Igoogle et Netvibes

De nombreux internautes on fait le choix de services de pages d'accueil personnalisées comme iGoogle ou NetVibes l'avantages de ces outils et de permettre a leurs utilisateurs de compiler en une seule page des flux rss et des widgets personnalisables.

Ces widgets peuvent être personnalisés , il permettent par exemple de connaitre la météo dans un ou plusieurs endroits en fonction des attentes des d'utilisateurs, de suivre le cours d'une action, ou de poser des alertes sur un agenda.

Pour celles et et ceux qui créent des sites web, il peut être intéressant de développer des widgets pour Netvibes ou i google, en effet cs outils peuvent donner une visibilité aux sites qui les éditent, un site disposant d'une importante banque de photos, poura par exemple proposer un gadget de type «La photo du jour» qui incitera les utilisateurs a aller  visiter le site pour en savoir plus.

Créons un service indispensable !

bon , imaginons que vous ayez créé un service indispensable appelé «Le bouton qui fait Pouet» ce service 2.0 révolutionnaire  se présenterai sous la forme suivante :


Le bouton qui fait Pouet


Cliquer ici

le code necessaire à son fonctionement resemblerai rosso modo à ceci...

  1.  
  2. Le bouton qui fait Pouet

  3. Cliquer ici

Oui je sais, comme service indispensable on a vu mieux, mais là je manque un peu de temps, et je suis sur que votre créativité débridée saura mettre à profit  cet exemple pour créer votre propre service 2.0 révolutionnaire.

Créer un widget IGoogle

un gadget IGoogle est un simple fichier xml (même si sa syntaxe peut être très riche comme le montre la doc dans la langue de Shakespeare  ou son ancienne version en français  ).

sa structure de base est la suivante

  1. titre du widget" />
  2. Contenu du widget
  3. ]]>

Ainsi si on veut adapter notre «Le bouton qui fait Pouet» à en gadget google on obtiendra un fichier pouet_google.xml qui grosso modo ressemble à ça :

  1. Le bouton qui fait Pouet pour Google" />


  2. Le bouton qui fait Pouet

  3. Cliquer ici
  4. align="middle" />

 

  • ]]>
  • il sufit ensuite de proposer aux visiteur de votre site un lien d'installation de la forme suivante

    1. URL du Widget">ajouter ce Widget à iGoogle" />

    soit

    1. ajouter le bouton qui fait pouet à  à iGoogle" />

    Créer un widget Netvibes

     

    Créer un gadget Netvibes est à peut prés la même chose que concevoir un widget Google si ce n'est que cettte fois ci, on crée un fichier au format xhtml, qui fait appel au bibliothèques javascript et css de netvibes (la doc complète est là).
    dont la structure est la suivante :

    1.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.  
    3.    
    4.    
    5.    
    6.  
    7.  
    8.     CONTENU DU GADGET
    9.     ...
    10.     ...
    11.  

    ce qui donne pour le fichier pouet_netvibe.html


    1.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2.  
    3.    
    4.    
    5.        

    6.    
    7.  
    8.  

    9. Le bouton qui fait Pouet

    10. Cliquer ici

  •  
  • On notera au passage, que les librairies de widget de netvibe son compatibles avec Igoogle et les widget du sytème X du Mac, la contrainte etant l'affichage d'un logo netvibe en dessous de chaque widget.


    Pour aller plus loin


     
     
     
     

      Bear

      Switch to our mobile site

      partner