Passer à l'action avec Open Graph
                   Stéphane Tauziede
                           8 Mars 2012
Social Channels

                                Ticker




                               NewsFeed


Timeline (Journal)
Les nouvelles pages



                                 Applications




                                      Milestones
                                    (moments - clés)




A propos   Pin to Top
<meta property = ‘‘og:   Open Graph Protocol ’’>

 Formatez vos données pour
 un usage avec Open Graph.
                                    http://ogp.me/
Social Plugins : les fondamentaux
    Connect       Commentaires       L’activité




Recommandations    Live Stream       Like Box




   Inscription      Facepile


                                 sans oublier....
Social Plugins : Like VS Send
 J’aime              Je partage
Social Plugins : S’abonner

               • Adapté aux profils

               • Permet une
                 différentiation entre le
                 site et l'auteur

               • Renforce la
                 "personnification"

               • Respecte la frontière vie
                 privée / publique

               • A intégrer dans les infos
                 auteurs...
Aimer n’est plus la seule action...
Open Graph en quelques exemples...

Affichage en temps
   réel de l’action
  dans le Ticker et
lien vers le contenu




                       Exemple d’agrégation des
                                  objets :
                       http://facebook.com/music
Open Graph en quelques exemples...




Des applications à
 installer dans le
     Journal.
Open Graph en quelques exemples...




               Les applications
                possèdent leur
               propre Timeline
                    http://
                facebook.com/
               user/nomdelapp
Créez une application pour
  votre site en 5 étapes
Etape 1 : créer l’application
Etape 2 : connecter l’utilisateur
      <div class="fb-login-button" data-show-faces="true" data-
  width="200" data-max-rows="1" scope="publish_actions"></div>
Etape 3 : définir les actions, objets et
             agrégations


                               Verbe
                              d’action.
Etape 3 : définir les actions, objets et
             agrégations


                               L’objet
                                  de
                               l’action
Etape 3 : définir les actions, objets et
             agrégations
Etape 4 : publier les actions
<script type="text/javascript">
function postPresentation()
     {FB.api('/me/smoseocampus:appreciate?presentation=http://www.what-id.com/
     smoapp.html','post',function(response) {if (!response || response.error) {alert('Merci de vous connecter
     via la première etape');} else {alert('MERCI !');}
});} </script>




              <form>
                 <input type="button" value="Faites le savoir !" onclick="postPresentation()" />
              </form>
Etape 5 : le résultat !
Vous voulez essayer ?




           http://j.mp/smoapp
Quelques conseils

• Saisissez vos actions et objets en Anglais puis
  appliquez la traduction.

• Soyez explicites sur les autorisations demandées
  aux utilisateurs

• Ne polluez pas vos utilisateurs par des
  publications masquées (ex:reload)

• Placez Facebook Insight sur votre site pour
  compléter les données
Merci !


  Connectons nous :
     @stauziede
      @whatid
facebook.com/whatid

Passer à l'action avec Open Graph

  • 1.
    Passer à l'actionavec Open Graph Stéphane Tauziede 8 Mars 2012
  • 2.
    Social Channels Ticker NewsFeed Timeline (Journal)
  • 3.
    Les nouvelles pages Applications Milestones (moments - clés) A propos Pin to Top
  • 4.
    <meta property =‘‘og: Open Graph Protocol ’’> Formatez vos données pour un usage avec Open Graph. http://ogp.me/
  • 5.
    Social Plugins :les fondamentaux Connect Commentaires L’activité Recommandations Live Stream Like Box Inscription Facepile sans oublier....
  • 6.
    Social Plugins :Like VS Send J’aime Je partage
  • 7.
    Social Plugins :S’abonner • Adapté aux profils • Permet une différentiation entre le site et l'auteur • Renforce la "personnification" • Respecte la frontière vie privée / publique • A intégrer dans les infos auteurs...
  • 8.
    Aimer n’est plusla seule action...
  • 9.
    Open Graph enquelques exemples... Affichage en temps réel de l’action dans le Ticker et lien vers le contenu Exemple d’agrégation des objets : http://facebook.com/music
  • 10.
    Open Graph enquelques exemples... Des applications à installer dans le Journal.
  • 11.
    Open Graph enquelques exemples... Les applications possèdent leur propre Timeline http:// facebook.com/ user/nomdelapp
  • 12.
    Créez une applicationpour votre site en 5 étapes
  • 13.
    Etape 1 :créer l’application
  • 14.
    Etape 2 :connecter l’utilisateur <div class="fb-login-button" data-show-faces="true" data- width="200" data-max-rows="1" scope="publish_actions"></div>
  • 15.
    Etape 3 :définir les actions, objets et agrégations Verbe d’action.
  • 16.
    Etape 3 :définir les actions, objets et agrégations L’objet de l’action
  • 17.
    Etape 3 :définir les actions, objets et agrégations
  • 18.
    Etape 4 :publier les actions <script type="text/javascript"> function postPresentation() {FB.api('/me/smoseocampus:appreciate?presentation=http://www.what-id.com/ smoapp.html','post',function(response) {if (!response || response.error) {alert('Merci de vous connecter via la première etape');} else {alert('MERCI !');} });} </script> <form> <input type="button" value="Faites le savoir !" onclick="postPresentation()" /> </form>
  • 19.
    Etape 5 :le résultat !
  • 20.
    Vous voulez essayer? http://j.mp/smoapp
  • 21.
    Quelques conseils • Saisissezvos actions et objets en Anglais puis appliquez la traduction. • Soyez explicites sur les autorisations demandées aux utilisateurs • Ne polluez pas vos utilisateurs par des publications masquées (ex:reload) • Placez Facebook Insight sur votre site pour compléter les données
  • 22.
    Merci ! Connectons nous : @stauziede @whatid facebook.com/whatid