Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact

Ajouter une barre flottante de partage à votre blog sans plugin

Màj le 19 mars 2016

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.

  1. Code HTML pour les boutons de partage
  2. SocialScripts pour permettre Lazy Loading
  3. 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.

ajouter barre folttante sans plugin
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:

barre flottante

ajouter barre flottante de partage
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.


Vous aimerez également...

  • Comment désactiver Disqus pour custom post type sous Wordpress
  • Corriger l’erreur « Désolé, vous n’êtes pas autorisé à accéder à cette page » dans WordPress
  • Comment migrer Wordpress du local vers un serveur en ligne
  • Ajouter une barre verticale flottante de partage à votre blog
  • Corriger l’erreur “are you sure you want to do this” dans Wordpress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site
Accueil / Tutoriels / Ajouter une barre flottante de partage à votre blog sans plugin

Laisser un commentaire

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

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des tutoriels Gratuitement.

CREER VOTRE AVATAR GRATUIT

Articles récents

  • GeneratePress VS Genesis : Quel est le meilleur thème?
  • Est-ce que le contenu d’IA aide ou nuit à votre site web ?
  • Comment créer des boutons de partage social flottants dans GeneratePress sans plugin ?
  • Google Analytics 4 vs Universal Analytics : Comparaison complète 2023
  • Est ce que Google accepte le contenu généré par l’IA et ChatGPT ?