Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons est un plugin javascript permettant d’ajouter des liens de partages vers différents réseaux sociaux.

Parmi tout les plugins existant celle-ci comporte plusieurs avantage :

  • il est responsive
  • il est gratuite
  • il possède de nombreux réseaux sociaux de base
  • il est facile d’utilisation

Utilisation

Pour ce qui est de l’utilisation il suffit d’ajouter le fichier css « rrssb.css » dans notre projet et de copier la balise <link> suivante dans notre header :

<link rel="stylesheet" href="css/rrssb.css" />

Ensuite il suffit de choisir les réseaux que l’on souhaite ajouter, en copiant les li correspondant présent dans le fichier index.html.

Et enfin il est nécessaire de copier les lignes de JS suivante est de copier le fichier rrssb.min.js dans notre projet. (Si Jquery est déja présent dans notre projet la première ligne est optionnel)

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery.1.10.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
&lt;script src="js/rrssb.min.js"&gt;&lt;/script&gt;

Voilà maintenant que nos boutons sont disponible il suffit de changer les liens dans chaque li par le liens que vous voulez partager.

Si jamais vous n’aimer pas faire d’effort inutilement voici un morceau de JS qui permet de remplacer  les liens automatiquement.

&lt;script type="text/javascript"&gt;
 
jQuery(document).ready(function ($) {
 
  $('.rrssb-buttons').rrssb({
    // required:
    title: 'This is the email subject and/or tweet text',
    url: 'http://rrssb.ml/',
 
    // optional:
    description: 'Longer description used with some providers',
    emailBody: 'Usually email body is just the description + url, but you can customize it if you want'
  });
});
&lt;/script&gt;

source :

git hub

demo

Les balises meta Twitter cards

Aujourd’hui, comme chacun le sait, l’utilisation des réseaux sociaux pour communiquer et échanger de l’information est devenue quasiment incontournable.

Dès lors que l’on utilise ces moyens de communication, le choix de la présentation de l’information devient essentiel afin que celle-ci soit la plus percutante et pertinente pour l’internaute.

Dans cet article, il sera question uniquement du réseau social Twitter et de son système de Cards.

Les Twitter Cards, Késako ?

Twitter propose aux développeurs d’intégrer dans leur code, des balises méta afin d’indiquer au réseau social quelles informations il devra afficher dans le flux d’actualités de ses utilisateurs.

Prenons un exemple simple d’une page web sans méta twitter spécifié, que l’on souhaite partager sur le réseau social. On copie donc l’url de la page concernée dans un tweet et voici le résultat qui s’affiche dans le flux d’actualités.

Balises meta twitter cards

Vous avouerez que la présentation de l’information laisse à désirer et nécessite un petit relooking pour rendre l’information plus intéressante et attractive. C’est à ce moment que les méta Twitter rentrent en action. Après l’ajout de quelques balises, voici maintenant le résultat sur le fil d’actualités.

Balises meta twitter cards

C’est tout de suite plus sympathique, n’est-ce pas ?

Intégrer les méta Twitter

Twitter propose différents types de présentation appelées « Carte ».
Dans cet article, il ne sera question que de la carte « Summary ou Summary Large Image ». Pour les autres, vous pouvez vous référer à la documentation officielle que vous pouvez trouver ici.

Exemple: La carte « Summary ou Summary Large Image »

Il s’agit de la carte (présentation) la plus basique qui existe et qui est idéale pour afficher un titre, un résumé, une image (plus ou moins grande). C’est ce type de carte qui a été utilisé pour l’exemple que vous avez pu voir plus haut.

Voici comment intégrer les balises.

Pour commencer, il faut indiquer le type de carte à utiliser, ici summary.

<meta name="twitter:card" content="summary" />

Ensuite, il est possible de préciser les autres informations.

Le titre

<meta name="twitter:title" content="Tweet test plus évolué">

L’adresse url

<meta name="twitter:url" content="http://jefaisuntweetdetest.fr/test">

Une description

<meta name="twitter:description" content="Ceci est une description du tweet que vous pouvez réaliser avec les méta Twitter afin de rendre la mise en forme plus sympathique et percutante">

Mais aussi, une image en indiquant l’adresse de cette image.

<meta name="twitter:image" content="http://adresse_url_de_mon_image/monimage.png">

Et voilà, le tour est joué.

Lien intéressant : https://css-tricks.com/essential-meta-tags-social-media/

Piwik, où sont mes visiteurs uniques ?

