• A Propos
  • Contact
  • Sitemap
  • FORMATIONS
  • SEO
  • Services
  • Nom de domaine
LeBlogger.fr - Astuces Blogger et Blogspot
  • Home
  • ASTUCES
  • GADGET▼
    • Gadgets Développés
    • Gadget Blogger
  • Referencement▼
    • Referencement Blogger
    • Guide SEO
  • Argent
  • BLOGUER
  • TEMPLATE▼
    • Premium Blogger Templates
    • Free Blogger Template
    • Autres templates Blogger
  • FORUM

15 juin 2009

Home » AstucesBlogger , Bouton , Facebook » Ajouter les Boutons Partager Facebook à votre modèle Blogger

Ajouter les Boutons Partager Facebook à votre modèle Blogger

  MB     15 juin 2009



Le bouton de partage Facebook vous permet d’augmenter le trafic de votre blog en encourageant vos visiteurs à partager les liens de vos articles sur Facebook. Ce bouton détecte automatiquement l'adresse de la page sur laquelle il est. Pour l'utiliser, il vous suffit de choisir le style désiré et de copier son code et le mettre sur les pages de votre blog.
Facebook peut devenu un outils pour les blogger. Quelques lecteurs ont demandé s'il est possible d'ajouter un lien "Partager sur Facebook" à nos modèles de Blogger, et bien que cela est possible...

Je vous expliquerai comment vous pouvez l'ajouter à votre modèle Blogger afin que vos lecteurs puissent publier vos article sur leur facebook...


Modification de votre modèle d'ajouter les liens sur facebook

Allez à "Modèle" > "Modifier le code HTML" cochez la case "Développer des modèles de gadgets"

Pour afficher le bouton au début des articles, placez son code juste après la balise :

<div class='post-header-line-1'>

Si vous désirez afficher le bouton à la fin de vos articles, alors placez le code approprié juste après l'une des lignes suivantes :

<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>
Et collez le code du bouton choisit ci-dessous:

Les Différents code des Boutons de partage Facebook :

 

Version vertical avec compteur :


Boutons partage Facebook : Version vertical avec compteur





<a name="fb_share" type="box_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Version horizontal avec compteur :

Boutons partage Facebook : Version horizontal avec compteur


<a name="fb_share" type="button_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


Version horizontal sans compteur :

Boutons partage Facebook Version horizontal sans compteur 



<a name="fb_share" type="button" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


Icône 16*16 :

Boutons partage Facebook : Icône 16*16 

 

<a name="fb_share" type="icon" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">Partager</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


Bouton large :

<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'large' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

Bouton léger :

<script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'small' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script>

Vous pouvez enregistrer votre modèle blogger et aller voir le resultat.

Désormais, les lecteurs de vos articles pourront publier vos articles sur leur page facebook et augmenter le trafic sur votre blog grace à facebook.

Astuce : Ajouter facebook pop up like box à votre blog blogger pour avoir plus de fan
Par MB Le 6/15/2009
Catégorie: AstucesBlogger, Bouton, Facebook

