Mettre ce gadget dans votre blog fenêtre Like de Facebook

Libellés

samedi 18 janvier 2014

Le Protocole Open Graph

Introduction

Le protocole Open Graph permet à n'importe quel page web de devenir un objet riche dans une graphe social. Par exemple, il est utilisé sur Facebook pour permettre à n'importe quelle page web d'avoir les mêmes fonctionnalités que tout autre objet sur Facebook.
Bien qu'il existe de nombreuses technologies et des schémas différents qui peuvent être combinés ensemble, il n'y a pas une seule technologie qui fournit suffisamment d'informations pour représenter richement n'importe quelle page web dans la graphe social. Le protocole Open Graph s'appuie sur ces technologies existantes et donne aux développeurs une chose à mettre en œuvre. La simplicité d'intégration est un objectif clé du protocole Open Graph qui a mis en œuvre beaucoup de décisions de conception technique .

Métadonnées de base

Pour activer vos pages web dans les objets de graphique, vous devez ajouter les métadonnées de base de votre page. Nous avons basé la version initiale du protocole sur RDFa qui signifie que vous allez placer des métas supplémentaires <meta> mots-clés dans le <head> de votre page web. Les quatre propriétés requises pour chaque page sont:
  • og:title - Le titre de votre objet tel qu'il apparaît dans le graphique, par exemple, "La Terre".
  • og:type - Le type de votre objet, par exemple, "video.movie". Selon le type que vous spécifiez, d'autres propriétés peuvent également être nécessaires.
  • og:image - Une URL de l'image qui devrait représenter votre objet dans le graphique.
  • og:url - URL canonique de votre objet qui sera utilisée comme identifiant permanent dans le graphique, par exemple, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahK5IWrjKXyOi1saGYowarz0TsBgshSdTGT1jWJ73Ukssm_2cGruSQto3agjspQn3livxufCwr2ls5c5GjwToI2n96okC6Zpq61Ax3YSmVPDhqBpq26hL11kNmpsmfwLg_Tzuk6hO5uE/s1600/googlebot2.png".
A titre d'exemple, voici le balisage du protocole Open Graph  pour un site :
 <html prefix="og: http://ogp.me/ns#"> <head> <title>La Terre (1996)</title> <meta property="og:title" content="La Terre" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://webmaxup.blogspot.com" /> <meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahK5IWrjKXyOi1saGYowarz0TsBgshSdTGT1jWJ73Ukssm_2cGruSQto3agjspQn3livxufCwr2ls5c5GjwToI2n96okC6Zpq61Ax3YSmVPDhqBpq26hL11kNmpsmfwLg_Tzuk6hO5uE/s1600/googlebot2.png" /> ... </head> ... </html> 

Options des Métadonnées 

Les propriétés suivantes sont facultatives pour tout objet et sont généralement recommandées:
  • og:audio - URL d'un fichier audio pour accompagner cet objet.
  • og:description - un à deux  phrases de descriptions de de votre objet.
  • og:determiner - Le mot qui apparaît avant le titre de cet objet dans une phrase. Une énumération de (un, une, le, "", auto). Si auto est choisi, l'utilisateur de vos données doit choisir entre "un" ou "une". Par défaut "" (vide).
  • og:locale - La locale ces balises sont marqués po de format language_TERRITORY . Défaut est en_US .
  • og:locale:alternate - Une gamme d'autres endroits locaux où cette page est disponible
  • og:site_name - Si votre objet fait partie d'un site web grand, le nom qui doit être affiché pour l'ensemble du site. par exemple, "Univers".
  • og:video - Une URL vers un fichier vidéo qui complète cet objet.
Par exemple (saut de ligne uniquement à des fins d'affichage):
 <meta property="og:audio" content="http://example.com/bond/theme.mp3" /> 
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> 
<meta property="og:determiner" content="the" /> 
<meta property="og:locale" content="en_GB" /> 
<meta property="og:locale:alternate" content="fr_FR" /> 
<meta property="og:locale:alternate" content="es_ES" /> 
<meta property="og:site_name" content="IMDb" /> 
<meta property="og:video" content="http://example.com/bond/trailer.swf" /> 

Propriétés structurées

Certaines propriétés peuvent avoir des métadonnées supplémentaires qui leur sont rattachés. Ceux-ci sont spécifiées de la même manière que d'autres métadonnées avec property et content , mais la property a pour informations supplémentaires: .
Le og:image des biens a des propriétés structurées en option:
  • og:image:url - Identique à og:image .
  • og:image:secure_url - Un autre URL à utiliser si la page Web requiert le protocole HTTPS.
  • og:image:type - Un type MIME pour cette image.
  • og:image:width - Le nombre de pixels de large.
  • og:image:height - Le nombre de pixels en hauteur.
Un exemple complet de l'image:
 <meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" /> 
Le og:video balise a les balises identiques à og:image . Voici un exemple:
 <meta property="og:video" content="http://example.com/movie.swf" /> <meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video:width" content="400" /> <meta property="og:video:height" content="300" /> 
Le og:audio tag n'a que les 3 premières propriétés disponibles (depuis la taille n'a pas de sens pour le son):
 <meta property="og:audio" content="http://example.com/sound.mp3" /> <meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /> <meta property="og:audio:type" content="audio/mpeg" /> 