Si vous utilisez Piwik, vous pouvez avoir du mal à trouver l’endroit où est inscrit le nombre de visiteurs uniques et même vous vous dites je suis sûr je l’ai vu quelque part un jour et maintenant je ne le vois plus.

Bah en fait, c’est normal. Par défaut Piwik ne vous donne vos visiteurs uniques que si la période est jour, semaine ou mois mais pas pour l’année ni une plage de dates personnalisées. Cette statistique se situe dans Visteurs -> Récapitulatifs.

Ok, mais comment je fais moi je le veux pour l’année. 2 solutions, la solution du pauvre tu compiles mois par mois, c’est bon il n’y en a que 12.

Pas cool ok, alors étudions déjà pourquoi Piwik a une telle configuration par défaut. D’après la doc officielle, c’est pour des raisons de performances car cette statistique provient des tables de logs qui peuvent être importante sur une année ou une plage de date et réalisée cette stat peut mettre beaucoup de temps. Ok, mais moi j’ai un petit site pas trop de visite donc je suis prêt à attendre pour avoir cette stat. Ok, donc toujours d’après la doc officielle il suffit d’aller dans votre fichier de configuration (dossier_root_de_piwik/config/config.ini.php) et ajoutez les lignes suivantes :


enable_processing_unique_visitors_day = 1
enable_processing_unique_visitors_week = 1
enable_processing_unique_visitors_month = 1
enable_processing_unique_visitors_year = 1
enable_processing_unique_visitors_range = 1

Et voilà,vous avez vos visiteurs uniques de calculés pour tous les types de périodes possibles accessibles dans Visiteurs -> Récapitulatifs.

Juste un petit point important faites bien attention à ne pas vider en automatique vos tables de logs trop rapidement au vue de vos besoin. C’est configurable dans Votre compte -> paramètres -> vie privée -> Supprimer les journaux et rapports des anciens visiteurs et les 2 configurations doivent être à non si vous souhaitez conserver tous l’historique et donc les visiteurs uniques.

Enjoy 😉

Images, RWD & SEO : comment charger le fichier adéquat ?

Les développeurs web doivent faire face à l’évolution permanente des technologies qui les entourent. Nous devons concevoir des sites qui s’adaptent à tous les terminaux (et plus uniquement à des écrans d’ordinateurs) et qui soient performants non seulement pour l’utilisateur mais aussi pour le référencement (SEO).

On conçoit donc des sites « responsifs » pour gérer l’affichage et rendre l’expérience utilisateur idéale en fonction du terminal utilisé (mobile, tablette, pc). Il est également conseillé d’optimiser le temps de chargement des pages, de réduire le nombre de requêtes HTTP, et de compresser nos différents fichiers en faisant un passage obligatoire sur les images.

Comment récupérer et afficher la bonne image en fonction du terminal ?

Etude de cas : sur notre site responsif www.mon-site.com nous avons une image sur le bandeau d’accueil qui fait 1200x500px pour 195ko. Pour l’afficher, un simple code comme celui-ci suffit :

<img src="./images/bandeau_accueil.jpg" alt="Bandeau" />

Pour harmoniser l’affichage sur les différents terminaux on peut attribuer une taille fixe en fonction du breakpoint dans lequel on se trouve (par ex 800×500 pour les tablettes, et 320×135 pour les mobiles).

Problème : sur un mobile, nous n’avons pas besoin de charger une grosse image HD de 1200×500 (ça prend du temps, c’est mauvais pour l’UX et Google n’aime pas trop ça d’après son outil PageSpeed). Il nous faudrait dans l’idéal la même image en 320×135. Du coup comment dire à notre html de charger notre image dans la bonne taille ?

On prend notre image, on la retaille dans les 3 formats désirés, ce qui nous donne les trois fichiers suivants :

> bandeau_accueil_large.jpg (1200x500px – 195ko)
> bandeau_accueil_medium.jpg (800x500px – 95ko)
> bandeau_accueil_small.jpg (320x135px – 13ko)

Premier constat, outre la diminution de la taille en pixels, on divise par 14 le poids de notre image « small ». C’est déjà une bonne nouvelle. Maintenant on va se pencher sur la partie HTML, auparavant on avait un simple appel standard. Désormais on va utiliser la balise HTML5 <picture> pour lui spécifier plusieurs sources.

