Le forum des utilisateurs iWeb
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

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

2 participants

Aller en bas

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

Message par DrOSX 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

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




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é
Partager votre page via Facebook, Twitter, e-Mail - AddThis Addthi11



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

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



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


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





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...

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


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
Partager votre page via Facebook, Twitter, e-Mail - AddThis Addthi16



Extrait du Support AddThis User Community


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

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

Revenir en haut Aller en bas

Partager votre page via Facebook, Twitter, e-Mail - AddThis Empty Complément du tutoriel pour les non-débutants

Message par koeklin 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
Partager votre page via Facebook, Twitter, e-Mail - AddThis Bouton10




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>
koeklin
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

Revenir en haut

- Sujets similaires

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