Partager votre page via Facebook, Twitter, e-Mail - AddThis

Voir le sujet précédent Voir le sujet suivant Aller en bas

Partager votre page via Facebook, Twitter, e-Mail - AddThis

Message par DrOSX le 9/8/2010, 10:02

Il existe plusieurs formules pour partager vos sites web ou vos blogs.

Nous allons utiliser le Widget AddThis qui vous permettra de partager une page de votre site réalisé avec iWeb parmi une centaine d'autres sites (Twitter, Facebook.....)

Voici les étapes à suivre:


1. Inscription au site AddThis






2. Choix du service utilisé et du design de votre bouton


Choisir "website" dans notre cas, puis cliquez sur "Get your button" et copier le code HTML donné




3. Créez un fragment HTML dans la page que vous souhaitez partager





4. Copier / Coller le code fournit par le site AddThis dans un fragment HTML








5. Modifier le code HTML


Le début de votre code ressemble à ça:

Code:
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=XXXXXXX"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>


Il vous faut y ajouter le code suivant juste après

Code:
<script type="text/javascript">
  var addthis_share = {
    url: 'http://www.votreDomaine.com/MaPageAPartager.html',
    title: 'Home'
  }
</script>

Changer dans le code ci dessus:

'http://www.votreDomaine.com/MaPageAPartager.html' par la page à partager. (cela peut être n'importe quelle page...)

Attention: Soyez certain de bien entrer l' URL de votre page sans erreur; je vous conseille de publier votre site et de vérifier l'adresse URL exacte dans votre navigateur. Il ne vous reste plus qu'à faire un copier/coller




6. Agrandissez la fenêtre "Share" sans "Appliquer" le code html
Si vous cliquez sur "Appliquer", la fenêtre se referme...




7. Enregistrer votre site, publiez puis connectez-vous à la page créée

Il ne vous reste plus qu'à cliquer sur le bouton et sélectionner vos partages..
Wink




Extrait du Support AddThis User Community


Dernière édition par jeancharleslast le 9/2/2011, 12:15, édité 5 fois
avatar
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

Complément du tutoriel pour les non-débutants

Message par koeklin le 13/8/2010, 23:49

1/ Complément du tuto pour n'afficher que le bouton Facebook & Twitter

(et dans la plupart des cas ne plus avoir cette encart qui s'ouvre sous le(s) bouton(s))
Par ex. pour des icones de 64 x 64 pour Facebook et Twitter, voici le code à insérer:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Share</title>
<head>
<style type="text/css">
/* Custom Icons */
.addthis_toolbox .custom_images a {
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
}
.addthis_toolbox .custom_images a img {
    opacity: 1.0;
}
.addthis_toolbox .custom_images a:hover img {
    opacity: 0.75;
}
</style>
</head>
<body>
   <div class="addthis_toolbox">
     <div class="custom_images">
         <a class="addthis_button_facebook"><img src="url/de/mon/image/facebook.png" width="64" height="64" alt="Share to Facebook" /></a>
      <a class="addthis_button_twitter"><img src="url/de/mon/image/twitter.png" width="64" height="64" alt="Share to Twitter" /></a>
     </div>
   </div>
   <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
   <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=nomdutilisateur"></script>
   <script type="text/javascript">
     var addthis_share = {
       url: 'url/que/je/veux/partager.html',
       title: 'nom-qui-apparaitra-sur-twitter-ou-facebook-avec-mon-lien'
     }
   </script>
</body>   
</html>

Au préalable:
-Hébergez vos image sur le net (sur votre serveur par ex. )
-Récupérer leurs URL

-Changer dans le code ci-dessus:
  • La taille des boutons: 64 (la largeur et la hauteur de vos boutons) /!\ (apparait 4 fois dans ce code.)
  • url/de/mon/image/facebook.png
  • url/de/mon/image/twitter.png
  • url/que/je/veux/partager.html
  • nomdutilisateur
  • nom-qui-apparaitra-sur-twitterou-facebook--avec-mon-lien


Un exemple avec des images en 20 px x 20 px




2/ Complément du tutoriel pour fixer les dimensions du Widget addthis.

Vous l'avez sans doute remarquer après avoir valider son code il faut souvent redimensionner le widget manuellement.
Voici les codes pour ne plus à avoir à le faire
(Ces dimensions sont celles que l'on doit mettre quand on choisit d'afficher le bouton "share" (menu) ou le bouton mail (formulaire à remplir))

Code:
<div style="width:350px;height:400px;">
coller le code de addthis
</div>

Par ex. pour le code que JC donne comme exemple

Code:
<div style="width:350px;height:400px;">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=votrenomdutilisateur"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript">
var addthis_share = {
url: 'http://url/de/la/page/que/vous/voulez/partager.html',
title: 'le titre de la page que vous voulez partager'
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=votrenomdutilisateur"></script>
<script type="text/javascript">
</div>

Changer dans le code ci-dessus votrenomdutilisateur (deux fois), http://url/de/la/page/que/vous/voulez/partager.html, le titre de la page que vous voulez partager





3/Complément du tutoriel si vous voulez que le menu s'ouvre au dessus du bouton, voici le code :

Voici la méthode si vous n'affichez qu'un bouton unique (comme ceux par défaut) pas plusieurs (comme dans mon post précédent)

Pour commencer, plus que jamais on utilise celui là
Code:
<div style="width:350px;height:400px;">
coller le code de addthis
</div>

il faut remplacer dans la balises img (si addthis affiche un bouton unique)
Code:
style="border:0;"
par
Code:
style="border: 0;position:absolute;bottom: 0;"

et
ajouter à la fin du code :
Code:
<script type="text/javascript">
var addthis_config = {
ui_hover_direction: 1
}
</script>

toujous avec le même exemple :

Code:
<div style="width:350px;height:400px;">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=votrenomdutilisateur"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border: 0;position:absolute;bottom: 0;"/></a>
<script type="text/javascript">
var addthis_share = {
url: 'http://url/de/la/page/que/vous/voulez/partager.html',
title: 'le titre de la page que vous voulez partager'
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=votrenomdutilisateur"></script>
<script type="text/javascript">
var addthis_config = {
ui_hover_direction: 1
}
</script>
</div>

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum