• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
Accueil / Tutoriels / Boutons de partage Jumbo avec compteur pour wordpress sans plugin

Boutons de partage Jumbo avec compteur pour wordpress sans plugin

Màj le 28 décembre 2016

ShareTweetPinLinkedInEmail

Dans ce petit tutoriel on va apprendre comment ajouter à notre site des boutons de partage « Jumbo » et « responsive »  avec un compteur dynamique . Ces boutons de partage se caractérisent par un design attractif et un chargement rapide ce qui n’influence pas sur le temps de chargement de votre site.

boutons-partage-avec-compteur

Avant de se lancer dans l’installation de ce plugin manuellement, il faut tout d’abord installer les code java dans votre thème, pour cela consulter l’article suivant :

  • Boutons de partages avec compteur pour blogger

On va maintenant savoir étape par étape la procédure pour installer la barre de partage horizontale directement à la fin d’un article (voir l’image ) .

partages-boutons-avec-compteur

Notre plugin contient les boutons de partage suivant :

  1. Facebook
  2. GooglePlus +1
  3. Twitter
  4. LinkedIn
  5. Pinterest
  6. StumbleUpon
  7. Buffer
  8. Viber
  9. Whatsapp
  10. Print

 Boutons de partage Jumbo avec compteur pour wordpress

Maintenant, allez à votre tableau de bord de Wordpress puis Apparence ensuite Editer 

Choisir le fichier Style.css de votre thème et y insérer à la fin ce code :

/* ##### FREE JUMBO SHARE COUNTERS ####### */
#MBTshares-wrap{margin:20px 0px;overflow:hidden; border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;}
#MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em!important;}
#horiz{position:relative; padding:0; margin:0;}
#horiz #MBTshares{position:relative;top:-8px; padding-top:20px;}
#MBTshares a:hover{text-decoration:none!important;}
/***Facebook***/
.mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
.mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;}

/***Gplus, Pinit, Stumbleupon***/
.mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);background-color:#FFF;background-image:none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap}
.mbt-gp:hover, .mbt-gp:visited{color:#262626!important;}
#MBTshares .pinit{background:#f9f9f9!important}
#MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}
.mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}
#MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
/***LinkedIn***/
.mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff!important;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.mbt-linkedin{padding:0 5px 0 1px}
}

.mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}
.mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px}

/**Twtter, Print, Whatsapp, viber**/
.mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF!important;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box}
.mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF}
.mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:4px;margin-top:0}
.mbt-o{max-width:100%}
.mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top}
.mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:5px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px; }
#MBTshares .printme {background-color:#333;}
#MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000}
#MBTshares .whatsapp{background-color:#73D40B;}
#MBTshares .whatsapp i{font-size:15px!important;}
#MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09}
#MBTshares .viber{background-color:#7b519d;}
#MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa}
#MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }

#mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#mbtcount:hover{text-decoration:none}
#MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#MBTshares .ext{min-height:18px!important}
#MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
.share-btn{position:relative;display:inline-block}
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:<span style= »color: #ff0000; »><strong>#73D40B</strong></span>;height:31px; line-height: 1.4em;}
.share-btn .h4{font-size:12px;font-family:arial}

