Web dynamique Réseaux sociaux

Boutons des réseaux sociaux

Le bouton de Facebook permet aux visiteurs de diffuser une page Web sur leur mur et ainsi la partager avec leur réseau d'amis.

Exercice 1 : insérer un bouton Like de Facebook

Comment faire

Accéder à la documentation Facebook réservée aux développeurs.

Exemple du code...

<div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "http://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.5&appId=194537455705";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-share-button" data-href="https://www.test.com" data-layout="button_count"></div>

Exercice : insérer un bouton Google+

Comment faire

Accéder à la documentation Google réservée aux développeurs.

Exemple du code...

<!doctype>
<html>
<head>
  <meta charset="utf-8">
  <title>Google+</title>

  <!-- Placez cet appel d'affichage à l'endroit approprié. -->
  <script type="text/javascript">
    window.___gcfg = {lang: 'fr'};

    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
  </script>
</head>
<body>
<!-- Placez cette balise là où vous souhaitez positionner le bouton +1. -->
  <g:plusone annotation="inline" href="http://www.monsite.com"></g:plusone>
</body>
</html>

Exercice : insérer un bouton Twitter

Comment faire

Accéder à la documentation Twitter réservée aux développeurs.

Exemple du code...

<!doctype>
<html>
<head>
  <meta charset="utf-8">
  <title>Twitter</title>
  <script asynch>
    !function( d, s, id ){
      var js, fjs = d.getElementsByTagName( s )[0];
      if( !d.getElementById( id ) ){
        js = d.createElement( s );
        js.id = id;
        js.src = "http://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore( js, fjs );
       }
    }( document, "script", "twitter-wjs" );
  </script>
</head>
<body>
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.monsite.com" data-text="Mon site" data-lang="fr">Tweeter</a>
</body>
</html>