Sharing is Sexy – Partager vos articles sur les réseaux sociaux avec ce widget très sexy

Voici un nouveau widget "Sexy & Fashion" pour afficher les icones des réseaux sociaux à la fin de chaque message de votre blog et permettre à vos visiteurs de partager vos articles sur Facebook, Twitter, MySpace, Yahoo, Google, Technorati, Delicious, Digg, Reddit, Stumbleupon, Mixx, Linkedin, DesignFloat, Script & Style, Blinklist, FriendFeed et Newsvine.
Il y a également un bouton pour votre Flux RSS.

Démonstration dans Demo.Leblogger.com
Installation:
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant:
</head>
Juste avant, ajoutez ces lignes:
<!--SexySharingLeBlogger--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<link href='
http://blogspot.leblogger.com/jsSexySharingCSS.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script><!--SexySharingLeBlogger-->
Maintenant recherchez ce code (si vous en trouvez deux, utilisez le deuxième)
<data:post.body/>
Et juste après, ajoutez ces lignes :
<!--SexySharingLeBlogger--><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'>
<!--Facebook-->
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Facebook'>Facebook</a></li>
<!--Twitter-->
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@LeBlogger)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<!--Myspace-->
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='MySpace'>MySpace</a></li>
<!--Yahoo-->
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<!--Technorati-->
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Technorati'>Technorati</a></li>
<!--Delicious-->
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='del.icio.us'>Delicious</a></li>
<!--Digg-->
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<!--GoogleBookmarks-->
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Google Bookmarks'>Google Bookmarks</a></li>
<!--FluxRSS-->
<li class='sexy-comfeed'><a class='external' href='http://feeds2.feedburner.com/LeBlogger' rel='nofollow' title='Flux RSS'>Flux RSS</a></li>
<!--Reddit-->
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Reddit'>Reddit</a></li>
<!--Stumbleupon-->
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='StumbleUpon'>StumbleUpon</a></li>
<!--Mixx-->
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Mixx'>Mixx</a></li>
<!--LinkedIN-->
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Linkedin'>Linkedin</a></li>
<!--DesignFloat-->
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='DesignFloat'>DesignFloat</a></li>
<!--Script &amp; Style-->
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Script &amp; Style'>Script &amp; Style</a></li>
<!--Blinklist-->
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Blinklist'>Blinklist</a></li>
<!--FriendFeed-->
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='FriendFeed'>FriendFeed</a></li>
<!--Newsvine-->
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Newsvine'>Newsvine</a></li>
</ul> </div> <div style='clear:both;'/> <div class='sexy-link'><a href='http://www.cssreflex.com/' style='display:none;'>Css Reflex </a><a href='http://www.leblogger.com/' style='display:none;'> LeBlogger</a></div></b:if><!--SexySharingLeBlogger-->
Ce widget utilise JavaScript et jQuery, ce qui peux ralentir un petit peu le chargement de vos pages. Regardez mon article pour ajouter des liens/icônes simples: Ajouter les boutons des réseaux sociaux à la fin de chaque Message dans Blogger