/*#########Floating Counter Styles###########*/
.mbt-vertical{display:none; max-width:60px!important;margin:0 0 0 -83px!important;border:1px solid #f3f3f3!important;padding:3px 6px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px solid #fff!important;}
.mbt-vertical #MBTshares{display:block;width:60px;margin:7px 0!important}
.tcount{margin:0 10px 0 0;text-align:center;min-width:60px;border-right:3px solid <span style= »color: #ff0000; »><strong>#73D40B</strong></span>;padding:0 15px 0 10px}
.mbt-vertical .tcount{border-right:0;padding:0;text-align:center;height:auto}
.tcount .h2{font-size:29px;padding-bottom:5px}
.tcount .h4,.mbt-vertical .tcount .h4{font-size:12px;padding-bottom:5px;border-radius:0}
.mbt-vertical .tcount .h4{border-bottom:3px solid #73D40B}
.mbt-vertical .mbt-o,.mbt-vertical .mbtcount-o,.mbt-vertical .mbt-fb,.mbt-vertical .mbt-gp,.mbt-vertical .mbt-tw,.mbt-vertical #mbtcount{display:block}
.mbt-vertical .mbtcount-o{margin-bottom:7px;margin-left:0;height:30px}
.mbt-vertical #mbtcount{padding:7px 0 0;font-size:15px;color:#666}
.arrow-v{bottom:-8px;height:7px;left:25px;position:absolute;width:0;z-index:2}
.arrow-v s,.arrow-v i{border-color:#e7e7e7 transparent transparent;border-style:solid;border-width:5px;display:block;position:relative}
.arrow-v i{border-top-color:#FFF;left:0;top:-12px}

/*#########Vertical Counter Switch###########*/
.switchoff{display:none}
.mbtswitch{padding:0 16px;margin:0 0 5px;display:block;max-width:60px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch:hover{color:#73D40B}
.mbtswitch i.active:after{content:’\f067′;position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch i.inactive:after{content:’\f068′;position:relative;left:7px;top:2px;font-style:normal}
/*#########Horizontal Counter Switch###########*/
.switchoff2{display:inline-block;}
.mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.mbtswitch2:hover{color:#73D40B}
.mbtswitch2 i.active:after{content:’\f067′;position:relative;left:7px;top:2px;font-style:normal}
.mbtswitch2 i.inactive:after{content:’\f068′;position:relative;left:7px;top:2px;font-style:normal}
@media only screen and (max-width:230px) {
.tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;}
#horiz #MBTshares {width: 100%;}
}

Vous pouvez changer la colleur verte du compteur par une colleur de votre choix, pour cela il vous suffit d’éditer #73D40B

Maintenant mettre à jour le style en cliquant sur sauvegarder.

Dernière étape : Ouvrez le fichier Fonction.php de votre thème et y insérer directement à la fin le code ci-après:

//Jumbo Share Counters Plugin
function jumbo_shares_after_post($content){
if (is_single()) {
$content .= ‘

<div id= »MBTshares-wrap »>
<!–TOTAL–>

<div class= »share-btn tcount » data-service= »total »>

<div class= »count h2 anim »></div>

<div class= »h4″>SHARES</div>

</div>

<span id= »horiz »>
<!–FACEBOOK –>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »http://www.facebook.com/sharer.php?u=’.get_permalink( $post->ID).’&amp;t=’.get_the_title( $post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Share on Facebook! » class= »mbt-fb »><i class= »fa fa-facebook »></i><span class= »label »>Share</span></a>
</div>

<div class= »mbtcount-o » >

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »facebook »>
<span id= »mbtcount » class= »count anim »></span></span>
</div>

</div>

<!–GOOGLE PLUS–>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »https://plus.google.com/share?url=’.get_permalink( $post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Share on Google Plus! » class= »mbt-gp »><i class= »fa fa-google-plus »></i><span class= »label »>Share</span></a>
</div>

<div class= »mbtcount-o ext » >

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »google »>
<span id= »mbtcount » class= »count anim »></span></span>
</div>

</div>

<!–TWITTER–>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »http://twitter.com/home/?status=’.get_the_title( $post->ID).’ – ‘.get_permalink( $post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Share on Twitter! » class= »mbt-tw »><i class= »fa fa-twitter »></i><span class= »label »>Tweet</span></a>
</div>

</div>

<!–PINTEREST–>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »http://pinterest.com/pin/create/button/?url=’.get_permalink( $post->ID).’&media=’.wp_get_attachment_url( get_post_thumbnail_id($post->ID) ).’&description=’.get_the_title($post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Pin it! » class= »mbt-gp pinit »><i class= »fa fa-pinterest »></i><span class= »label »>Pin it</span></a>
</div>

<div class= »mbtcount-o ext » >

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »pinterest »>
<span id= »mbtcount » class= »count anim »></span></span>
</div>

</div>

<div style= »display:none; » class= »switchoff2″>
<!–STUMBLEUPON–>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »http://www.stumbleupon.com/submit?url=’.get_permalink( $post->ID).’&amp;title=’.get_the_title( $post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Stumble it! » class= »mbt-gp stumb »><i class= »fa fa-stumbleupon »></i><span class= »label »>Share</span></a>
</div>

<div class= »mbtcount-o ext » >

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »stumbleupon »>
<span id= »mbtcount » class= »count anim »></span></span>
</div>

</div>

<!–LINKEDIN–>

<div id= »MBTshares » >

<div class= »mbt-o » >
<a rel= »nofollow » href= »http://www.linkedin.com/shareArticle?mini=true&amp;title=’.get_the_title( $post->ID).’&amp;url=’.get_permalink( $post->ID).' » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » target= »_blank » title= »Share on Linkedin! » class= »mbt-linkedin »><span class= »ibg »><i class= »fa fa-linkedin »></i></span><span class= »label »>Share</span></a>
</div>

<div class= »mbtcount-o ext » >

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »linkedin »>
<span id= »mbtcount » class= »count anim »></span></span>
</div>

</div>

<!–BUFFER–>

<div id= »MBTshares »>

<div class= »mbt-o »>
<a class= »mbt-gp » href= »https://buffer.com/add?url=’.get_permalink( $post->ID).’&picture=’.wp_get_attachment_url( get_post_thumbnail_id($post->ID) ).’&text=’.get_the_title( $post->ID).’&via=stc_network » onclick= »window.open(this.href, \’sharer\’, \’toolbar=0, scrollbars,status=0, width=626,height=436\’); return false; » rel= »nofollow » target= »_blank » title= »Share on Buffer! »><img class= »bufferimg » src= » https://3.bp.blogspot.com/-eYyUk4KGuBg/Vs-oFm656VI/AAAAAAAAQfE/maUNyJ9PWqE/s1600/logo-icon.png »/><span class= »label »>Buffer</span></a>
</div>

<div class= »mbtcount-o ext »>

<div class= »arrow »><s></s><i></i></div>

<span class= »share-btn » data-service= »buffer »>
<span class= »count anim » id= »mbtcount »></span></span>
</div>

</div>

<!– VIBER –>

<div id= »MBTshares »>

<div class= »mbt-o »>
<a class= »mbt-tw viber » href= »viber://forward?text=’.get_the_title( $post->ID).’ >> ‘.get_permalink( $post->ID).' » rel= »nofollow » target= »_blank » title= »Share on viber! »><img class= »viberimg » src= » https://2.bp.blogspot.com/-Q4pj1x7tFUA/VtIrtKRuDPI/AAAAAAAAQfY/pYMexHW1HqY/s1600/Icon_small.png »/><span class= »label »>Share</span></a>
</div>

</div>

<!– WHATSAPP –>

<div id= »MBTshares »>

<div class= »mbt-o »>
<a class= »mbt-tw whatsapp » href= »whatsapp://send?text=’.get_the_title( $post->ID).’ >> ‘.get_permalink( $post->ID).' » rel= »nofollow » target= »_blank » title= »Share on whatsapp! »><i class= »fa fa-whatsapp »></i> <span class= »label »>SMS</span></a>
</div>

</div>

<!– PRINT –>

<div id= »MBTshares »>

<div class= »mbt-o »>
<a class= »mbt-tw printme » href= »javascript:window.print() » rel= »nofollow » target= »_blank » title= »Print this page! »>
<i class= »fa fa-print »></i><span class= »label »>Print</span></a>
</div>

</div>

</div>

<!–switchoff–>
<span class= »mbtswitch2″><i class= »active »></i></span>
</span>
</div>

‘;
}
return $content;
}
add_filter( « the_content », « jumbo_shares_after_post » );

Remplacer stc_network par votre nom d’utilisateur twitter.

Maintenant vous avez fini l’installation, espérant que ce tutu vous aidera à ajouter ces beux boutons de partage à votre blog .

Plus de cours et exercices corrigés :

  • Fixer erreur de l’établissement de connexion à la base de données
  • Comment corriger l’erreur «The Link You Followed Has Expired» dans WordPress
  • Comment rogner, pivoter, redimensionner, retourner une image sous Wordpress
  • Comment désactiver Google AMP en toute sécurité
  • [Résolu] images ne s’affichent plus dans la bibliothèque médias de Wordpress
  • Comment Déplacer les codes JavaScript dans le footer
ShareTweetPinLinkedInEmail

Classé sous :Tutoriels Balisé avec :wordpress guide

Interactions du lecteur

Commentaires

  1. Malwok

    21 mars 2016 à 9:05 am

    Bonjour, je viens de lire l’article que je trouve tres intéréssant mais je trouve que pour les « simple administrateur » et non développeur c’est souvant une très mauvais idée de toucher à un code source que l’on ne comprends pas. Ainsi peut-on me connseiller un addon wordpress afin d’avoir un compteur dans son site web de maniere simple ?

  2. wpcours

    21 mars 2016 à 9:53 am

    Salut pour faire simple je vous conseil d’utiliser le plugin SumoMe , je l’utilise sur mon site (voir la barre de partage flottante).

  3. newsquibuzz

    30 avril 2016 à 12:57 am

    J’ai suivi à la lettre votre tuto mais le dernier script qu’on met dans fonction.php fait erreur. Je l’ai mis avant « ?> » et mon site deviens hors de connexion. Pouvez-vous m’éclairer un peut plus? Merci

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Articles récents

  • Comment corriger l’échec de publication : impossible de mettre à jour la base de données dans WordPress ?
  • Comment migrer un site web vers HTTPS sans perdre en SEO ?
  • Indexer ou pas les pages de catégories et de balises?
  • Comment réparer le problème de déconnexion WiFi sous Windows 10 ?
  • Comment afficher la barre supérieure dans le thème GeneratePress gratuit ?

© 2025 ·wpcours.com · Mentions · Contact