En voici la syntaxe :

  <picture alt="Texte sur notre image">
      <source srcset="image/bandeau_accueil_large.jpg" media="(min-width: 1200px)">
      <source srcset="image/bandeau_accueil_medium.jpg" media="(min-width: 800px)">
      <source srcset="image/bandeau_accueil_small.jpg" media="(min-width: 320px)">
      <img srcset="image/bandeau_accueil_large.jpg" alt="image par défaut">
  </picture>

On ajoute une source par taille en spécifiant le chemin adéquat pour chaque image mais aussi sur quel breakpoint on souhaite que cela charge (media). On rajoute également un <img> pour spécifier l’image par défaut si le navigateur ne parvient pas à manipuler ou charger les sources du dessus. Dans notre cas on souhaite que par défaut il s’agisse de l’image la plus grande.

Peut-on utiliser la balise HTML5 <picture> sur n’importe quel navigateur ?

La réponse est non ! Petit détour sur Can I Use concernant notre balise <picture> qui n’est encore que très partiellement compatible. Pour remédier à ce problème nous avons opté pour le polyfill picturefill (plugin javascript) qui va faire en sorte que les notions HTML5 comme picture, srcset sizes, etc… fonctionnent sur les navigateurs anciens. Il suffit de rajouter l’appel au script juste en bas de notre page.

<script src="js/picturefill.min.js"></script>

Le résultat ?

Nous obtenons désormais un temps de chargement meilleur sur nos tablettes / smartphones car les images sont plus rapides à charger (HTTP). De son côté PageSpeed ne nous demande plus d’optimiser notre image car elle a été compressée/optimisée et désormais nous est retournée sur le format adéquat.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Test balise Picture</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1>Notre site de test</h1>
    <picture alt="Texte sur notre image">
      <source srcset="image/bandeau_accueil_large.jpg" media="(min-width: 1200px)">
      <source srcset="image/bandeau_accueil_medium.jpg" media="(min-width: 800px)">
      <source srcset="image/bandeau_accueil_small.jpg" media="(min-width: 320px)">
      <img srcset="image/bandeau_accueil_large.jpg" alt="image par défaut">
    </picture>
    <script src="picturefill.min.js"></script>
  </body>
</html>

D E M O (sur le site officiel picturefill)

Il sera intéréssant de suivre dans le temps l’évolution des différentes balises HTML5 et de la compatibilité sur les navigateurs. Il existe également de nombreuses solutions/syntaxes pour répondre à ce problème de chargement d’image en fonction du format, etc… Nous avons opté pour celle-ci car elle nous semblait la plus simple et la plus sûre dans le temps. Affaire à suivre.

Meta Facebook

Lorsqu’on met un lien « Partager » de Facebook sur une page html, il arrive parfois que ce ne soit pas les bonnes informations qui apparaissent sur l’encart Share…

encart-share

Nous allons donc étudier comment gérer les données utilisées par cet encart.

Tout d’abord, nous allons mettre un lien html simple qui permet de partager notre page :

<a href="https://www.facebook.com/sharer/sharer.php?u=http://www.monsite.fr/mapage.html" target="_blank">Partager sur Facebook</a>.

/!\ Ce n’est pas un plugin Facebook et il n’y a pas de javascript d’utilisé.

Par défaut, si nous ne spécifions pas de meta données, Facebook va prendre dans la page html les informations suivantes :

  • pour le titre : meta title de la page (si présent)
  • pour la description : meta description (si présente, sinon du texte quelconque de la page)
  • pour l’image : une qui est présente sur la page

L’inconvénient, c’est qu’on risque d’avoir des informations qui ne nous conviennent pas : une image ne correspondant pas à notre information, un titre non significatif, une description trop courte…

Pour y remédier, nous allons insérer les balises meta de Facebook dans le <head> de notre page.

 <meta property="og:url" content="http://www.monsite.fr/mapage.html" />
 <meta property="og:title" content="Mon site - Ma page"/>
 <meta property="og:image" content="http://www.monsite.fr/images/encart-accueil.jpg"/>
 <meta property="og:site_name" content="Mon site"/>
 <meta property="og:description" content="Description de ma page." />

/!\ L’image doit avoir une taille minimale de 200*200px.

Avec ces meta, nous pouvons contrôler les informations affichées sur les encarts « Partager ».

Attention, quand même, lorsque vous faites une modification dans ces données, Facebook garde en cache les meta pendant 2-3 jours minimum (ou plus !). Pour pallier à ce souci, il faut vider le cache de Facebook grâce à un outil de debug :

https://developers.facebook.com/tools/debug/og/object/

