Faire des boutons de partage sans plugin wordpress
Quelle galère ces boutons de partage… Personnellement ils ont toujours été une source de problème car moches ou bien fortement consommateur de ressources sur le blog notamment à cause des plugins qui font des appels dans tous les sens.
Bref depuis que twitter ne permet plus d’afficher le total des partages (même si en cherchant il y a une solution avec newsharecounts) l’affichage des totaux n’est plus si important. Je suis donc parti sur une solution sans plugin et très simple mais sans que cela soit moche non plus! Voici le moyen pour avoir ces boutons de partage sur votre blog!function share_button_2803($content) { if ( is_single() ) { global $post; $share_URL = get_permalink(); $share_title = str_replace( ' ', '%20', get_the_title()); $share_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); $share_excerpt = strip_tags(get_the_content()); $twitterURL = 'https://twitter.com/intent/tweet?text='.$share_title.'&url='.$share_URL.'&via=henrilabarre'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$share_URL; $googleURL = 'https://plus.google.com/share?url='.$share_URL; $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$share_URL.'&media='.$share_thumbnail[0].'&description='.$share_excerpt; $linkedinURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$share_URL.'/&title='.$share_title.'&summary=&source='; $content .= '<!-- Facebook Share Button --> <div class="sharebuttons"> <a class="btnz share facebook" href="'.$facebookURL.'"><i class="fa fa-facebook"></i> Partager</a> <!-- Twitter Share Button --> <a class="btnz share twitter" href="'.$twitterURL.'"><i class="fa fa-twitter"></i> Tweeter</a> <!-- LinkedIn Share Button --> <a class="btnz share linkedin" href="'.$linkedinURL.'"><i class="fa fa-linkedin"></i> LinkedIn</a> <!-- Google+ Share Button --> <a class="btnz share gplus" href="'.$googleURL.'"><i class="fa fa-google-plus"></i> Publier</a> <!-- Pinterest Share Button --> <a class="btnz share pinterest" href="'.$pinterestURL.'"><i class="fa fa-pinterest"></i> Pin it</a> </div> <div class="clear"></div>'; } return $content; } add_action('the_content','share_button_2803');Si vous n’utilisez pas déjà les icônes de Fontawesome il faudra aussi ajouter cela dans le fichier functions.php :
add_action( 'wp_enqueue_scripts', 'codium_dn_enqueue_awesome' ); function codium_dn_enqueue_awesome() { wp_enqueue_style( 'prefix-font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css', array(), '4.4.0' ); }Le code à copier dans votre feuille de style style.css de votre thème est le suivant :
/*share button*/ .sharebuttons {padding: 10px 0 60px 0;} .btnz { display: block; float: left; padding: 10px 15px; border:none; background-color: #ececec; text-decoration: none; font-size: 18px; color: #FFF !important; } .btnz:hover { color: #444 !important; } .facebook { background-color: #3b5998; } .gplus { background-color: #dd4b39; } .twitter { background-color: #55acee; } .pinterest { background-color: #cc2127; } .linkedin { background-color: #0077b5; }Et si vous voulez ouvrir une popup au lieu d’un nouvel onglet coller ce code javascript dans le fichier footer.php du thème :
<script> jQuery(document).ready(function() { jQuery('.share').click(function(e) { e.preventDefault(); window.open(jQuery(this).attr('href'), 'fbShareWindow', 'height=450, width=550, top=' + (jQuery(window).height() / 2 - 275) + ', left=' + (jQuery(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); return false; }); }); </script>Et voilà c’est fini vous avez des boutons pour facebook, twitter, linkedin, google plus et pinterest, vous pouvez partager cet article pour tester !