Avoir des boutons de partage installés sur votre blog c’est quelque chose d’indispensable,la plupart des blogueurs utilisent des plugins pour ça, mais le problème de ces extensions c’est l’alourdissement du temps de chargement de votre site.Aujourd’hui on va apprendre comment ajouter une barre flottante de partage à votre blog sans plugin .
L’ensemble de ce tutoriel a été divisé en trois sections et tous les codes ont été testés. Vous devez ajouter ces codes dans certains fichiers de votre thème WordPress.
- Code HTML pour les boutons de partage
- SocialScripts pour permettre Lazy Loading
- Code CSS pour les boutons de style
Comment ajouter une barre flottante de partage à votre blog
Maintenant, suivez les étapes avec attention pour ajouter ces beaux boutons de partage à votre blog . Aussi, n’oubliez pas de faire une sauvegarde de vos fichiers de thème, c’est très important.
Voila la partie HTML qui permet d’ajouter les boutons de partage à votre site . Ajoutez ce code après <h2> </ h2> dans le fichier single.php de votre thème et mettez le à jour. Dans le code ci-dessous , vous obtiendrez quatre boutons qui sont : Facebook, Twitter, Google Plus et Stumbleupon. Vous pouvez également inclure d’autres boutons de partage, mais nous préférons les garder à un nombre limité.
/** Display Social Buttons on single post page */
<div id="floating-sharebar" class="floating-sharebar">
<div class="floating-title">Share:</div>
<div class="floating-twitter">
<div class="social-float twitter-script">
<a href="#" id="floating-twitter">Tweet</a>
<a rel="nofollow" href="http://twitter.com/share"
data-url="<?php the_permalink(); ?>"
data-via="wpcours"
data-text="<?php the_title(); ?>"
data-count="horizontal">
</a>
</div>
</div>
<div class="floating-facebook">
<div class="social-float facebook-script">
<a rel="nofollow" href="https://www.facebook.com/sharer.php?u=<?php echo get_permalink(); ?>" id="floating-facebook">Share</a>
<div id="fb-root"></div>
<fb:like layout="button_count" href="<?php echo get_permalink(); ?>" show_faces="false" width="100"></fb:like>
</div>
</div>
<div class="floating-gplus">
<div class="social-float gplus-scriptt">
<a rel="nofollow" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo get_permalink(); ?>" id="floating-gplus">+1</a>
<div data-size="medium"></div>
</div>
</div>
<div class="floating-stumble">
<div class="social-float stumble-script">
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink(); ?>" id="floating-stumble">Stumble</a>
<su:badge layout="1"></su:badge>
</div>
</div>
<div class="comm">
<div id="comment-link">
<?php comments_popup_link('0', '1', '% '); ?>
</div>
</div>
</div>
Pour ajouter le bouton Linkedin comme dans ce blog, il suffit de remplacer le code de stumbleuopn par ce code :
<div class="floating-stumble"> <div class="social-float stumble-script"> <a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>" id="floating-stumble">Stumble</a> <su:badge layout="1"></su:badge> </div> </div>
N’oubliez pas de remplacer le nom d’utilisateur « wpcours » de twiteer par le votre.
Ajouter une barre de partage flottante au thème Genesis
Ajouter ces boutons sympas pour à votre thème enfant de Genesis en incluant le code ci-dessus dans la partie des fonctions affiché ci-dessous.
Ouvrir le fichier functions.php de votre thème enfant et ajoutez le code suivant:
function social() {
if ( is_single() ) { ?>
/** Placer ici le code des reseaux sociaux qui est en haut */
<?}}
add_action( 'genesis_before_post_content', 'social' );
Ajouter une barre de partage flottante au thème thesis
Insérez le code HTML ci-dessus dans cette partie et ajouter le code complet au fichier custom_functions.php de votre thème Thesis.
function social() {
if ( is_single() ) { ?>
/** Place Above Social Share Buttons Code Here */
<?}}
add_action( 'thesis_hook_before_post', 'social' );
Code javascript pour afficher les boutons flottant
Créer un fichier javascript et renommez le socialshare.js , mettez ce code dans ce fichier :
$(document).ready(function () {
var top = $('#floating-sharebar').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
var maxY = $('#respond').offset().top;
if (y >= top && y < maxY) {
$('#floating-sharebar').addClass('fixed');
} else {
$('#floating-sharebar').removeClass('fixed');
}
});
});
et ensuite envoyer ce ficher à la racine de votre thème.Ce code va permettre aux boutons de partage de flotter.
Ajouter la version CDN de jQuery pour WordPress et enregistrer le Scripts
Après avoir envoyé le fichier socialshare.js dans votre thème, vous devez installer le plugin jQuery. Voici un code assez cool qui contribue à ajouter la version CDN de jQuery pour blog WordPress.
Ajouter le code ci-dessous dans functions.php et mettrez le à jour.
/**add cdn of jquery google*/
if ( !is_admin() ) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1',true);
wp_enqueue_script('jquery');
}
add_action ('init', 'my_init_method');
Pour les thèmes parent
Si vous utilisez un thème parent, alors ajoutez aussi le code ci-dessous dans functions.php .
/** Add Social Share Buttons JS to Theme */
function register_scripts() {
wp_enqueue_script('jquery-custom', get_bloginfo('template_directory').'/socialshare.js', false, '1.4.2');
}
add_action( 'wp_print_scripts', 'register_scripts', 100);
Pour les thèmes enfants
Si vous utilisez un thème enfant, ajouter ce code au fichier functions.php :
/** Add Social Share Buttons JS to Child Themes */
function register_scripts() {
wp_enqueue_script('jquery-custom', get_bloginfo('stylesheet_directory').'/socialshare.js', false, '1.4.2');
}
add_action( 'wp_print_scripts', 'register_scripts', 100);
Ajouter une Css à votre barre flotante
Dernière partie et la plus importante, l’ajout d’une CSS pour styler vous boutons de partage. Ajoutez le code ci-dessous dans le fichier Css de votre thème et mettrez le à jour.
Télécharger les fichiers image:
Téléchargez ces images dans votre propre serveur. Inclure les liens d’images dans le CSS ci-dessous (voir la partie concernée).
#floating-facebook,
#floating-gplus,
#floating-twitter,
#floating-stumble{
color: #ffffff;
display: block;
line-height: 22px;
text-align: center;
text-decoration: none;
width: 55px;
background:url("ADD IMAGE URL HERE") no-repeat scroll 0 0 transparent;
}
#floating-facebook { background-position: -10px -35px;text-indent:-999em; }
#floating-google {background-position: -10px -0px;text-indent:-999em; }
#floating-twitter { background-position: -70px -35px;text-indent:-999em; }
#floating-stumble {background-position: -70px -0px;text-indent:-999em; }
#comment-link a{background: url("ADD COMMENT ICON LINK HERE") no-repeat scroll 0 center transparent;
color: #000000;
float: left;
font-family: arial;
font-size: 15px;
font-weight: bold;
height: 28px;
line-height: 28px;
padding: 0 0 0 32px;}
#comment-link a:hover{color:#D05B00; }
.floating-sharebar {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
float: left;
margin: 0 0 20px -20px;
max-height: 50px !important;
padding: 8px 0;
width: 650px;
}
.floating-sharebar .floating-title {
border-right: 1px solid #D2D2D2;
color: #B1A9A5;
float: left;
padding: 3px 15px 2px 5px;
text-transform: uppercase;
}
.floating-sharebar .floating-twitter {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .floating-facebook {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .floating-gplus {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 80px;
}
.floating-sharebar .floating-stumble {
border-right: 1px solid #E7E7E7;
float: left;
padding: 5px 0 5px 20px;
width: 90px;
}
.floating-sharebar .comm {
float: left;
padding: 0 20px;
}
.floating-sharebar.fixed {
position: fixed;
top: 0;
z-index: 9999;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
}
Voila, c’est tout , je pense que ce tuto vous aidera bien à ajouter une barre flottante de partage à votre blog Wordpress.
Laisser un commentaire