Tableaux

Si une balise peut avoir plusieurs valeurs, il suffit de mettre plusieurs versions de la même <meta> tag sur votre page.La première balise (de haut en bas) est privilégié lors des conflits.
 <meta property="og:image" content="http://example.com/rock.jpg" /> <meta property="og:image" content="http://example.com/rock2.jpg" /> 
Mettez propriétés structurés après vous déclarez leur balise racine. Chaque fois qu'un autre élément racine est analysée, que la propriété structuré est considéré comme fait et une autre commence.
Par exemple:
 <meta property="og:image" content="http://example.com/rock.jpg" /> <meta property="og:image:width" content="300" /> <meta property="og:image:height" content="300" /> <meta property="og:image" content="http://example.com/rock2.jpg" /> <meta property="og:image" content="http://example.com/rock3.jpg" /> <meta property="og:image:height" content="1000" /> 
signifie qu'il ya 3 images sur cette page, la première image est 300x300 , celle du milieu a des dimensions non spécifiées, et le dernier est 1000 px de hauteur.

Types d'objet

Pour que votre objet à représenter dans le graphique, vous devez spécifier son type. Ceci est fait en utilisant le og:typebien:
 <meta property="og:type" content="website" /> 
Lorsque la communauté est d'accord sur le schéma pour un type, il est ajouté à la liste des types mondiaux. Tous les autres objets dans le système de type sont curies de la forme
 <head prefix="my_namespace: http://example.com/ns#"> <meta property="og:type" content="my_namespace:my_type" /> 
Les types mondiaux sont regroupés en marchés verticaux. Chaque verticale a son propre espace de noms. Lesog:type de valeurs pour un espace de noms sont toujours précédés de l'espace de noms, puis une période. Cela permet de réduire la confusion avec les types d'espaces de noms définis par l'utilisateur qui ont toujours deux points en eux.

Musique

og:type valeurs:
  • music:duration - entier > = 1 - La longueur de la chanson en quelques secondes.
  • music:album - music.album tableau - L'album cette chanson est de.
  • music:album:disc - entier > = 1 - Quel disque de l'album cette chanson est sur.
  • music:album:track - entier > = 1 - Quels suivre cette chanson est.
  • music:musician - profil tableau - Le musicien qui a fait cette chanson.
  • music:song - music.song - La chanson sur cet album.
  • music:song:disc - entier > = 1 - La même chose que music:album:disc mais en sens inverse.
  • music:song:track - entier > = 1 - La même chose que music:album:track mais en sens inverse.
  • music:musician - profil - Le musicien qui a fait cette chanson.
  • music:release_date - datetime - La date de l'album a été libéré.
  • music:song - identiques à ceux sur music.album
  • music:song:disc
  • music:song:track
  • music:creator - profil - Le créateur de cette playlist.
  • music:creator - profil - Le créateur de cette station.

Vidéo

og:type valeurs:
  • video:actor - profil réseau - Les acteurs du film.
  • video:actor:role - chaîne - Le rôle qu'ils ont joué.
  • video:director - profil réseau - Administration du film.
  • video:writer - profil tableau - Écrivains du film.
  • video:duration - entier > = 1 - La longueur du film en quelques secondes.
  • video:release_date - datetime - La date à laquelle le film a été libéré.
  • video:tag - chaîne réseau - mots Tag associés à ce film.
  • video:actor - Identique à video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series - video.tv_show - Quelle série cet épisode appartient.
Une émission de télévision plusieurs épisodes. Les métadonnées est identique à video.movie .
Une vidéo qui n'appartient pas à une autre catégorie. Les métadonnées est identique à video.movie .

Pas Vertical

Ceux-ci sont globalement les objets qui juste ne rentrent pas dans un plan vertical, mais encore sont largement utilisés et convenus définis.
og:type valeurs:
article - espace de noms URI: http://ogp.me/ns/article#
  • article:published_time - datetime - Lorsque l'article a été publié.
  • article:modified_time - datetime - Lorsque l'article a été modifiée en dernier.
  • article:expiration_time - datetime - Lorsque l'article est mis à jour après.
  • article:author - profil réseau - Les auteurs de l'article.
  • article:section - chaîne - Un nom de section de haut niveau. Par exemple, la technologie
  • article:tag - chaîne réseau - mots Tag associé à cet article.
book - espace de noms URI: http://ogp.me/ns/book#
  • book:author - profil tableau - Qui a écrit ce livre.
  • book:isbn - chaîne - La ISBN
  • book:release_date - datetime - La date à laquelle le livre a été publié.
  • book:tag - chaîne réseau - mots Tag associés à ce livre.