25 commentaires:

  1. Michèle15 juin, 2009

    Bonjour, je viens d'essayer, mais erreur, donc, qu'entends-tu par "éliminer les espaces dans le dernier code HTML".
    Merci d'avoir pitié des "débutantes"!!

    RépondreSupprimer
    Réponses
      Répondre
  2. Michèle15 juin, 2009

    Bonjour, je viens de tenter l'opération, et, message d'erreur à propos de codes XML mal fermés.
    Qu'entends-tu par "éliminer les espaces dans le dernier code HTML"
    Merci d'avoir pitiés des débutantes!!

    RépondreSupprimer
    Réponses
      Répondre
  3. Le bloggers du net15 juin, 2009

    @Michèle: eliminer les espace entre < ou > et la premiere lettre.

    Exemple : < li> il y a un espace à eliminer donc bien regarder tous le dernier code htlm et éliminer les espaces.

    a+

    RépondreSupprimer
    Réponses
      Répondre
  4. yro nanicox16 juin, 2009

    après plusieurs tentative je me décide a poster ...
    voici mon message d'erreur :

    Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : The reference to entity "title" must end with the ';' delimiter.

    ;(

    RépondreSupprimer
    Réponses
      Répondre
  5. Le bloggers du net17 juin, 2009

    @yro nanicox : il y a six espaces à éliminer entre < et li, < et a, blank et >

    Il faut qu'il n'ai pas espace entre > ou < etles lettres pour que les balise soit fermées.

    a+

    RépondreSupprimer
    Réponses
      Répondre
  6. yro nanicox22 juin, 2009

    j'ai fini par y arriver, (manque d'attention) je te remercie bcp de ta réponse, et pour ton blog, très utile ...
    peace

    RépondreSupprimer
    Réponses
      Répondre
  7. Fox Prime03 juillet, 2009

    c'etait laborieux mais j'ai réussi, merci à toi ;)

    RépondreSupprimer
    Réponses
      Répondre
  8. The Perfect19 juillet, 2009

    Bonjour,
    ça fait des heures que j'essai mais on me signale toujours que mes balises ne sont pas fermées.
    Que celui pour qui ça fonctionne me passe son code.
    Merci

    RépondreSupprimer
    Réponses
      Répondre
  9. Anonyme22 juillet, 2009

    Meme probleme que pour "The Perfect" J'ai suivi les instructions placé à la bonne ligne et retirer les espaces mais Blogger persiste à me dire:
    "Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : The reference to entity "title" must end with the ';' delimiter"

    RépondreSupprimer
    Réponses
      Répondre
  10. Le bloggers du net23 juillet, 2009

    @Sawashier.B et The Perfect : il y a six espaces à éliminer entre < et li, < et a, blank et >

    Il faut qu'il n'ai pas espace entre > ou < et les lettres pour que les balise soit fermées.

    a+

    RépondreSupprimer
    Réponses
      Répondre
  11. aspam11 février, 2010

    Bonsoir,
    Je n'arrive pas à insérer cette ligne de code correspondant au lien facebook car la structure du code html du blog ne correspond pas à du html classique...
    Voir ici : http://aspamsante.blogspot.com
    Auriez-vous une idée ?
    Merci d'avance

    RépondreSupprimer
    Réponses
      Répondre
  12. Le bloggers du net12 février, 2010

    @ASPAM : pour ton blog tu va sur >> Modifier le code HTML (pour inserer le code FACEBOOK) et tu clique >> Développer des modèles de gadgets.

    Ensuite tu fais CTRL+ F pour rechercher ou mettre le code FACEBOOK... tu tape dans la recherche "line-1" pour le mettre endessous du titre OU
    "line-2" en dessous de l'article au choix.

    Et juste en dessous tu colle le code hrml de facebook donné au dessus.

    bonne continuation
    A+

    RépondreSupprimer
    Réponses
      Répondre
  13. Hubert Ferdi15 février, 2010

    Bonjour

    Cette ligne< class="'post-footer-line"> dans mon code htlm ne donne aucun résultat, j'ai bien essayé également de placer le code après tous les "footer" (pouvez-vous être plus précis)merci! ça ne passe pas?

    RépondreSupprimer
    Réponses
      Répondre
  14. Dj Angie16 février, 2010

    Bonjour et merci de toutes ses astuces.
    Voila j'ai un gros souci avec le partage d'articles, en plaçant correctement le code qui fonctionne bien,mais ne publie pas mes articles.
    On dirais que quelques choses bloque et ideme pour mon blog teste.
    pourais tu me dire ce qui cloche?
    adresse de mon blog : http://d-oneradio.blogspot.com/
    et sinon me contacter sur mon mail :
    trucme@hotmail.fr
    Je te remercie par avance.
    Syl

    RépondreSupprimer
    Réponses
      Répondre
  15. webmaster16 mars, 2010

    ça ne marche pas, même en supprimant les 6 espace...

    RépondreSupprimer
    Réponses
      Répondre
  16. Nespo space23 juin, 2010

    je n'ai pas les lignes indiquées plus haut ??
    c'est bizarre non ?
    j'ai mis des nouveaux modeles....
    bouh

    RépondreSupprimer
    Réponses
      Répondre
  17. margarito25 juin, 2010

    herbal viagra
    viagra alternatives

    RépondreSupprimer
    Réponses
      Répondre
  18. Musics-Exclus29 août, 2010

    Bonjour moi j'aimerais savoir comment rajouter la fenetre de sa page facebook comme celle que tu a mise dans la colonne de droite entre "Derniers articles" et "articles les plus lus" voila j'aimerais avoir le code html de ceci...

    RépondreSupprimer
    Réponses
      Répondre
  19. Sarah08 novembre, 2010

    Bonjour !
    Merci de aprtager vos astuces. Malheureusement sous post-footer je ne trouve "que"
    .post-footer {
    margin: .75em 0;
    color:$sidebarcolor;
    text-transform:uppercase;
    letter-spacing:.1em;
    font: $postfooterfont;
    line-height: 1.4em

    commetn faire ?
    Merci de votre aide

    RépondreSupprimer
    Réponses
      Répondre
  20. chaussures air max tn16 mars, 2011

    Je n'arrive pas à insérer cette ligne de code correspondant au lien facebook car la structure du code html du blog ne correspond pas à du html classique.

    RépondreSupprimer
    Réponses
      Répondre
  21. puma magasin16 mars, 2011

    Voila j'ai un gros souci avec le partage d'articles, en plaçant correctement le code qui fonctionne bien,mais ne publie pas mes articles.

    RépondreSupprimer
    Réponses
      Répondre
  22. develo-man22 juillet, 2011

    Merci pour le tuyau, je cherchais à comprendre comment utiliser cette méthode sur mon site, donc merci !

    RépondreSupprimer
    Réponses
      Répondre
  23. Doulatery23 octobre, 2011

    Merci pour ce code HTML nécessaire dans tout blog qui se respecte

    RépondreSupprimer
    Réponses
      Répondre
  24. Anonyme28 mai, 2012

    Merci !! :)

    RépondreSupprimer
    Réponses
      Répondre
  25. objets publicitaires12 juin, 2012

    merci

    RépondreSupprimer
    Réponses
      Répondre