Si après avoir tapé l’url du site, nous cliquons sur « Show existing scrape information », les données affichées vont être celles en cache… Pas très intéressant !

Donc, nous allons cliquer sur le bouton « Fetch new scrape information » et là… ce sont les nouvelles informations qui apparaissent. En réalité cette action vide le cache de Facebook.

Et en retournant sur notre lien « Partager », ce sont bien les nouvelles données qui apparaissent !

Lien intéressant : https://css-tricks.com/essential-meta-tags-social-media/

PageSpeed insight : analyse en ligne suffisante ?

PageSpeed Insights est un ensemble d’outils conçus par Google permettant d’optimiser les performances d’un site internet pour PC et mobiles. Cette famille d’outils se compose de modules pour analyser un site (diagnostic) et pour optimiser les performances de celui-ci.

Ces outils ne listent pas la totalité des choses à faire ou ne pas faire mais en donnent une bonne partie. Google vous recommande donc de suivre ses conseils mais cela ne veut pas dire que votre site sera parfait et irréprochable en respectant à la lettre ces derniers.

Dans notre cas l’analyse en ligne (diagnostic) nous retourne des indicateurs et des données très intéressante que nous nous devons de maitriser. Cela nous permet entre autre d’adopter de bonnes pratiques de développement pour réduire le temps de chargement d’une page, compresser nos images et nos différents fichiers (css, js), et de réduire le temps de chargement de nos pages (problème majeur pris en compte depuis l’arrivée des mobiles qui surfent via des petites connexions 3G).

Nous nous chargeons donc d’optimiser manuellement notre code source en fonction des retours pour coller au mieux à ces recommandations. L’optimisation proposée par le biais d’un module à installer directement sur le serveur ou d’un service semble très intéressante mais nous n’estimons pas nécessaire de l’intégrer sur nos serveurs (lourd à mettre en place, beaucoup de configurations à effectuer avec la notion de filtres, futur service payant ?). Il sera intéressant tout de même d’analyser dans le futur le chemin choisi par Google en proposant ce genre de services (payants ?) pour contrôler au mieux les sites.

Nous allons donc continuer à utiliser l’analyse en ligne qui nous a notamment permis de mieux aborder certaines notions comme l’expérience utilisateur sur les mobiles, la compression de fichiers et d’images, l’importance de la ligne de flottaison, le format (px) des images en fonction du terminal source, le cache, le nombre de requêtes HTTP effectués etc.

Display

« Le display désigne la publicité sur Internet avec achat d’espace et utilisation d’éléments graphiques ou visuels (bandeaux, pavés, skyscrapers, etc.) ».

Une campagne sur le réseau display permet aux annonceurs de développer leur image et la notoriété de ses marques ou produits et donc obtenir une audience. Ne vous attendez donc pas à un ROI rapide et immédiat. Il n’est donc pas très pertinent de faire du display pour un site e-marchand sauf si vous proposez une offre alléchante (produits offerts, promotion impactante…).

Différents outils sont à votre disposition pour faire vos campagnes display :

– Google adwords (onglet réseau display) :  suivant le montant alloué au CPC (coût par clic), vos annonces illustrées seront donc visibles en fonction du paramétrage de votre campagne : mots clés, emplacements gérés… La mise en place d’une telle campagne nécessite un long travail en amont pour être présent sur les sites pertinents selon votre cible.

  • inconvénients : long travail pour être précis sur le choix de présence sur les sites internet, difficile d’estimer un CPC, attention au clicktag de votre annonce qui doit être bien renseigné
  • avantages : google dispose de nombreux sites partenaires, outil récent et donc pas encore très couteux, paramétrage précis de la campagne

– Ad exchange : plateforme virtuelle automatisée qui met en relation directe les acheteurs et vendeurs de publicité sur Internet, autour d’un prix et/ou d’un espace variables.

Quel budget pour votre campagne Display ?

Une opportunité pour facebook ?

Facebook a fait son entrée dans le secteur du retargeting avec l’ouverture de sa plateforme publicitaire en temps réel, Facebook Exchange.

Facebook exchange va utiliser les recherches faites par les abonnés sur un produit, un loisir, un besoin et une publicité va alors s’afficher en fonction de la reqûete. Par exemple, vous cherchez une sucette pour bébé, une annonce présentant une boutique de puériculture apparaîtra. Les annonceurs peuvent ainsi consulter toutes les données personnelles et privées des utilisateurs, via le réseau social, en se basant sur toutes les activités, qu’il s’agisse d’apposition de « likes », de l’historique, ou d’une quelconque autre action sur Facebook.