Source : CSS Reflex
31 Commentaires
  1. Trop trop cool, je testerai ca voir si cela se mari bien a mon design ;) merci encore Soufiane :)

    RépondreSupprimer
    Réponses
    1. merciiiiiiiiii c'est http://personnaliser-blogger.blogspot.com/

      Supprimer
  2. @ Laurent
    Moi aussi j'ai adoré, je pense que je vais le garder ...

    RépondreSupprimer
  3. Bonjour Soufiane, j'hésite à l'ajouter à cause du temps de chargement que je suis justement en train d'essayer de diminuer..
    Que penses-tu du widget wikio qui est sur mon blog et qui renvoie par exemple à cette page :
    http://www.wikio.fr/sharethis?url=http%3A%2F%2Fattentionalaterre.blogspot.com%2F2009%2F10%2Fgagnez-place-salon-maison-bois.html%23links&title=Gagnez%20des%20places%20pour%20le%20Salon%20Maison%20bois%20d%27Angers%20|%20Attention%20%C3%A0%20la%20Terre

    Merci d'avance pour ton retour, c'est vrai que c'est un outil important pour augmenter le nombre de visiteurs.
    Je l'avais vu sur WordPress, mais pas encore pour Blogger.

    RépondreSupprimer
  4. @ Michèle
    pour le temps de chargement, c'est le widget en lui même qui est long, donc c'est pas si grave .....
    Je vais publier plusieurs widgets/astuces qui utilisent jQuery, il suffit de l'ajouter une seul foi pour tout les widgets...

    Pour wikio, ça fait 4 mois que j'essai d'inscrire mon blog mais sans succès, donc .....
    Le mieux est de créer ton propre widget, comme ça tu peux choisir les services que tu veux et la disposition que tu veux ...... (Tu peux ajouter tes propres bouton à "sharing is sexy" mais c'est assez complexe)

    Moi je garde ce widget parce que je compte changer de Template pour bientôt ...

    RépondreSupprimer
  5. Waaaw cet astuce de sharing est + cOOOl que les autres . Merci Soufiane tu es le meilleur !!!

    RépondreSupprimer
  6. Bonsoir, j'adore ce widget mais je n'arrive vraiment pas à l'installer sur le blog que je viens de commencer. ça viens surement de moi, j'ai essayer plusieurs fois mais rien. Une solution miracle ?
    http://gerard-m.blogspot.com/

    RépondreSupprimer
  7. @ Gérard.M
    Pourquoi ça marche pas est ce que tu arrives pas à ajouter les codes et enregistrer ton modèle, ou est ce que ça donne rien ???

    RépondreSupprimer
  8. Bonsoir Soufiane, je viens de refaire la manip, j'ajoute les codes et j'enregistre le model et dans le blog rien n'apparait.

    RépondreSupprimer
  9. Bonjour,

    Ce widget a l'air génial, sauf que je n'arrive pas à le faire apparaître sur mon nouveau blog (http://bentobliss.blogspot.com/). J'utilise un template wordpress qui a été bloggerisé et je ne trouve pas le code data:post.body dans le template.

    J'ai essayé de coller le tout sous le module .post_bottom{ mais cela n'a rien donné. Auriez-vous une astuce à me suggérer?

    Merci d'avance.

    RépondreSupprimer
  10. @ Gérard.M
    Mais si Gérard, le widget marche impec dans ton blog : http://gerard-m.blogspot.com/2009/10/gnome_16.html

    C'est juste que j'ai ajouté une condition b:if pour qu'il n'apparaisse pas dans la page d'accueil, tu peux l'enlever si tu veux .....

    RépondreSupprimer
  11. J'ai trouvé la solution, apparament, il y avait des problèmes avec le template téléchargé. Un nouveau téléchargement à partir d'un autre endroit a tout résolu.

    Désolée pour le dérangement.

    RépondreSupprimer
  12. @ Ceinwyn
    Oups j'avais même pas répondu a ton commentaire....
    Bon, c'est parfait, mais n'oublie pas d'utiliser ton propre pseudo Feedburner ou d'enlever l'icône du flux RSS....

    RépondreSupprimer
  13. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  14. Bonsoir Soufiane, j'ai ré-essayé cet après-midi et j'ai vu que ça marché,
    Merci pour l'info sur la condition b:if je vais si je trouve où l'enlever

    RépondreSupprimer
  15. Merci pour le widget, super utile. Je l'installe de suite.

    RépondreSupprimer
  16. Merci ça marche !! Il faut bien prendre le deuxième data:post.body
    merci pour l'astuce ! :)

    RépondreSupprimer
  17. Bonjour Soufiane, c'est quelle section qu'il faut enlever pour le b:if ? Sachant qu'il faut que je fasse attention aux espaces et tout ? Parceque je veux le faire apparaître à la fin de chaque billet.

    Ps : J'adore ce widget, il est trop sexy !!! :X

    Merci Soufiaaaannne!

    RépondreSupprimer
  18. @ Les Délices de Baïa
    Dans le deuxième code a copié, il faut enlever <b:if cond='data:blog.pageType == "item"'> du début du code et </b:if> à la fin .....

    RépondreSupprimer
  19. Sousouuu !!! 8-(

    Comment vas-tu ? Dis, ta barre share the love ne fonctionne plus alors que j'ai rien touché cette fois-ci.... :-o Comprend pas pourquoi....

    Peux-tu m'aider stp ?

    www.lesdelicesdebaia.com

    RépondreSupprimer
  20. sofien svp reuploder l'image sexysprite.png

    RépondreSupprimer
  21. Salut Soufiane

    Déjà merci pour tout ce que tu fait!
    J' ai réussi a installer la barre mais je souhaiterais qu' elle n' apparaisse que dans les articles et non pas dans les pages indépendantes.
    Comment faire ?
    Merci beaucoup

    RépondreSupprimer
  22. Je sais pas si c'est moi mais je tester et toute les images ne marche pas.
    Je l'aurais retirer quand même car j'ai vu à la fin de ton article que sa ralenti l'ouverture des pages.

    Mais je te le signale quand même :)

    RépondreSupprimer
  23. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Copyright 2015 Soufiane.fr