Ajouter un commentaire
Charger la suite...

Laisser un commentaire

💯 Meilleurs Articles LeBlogger.fr : Astuces Blogger et Blogspot

FORMATION BLOGGING GRATUITE

Recevez maintenant une formation professionnelle offerte de 2H !

La formation permet de se lancer sur internet : BLOGGING, SEO, AFFILIATION...

Rejoignez nous

TOPS FORMATIONS BLOGGING..


Pour aller plus loin avec son blog ou sur le web




Derniers articles

Chargement...

Tops livres à lire


La meilleur façon d'apprendre et de progresser et de lire un bon livre



Recevez gratuitement le livre


"Je gagne ma vie avec mon blog"
(vendu 14,99€ sur Amazon)



Les plus lues

  • YOUWATCH - Gagner de l'argent gratuitement avec vos vidéos en streaming
  • Code HTML Blogger pour votre Blog blogspot
  • Astuces et Tutoriels Blogger Blogspot - Centre d'aide Blogger
  • Forum Officiel de Blogger Fermé
  • Modèles Blogger Gratuit - Tops 20 des Ressources gratuits pour Modèles Blogger
  • Comment intégrer un onglet bienvenue sur sa page Facebook
  • Ajouter les Boutons Partager Facebook à votre modèle Blogger
  • Ajouter Widget Instagram dans Blogger ?
  • GADGET POUR BLOG BLOGGER OU SITE
  • 10 ASTUCES Blogger Pour OPTIMISER le REFERENCEMENT De Son Blog Blogspot

GRATUIT : Téléchargez la methode SECRET

Pour gagner 2000 euros par mois en travaillant 1h par semaine




Catégories

Affiliation Code Html Débutant blogger Ebook Ecommerce FeedBurner Formation GadgetDevelopperBlogger GoogleAdSense IdéeDeBlog Instagram LogicielsUtile MessagesPopulaires MobileBlogger NomDomaine OutilBlogger Pinterest Rentabiliser son blog Services site utiles Template WebMarketing WordPress

A Propos

Astuces pour transformer un blog blogger en blog pro : article, commentaires, photos, vidéos et bien plus encore sur LeBlogger.fr

Web Links

  • Tutoriels
  • Widgets
  • Gadgets
  • Templates
  • Referencement
  • Programme Affiliation Blogger

Recevez par mail

Abonnez-vous pour recevoir les articles dans votre boîte de réception.

Copyright © LeBlogger.fr - Astuces Blogger et Blogspot. Tous droits reservés. Template par Biz Media
Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.