Apparemment le service semble déjà avoir séduit 65% des publicitaires de facebook. L’idée est la suivante : dans la mesure où les gens passent la plupart du temps sur leur page avec ces différentes publicités de voyage, de vêtements…autant leur fournir immédiatement l’intégralité d’un service et toutes ses possibilités. Il semblerait que le taux de conversion soit 10 fois plus important.

Actuellement en phase de test, cette nouvelle plateforme devrait prochainement être le nerf de la guerre du display !

F-boutique ou F-commerce

L’année 2012 est l’année des boutiques sur les médias sociaux. Le but étant de transformer les ‘j’aime’ en ‘j’achète’. Après plusieurs recherches sur le web, vous trouverez ci-dessous des illustrations de mise en place :

– Saveur-biere.com : http://www.facebook.com/home.php#!/SaveurBiere?v=app_112843132107068&ref=ts

– Naf Naf : http://www.facebook.com/home.php#!/nafnaf.com?v=app_121212057891106&ref=search

Il existe de nombreux prestataires pour créer votre boutique :

Bookset (une solution d’optimisation pour les campagnes publicitaires sur Facebook.): permet de créer un pont entre votre site marchand et votre communauté. Utilisez la f-Boutique comme support complémentaire pour enrichir votre Community Management. Animez le contenu de votre boutique en fonction de votre actualité, mais surtout des attentes de vos fans : présentez un extrait de votre catalogue, faites les participer sur les choix de produits, et proposez leur des sélections qualitatives qui les intéressent. Proposez une expérience utilisateur sur mesure à vos fans, de la charte graphique à la navigation. L’API Boosket.Shops vous soulage des mécaniques de gestion de catalogue (fiche produit, catégorisation, recherche, pagination, tracking, statistiques, …).

Il y a une version gratuite pour la création de boutique sur facebook mais le lien ne fonctionne pas pour le moment.

Nurun : L’agence interactive Nurun a lancé en avril 2011 une application Facebook de vente en ligne, elle aussi destinée à transformer en clients les fans des marchands. Baptisée TransformR, elle permet à l’internaute d’effectuer un achat sans quitter le réseau social et propose de personnaliser son expérience en lui présentant des produits en fonction de son profil socio-démographique, de ses goûts, des goûts de ses amis, de ses achats pour lui-même, de ses achats de cadeaux…

– Pepita / Nexway : spécialisée dans les applications e-commerce sur les réseaux communautaires, a lancé en 2011 sa solution Pepita Facebook Store, qui permet aux e-marchands de créer et d’animer des opérations commerciales ciblées sur Facebook. La solution permet comme ses concurrentes de mener des opérations de type ventes flash, soldes, exclusivités pour les fans ou autres opérations marketing. Le marchand peut, là encore, choisir d’intégrer entièrement le processus de paiement à son F-store. L’agence marketing 2.0 Brand Ministry, qui propose à ses clients de concevoir leur F-boutique grâce à Pepita Facebook Store, a ainsi convaincu le site marchand Access&Go.

