Partager votre page via Facebook, Twitter, e-Mail - AddThis
2 participants
Page 1 sur 1
Partager votre page via Facebook, Twitter, e-Mail - AddThis
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:
Il vous faut y ajouter le code suivant juste après
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..
Extrait du Support AddThis User Community
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..
Extrait du Support AddThis User Community
Dernière édition par jeancharleslast le 9/2/2011, 12:15, édité 5 fois
DrOSX- Administrateur
- Messages : 1338
Inscription : 15/10/2007 Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale
Complément du tutoriel pour les non-débutants
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:
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:
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))
Par ex. pour le code que JC donne comme exemple
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à
il faut remplacer dans la balises img (si addthis affiche un bouton unique)
et
ajouter à la fin du code :
toujous avec le même exemple :
(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;"
- 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>
Sujets similaires
» Twitter
» Page plugin facebook
» Envoyer une page iWeb par E-Mail (Newsletter)
» Créer une page d' Erreur 404 pour votre site web
» Comment partager
» Page plugin facebook
» Envoyer une page iWeb par E-Mail (Newsletter)
» Créer une page d' Erreur 404 pour votre site web
» Comment partager
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|