profile - espace de noms URI: http://ogp.me/ns/profile#
  • profile:first_name - chaîne - Un nom normalement donnée à une personne par un parent ou un auto-choisi.
  • profile:last_name - chaîne - Un nom hérité d'une famille ou le mariage et par lequel l'individu est communément connu.
  • profile:username - chaîne - Une chaîne courte unique pour les identifier.
  • profile:gender - énumération (mâle, femelle) - Leur sexe.
website - espace de noms URI: http://ogp.me/ns/website#
Pas de propriétés supplémentaires autres que ceux de base. N'importe quelle page Web non-balisé doit être traitée comme og:type site.

Types

Les types suivants sont utilisés lors de la définition des attributs dans le protocole Open Graph.
TypeDescriptionLittéraux
BooleanBooléenne représente une valeur vrai ou fauxvrai, faux, 1, 0
DateTimeDateTime représente une valeur temporelle composée d'une date (année, mois, jour) et une composante de temps en option (heures, minutes)ISO 8601
EnumUn type constituée d'un ensemble borné de valeurs de chaîne constantes (membres de dénombrement).Une valeur de chaîne qui est un membre de l'énumération
FloatA 64-bit nombre à virgule flottante signéTous les littéraux qui sont conformes aux formats suivants:

1.234
-1,234
1.2e3
-1.2e3
7E-10 
EntierUn nombre entier 32 bits signé. Dans de nombreuses langues entiers sur 32 bits deviennent flotteurs, donc nous limiter protocole Open Graph pour une utilisation facile multi-langue.Tous les littéraux qui sont conformes aux formats suivants:

1234
-123 
ChaîneUne séquence de caractères UnicodeTous les littéraux composés de caractères Unicode avec aucun des caractères d'échappement
URLUne séquence de caractères Unicode qui identifient une ressource Internet.Toutes les URL valides qui utilisent les protocoles http:// ou https://


mardi 14 janvier 2014

Un site e-commerce avec un minimum de frais

Avoir un site, revient à posséder un outil de communication efficace et moderne.
Un site web aussi un outil efficace de marketing. Il permet de communiquer avec ses clients et offre la possibilité d'attirer d'autres clients.
Si, par exemple, vous avez ouvert une boutique dans une grande avenue d'une grande ville, vous serez en attente de dizaines de clients par jour qui sont en passage ou ceux qui ont aimé vos produits et vos prix et qui en ont parlé par la suite à d'autres.
Mais, le nombre de vos clients reste quand même limité géographiquement.
Et si, par contre vous avez ouvert une boutique sur le net, vos clients potentiels risquent d'être de part le Monde entier! Parce que vous avez une boutique situé dans l'avenue du web et qui est très vaste même illimitée.
Aujourd'hui, de plus en plus de personnes préfèrent acheter sur internet et le nombre est en forte croissance. Un jour, il y aura plus de clients pour les boutiques électroniques "virtuelles" que pour les boutiques "réelles".
Ce n'est pas si loin comme les statistiques l'indiquent.
Le temps où la création d'un commerce électronique est un rêve et seules les grandes enseignes y parviennent, est RÉVOLU!
Avec la démocratisation des techniques de création et l'expérience acquise au cours des années, créer un e-commerce revient moins cher et plus sophistiqué avec plusieurs fonctionnalités de gestion dont même celles qui rendent cette gestion de la boutique automatisée.
Vous aussi, si vous avez cette idée de créer un site e-commerce pour vendre des produits ou des services, vous pouvez concrétiser votre projet.
Avec Web Optime, la création d'un site e-commerce est affaire de quelques jours aux moindres frais.
Une boutique clef en main, est une offre qui ne vous laisse que le travail de gestion après initiation.
Comment ça marche?
Vous avez un projet de site e-commerce ou une idée de vendre des produits même que vous n'avez pas encore achetés, vous avez des connaissances élémentaires en internet et vous avez l'enthousiasme et la motivation de réaliser des bénéfices. Cette affaire vous concerne.

  1. Vous soumettez votre projet;
  2. Vous mentionnez le nom de domaine désiré (du type: nom_de_la_boutique.com);
  3. Vous soumettez une liste des produits à vendre et leurs prix;
  4. Vous indiquez quelques informations supplémentaires;
  5. Vous choisissez une apparence.
Vous payez le prix du Pack et vous vous serez en mesure d'assister à la progression de la création de votre boutique durant quelques jours seulement. Vous n'avez pas besoin de demander un devis si votre site ne comporte que les options incluses. Le prix est définitif et sans frais d'installation ni de configuration ni autres.
Passé ce délai, votre site e-commerce est opérationnel et il ne vous reste que de faire l'apprentissage (gratuit) de sa gestion qui est aussi facile que la gestion d'un compte de messagerie.
En prime, vous aurez droit à une garantie satisfait ou remboursé couvrant 30 jours.
Vous serez toujours en contact avec Web Optime pour apporter des modifications, expliquer comment utiliser des fonctions ou tout autre besoin d'aide.
Alors, qu'attendez-vous?