(source : http://www.journaldunet.com/ebusiness/commerce/boutique-facebook/)

Pourquoi créer une boutique sur facebook?

  • augmenter le trafic sur notre site web
  • générer plus de chiffre d’affaires
  • proposer des ventes privées à nos fans
  • engager la communauté
  • plus de visibilité grâce à l’insertion du catalogue produits
  • outil de promotion et de mise en avant des produits
  • et puis n’oubliez pas : facebook est le réseau social le plus fréquenté!

 

Pour info, si vous souhaitez récupérer les informations (graph) liées à une page facebook, utilisez https://graph.facebook.com/ + nom de la page (exemple : https://graph.facebook.com/cocacola )

{
   "id": "40796308305",
   "name": "Coca-Cola",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/174560_
40796308305_2093137831_s.jpg",
   "link": "http://www.facebook.com/coca-cola",
   "likes": 40924813,
   "cover": {
      "cover_id": "10150682306963306",
      "source": "http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720
x720/416803_10150682306963306_40796308305_9337341_812683101_n.jpg",
      "offset_y": 0
   },
   "category": "Food/beverages",
   "is_published": true,
   "website": "http://www.coca-cola.com",
   "username": "coca-cola",
   "founded": "1886",
   "description": "Created in 1886 in Atlanta, Georgia, by Dr. John 
S. Pemberton, Coca-Cola was first offered as a fountain beverage at 
Jacob's Pharmacy by mixing Coca-Cola syrup with carbonated water. \n
\nCoca-Cola was patented in 1887, registered as a trademark in 1893 
and by 1895 it was being sold in every state and territory in the 
United States. In 1899, The Coca-Cola Company began franchised 
bottling operations in the United States. \n\nCoca-Cola might owe 
its origins to the United States, but its popularity has made it 
truly universal. Today, you can find Coca-Cola in virtually every 
part of the world.",
   "about": "The Coca-Cola Facebook Page is a collection of your 
stories showing how people from around the world have helped make 
Coke into what it is today.",
   "can_post": true,
   "checkins": 81,
   "talking_about_count": 285815
}

Les extraits enrichis – moteurs de recherche

Les extraits enrichis sont des informations supplémentaires qui s’affichent lors du résultat d’une recherche par un internaute dans les différents moteurs de recherche (Google, Yahoo, Bing), voir l’exemple ci-dessous.

Extraits enrichis - Google
Extraits enrichis - Google

Le but étant de donner à l’internaute des informations pertinentes de la page référencée dans les résultats de la recherche qu’il vient d’effectuer.

Par exemple, il peut être intéressant d’afficher :

  • la note attribuée par les internautes à une page produit, ainsi que le nombre de votants
  • la photo d’un produit, le prix d’un article
  • des détails (nom, prénom, photo, profession, son poste, localisation géographique) sur une personne pour référencer une page web qui contient un cv.
  • des informations pour une société/entreprise (nom, adresse, téléphone et coordonnées géographiques telles que la longitude et la latitude permettant l’affichage d’une carte Google dans le résultat de la recherche)

L’internaute voit ainsi des informations plus détaillées sur sa recherche, ce qui peut le motiver à cliquer sur le lien en question si les informations sont suffisamment pertinentes.

Pour afficher ces informations, il faut l’indiquer aux moteurs de recherche à l’aide d’un balisage HTML supplémentaire. Le format recommandé par Google est le microdata (ou microdonnée).

En voici un exemple pour baliser une adresse :

<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed" itemscope itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">Nom de l'entreprise</span>
Adresse :
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">21 rue des tests</span>,
<span itemprop="locality">Caen</span>,
<span itemprop="region">Basse-normandie</span>.
</span>
<a href="http://test.exemple.com" itemprop="url">http://test.exemple.com</a>
</span>
</div>

Vous trouverez aussi, un article pour référencer et afficher votre système de notation dans les résultats des moteurs de recherche.

Une documentation technique sur les extraits enrichis est disponible ici.

Il est possible de tester le résultat que donnera votre code dans un moteur de recherche à cette adresse http://www.google.com/webmasters/tools/richsnippets .

Timeline facebook

A partir du 30 mars, les pages facebook vont changer notamment suite à l’intégration de la timeline (autrement dit un espèce d’agenda qui mettra les informations de manière chronologique).

Qu’est ce qui change?

le visuel de couverture : la taille de cette photo de couverture est de 851×315 pixels. Ce visuel pourra intégrer un logo, un événement précis ou un visuel attractif afin de capter l’attention du fan ou du futur fan. La photo de profil sera positionnée en bas à gauche de cette page de couverture (attention la taille a changé et est devenue plus petite)

les onglets : la disposition a changé. Vous les trouverez maintenant en bas de la timeline. Vous pouvez intégrer des onglets supplémentaires (exemple une boutique facebook, newsletter…). A noter que le nombre de fans de votre page sera mis en avant avec l’onglet fan présent à côté de l’onglet photos.

le bouton message : les internautes auront la possibilité de contacter directement la page en cliquant sur ce bouton. Il s’agit ici d’une grande nouveauté pour les pages

historique des interactions : ce n’est pas une nouveauté mais plutôt une refonte totale de leur disposition avec une mise en avant visuelle des photos, des vidéos et des posts

onglet administration : l’administration des pages est simplifiée. En cliquant sur un seul bouton, vous aurez la possibilité d’accéder au panneau de contrôle afin d’effectuer les modifications nécessaires. Vous accèderez aussi aux statistiques (qui ont d’ailleurs un nouveau look suite aux nombreuses critiques), aux nouvelles notifications (nouveaux j’aime, commentaires des fans, messages privés envoyés par les utilisateurs…

N’oubliez pas la date du 30 mars 2012 pour faire les modifications : après cette date, toutes les pages disposeront de la nouvelle timeline!

Ci-dessous, des liens intéressants :