Ajouter les Boutons Partager Facebook à votre modèle Blogger




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

23 Commentaires

Laisser un commentaire

  1. 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
  2. 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
  3. @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
  4. 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
  5. @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
  6. 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
  7. c'etait laborieux mais j'ai réussi, merci à toi ;)

    RépondreSupprimer
  8. 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
  9. 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
  10. @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
  11. 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
  12. @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
  13. 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
  14. 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
  15. ça ne marche pas, même en supprimant les 6 espace...

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

    RépondreSupprimer
  17. 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
  18. 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
  19. 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
  20. 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
  21. Merci pour le tuyau, je cherchais à comprendre comment utiliser cette méthode sur mon site, donc merci !

    RépondreSupprimer
  22. Merci pour ce code HTML nécessaire dans tout blog qui se respecte

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne