Étiquette : google plus

Intégrer des boutons de partage vers les réseaux sociaux.

Fred,

Dans ce tutoriel que j’ai mis à jour je vais vous donner les codes pour insérer les boutons de partage vers les réseaux sociaux Facebook, Twitter, Google Plus et linkedin sans utiliser de plugin et les différentes possibilités d’affichage.

 

Facebook

Ce réseau social  met à disposition un  grand nombre de possibilités d’affichage  avec les boutons : recommander, envoyer, j’aime.

Pour ajouter ces boutons au format HTML5 (l’option iframe n’est plus disponible)  il vous faudra ajouter le script suivant  dans votre fichier

header.php après la balise <body>

<script>

(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}

(document, 'script', 'facebook-jssdk'));

</script>

Pour ajouter les boutons de partage, vous devez les placer à l’intérieur de la boucle du fichier single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

Le bouton J’aime

<!-- bouton j'aime + Envoyer--->

<li>

<fb:like send="true" layout="button_count" width="250" font="arial" action="like" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- bouton j'aime vertical avec compteur grand format--->

<li>

<fb:like send="false" layout="button_count" width="90" font="arial" action="like" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- bouton j'aime avec photo du profile de qui ont cliquer j'aime--->

<li>

<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-layout="standard" data-send="false" data-width="450" data-show-faces="true" data-action="like"></div>

</li>

<!-- bouton j'aime + envoyer avec photo du profile de qui ont cliquer j'aime--->

<li>

<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-layout="standard" data-send="true" data-width="450" data-show-faces="true" data-action="like"></div>

</li>

Le Bouton recommander

<!-- Bouton recommander seul--->

<li>

<fb:like send="false" layout="button_count" width="90" font="arial" action="recommend" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- Bouton recommander + Envoyer--->

<li>

<fb:like send="true" layout="button_count" width="250" font="arial" action="recommend" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- Bouton recommander + compteur--->

<li>

<div data-href="<?php echo get_permalink(); ?>" data-layout="box_count" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>

</li>

Bouton envoyer

<!-- Bouton envoyer seul--->

<li>

<style>

.fb-send  { float:left;}

.fb-txt { float:left; margin-left:5px; font-size:12px;}

</style>

<div class="fb-send" data-href="<?php echo get_permalink(); ?>"></div><p class="fb-txt">Envoyer cet article vos amis</p>

</li>

Google Plus

Pour ajouter les boutons de Google Plus il vous faudra ajouter le script suivant dans votre fichier header.php  avant la fermeture de la balise </head>

<script type="text/javascript">

  window.___gcfg = {lang: 'fr'};

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

  })();

</script>

Ensuite ajoutée les codes des boutons suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton +1 avec compteur vertical grand format--->

<li>

<g:plusone size="tall"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal petit format--->

<li>

<g:plusone size="small"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal moyen--->

<li>

<g:plusone size="medium"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal grand format--->

<li>

<g:plusone size="standard"></g:plusone>

</li>

Twitter

Pour ajouter les boutons Tweeter il vous faudra ajouter le script suivant  dans votre fichier header.php  avant la fermeture de la balise </head>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);

js.id=id;js.src="//platform.twitter.com/widgets.js";

fjs.parentNode.insertBefore(js,fjs);}}

(document,"script","twitter-wjs");

</script>

Ensuite ajoutée les codes des boutons Tweet suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton Tweet avec compteur horizontal petit format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="fr">Tweeter</a>

</li>

<!-- Bouton Tweetavec compteur horizontal grand format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="fr" data-size="large">Tweeter</a>

</li>

<!-- Bouton Tweet avec compteur vertical grand format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink(); ?>" data-lang="fr" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>

</li>

<!-- Bouton tweet personnalisable--->

<li>

<style>

  #custom-tweet-button a {

    display: block;

    padding: 2px 5px 2px 20px;

    background: url('https://a4.twimg.com/images/favicon.ico') 1px center no-repeat;

    border: 1px solid #ccc;

	width:100px;

  }

</style>

<div id="custom-tweet-button">

  <a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>" target="_blank" > Tweet</a>

</div>

</li>

Linkedin

Pour ajouter les boutons in il vous faudra ajouter le script suivant dans votre fichier header.php  avant la fermeture de la balise </head>

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Ensuite, ajouté les codes des boutons in suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton in avec compteur vertical grand format--->

<li>

<script type="IN/Share" data-counter="top"></script>

</li>

<!-- Bouton in avec compteur horizontal --->

<li>

<script type="IN/Share" data-counter="right"></script>

</li>

<!-- Bouton in sans compteur horizontal --->

<li>

<script type="IN/Share"></script>

</li>

Faite Glisser vos boutons de partage Facebook, Google plus, Twitter

Fred,

Avec se tutoriel vous pourrez ajouter les boutons de partage Facebook, Google plus, Twitter et l’icône RSS de Votre blog,  qui défileront a l’extérieur de votre page, et il sera possible ajouter ou de retirer des réseaux sociaux, et tous sa sans plugin !


 

Le code sources fait 300 lignes vous pouvez le télécharger ici je vais vous expliquez comment le mettre en place et l’adapter a votre thème.

Une fois le fichier téléchargé placé le dans le dossier de votre thème WordPress ensuite ouvrez votre fichier function.php et ajouter le code ci-dessous pour appeler le fichier social.php.

include (TEMPLATEPATH .'/social.php');

Ensuite ouvrez votre fichier header.php de votre thème puis ajouter le code pour suivant après la balise </head> pour afficher les boutons de partage.

<?php echo socials_bar(); ?>

Dans le fichier social.php vous pourrez modifier le code css pour ajuter le widget à votre thème :

/*-------Socials bar------------*/

#floating-socials-wrapper{

 width:950px; /* Modifier cette ligne pour ajuater la social bar a votre thème */

 margin:0 auto 0 auto;

 height: auto;

 position: relative;

}

#floatdiv {

    position:absolute; 

    width:94px; 

    height:229px; 

    top:0; 

    left:500px; 

        z-index:100 

}

#socials-sidebar { 

    background-color:#ffffff; 

    border:1px solid #ddd; 

    padding-left:5px; 

    position:relative; 

    height:278px; 

    width:70px;

	float:right; 

    margin:0 0 0 5px; 

}

Pour positionner la colonne qui contient les boutons de partage modifié la largeur de la balise <div> qui a l’ ID  floating-socials-wrapper.

Pour ajouter le Flux RSS modifier cette ligne pour ajouter votre adresse, puis transférer  icône dans le dossier image de votre thème.

<a href="http://www.votre-site.com/feed"><img src="<?php bloginfo('template_url'); ?>/images/feed-icon.png"></a>

Si vous voulez fixer la position des boutons de partage ajouter le code css ci-dessous et ajuter la marge du haut comme indiquer dans le code.

/* code css pour fixer la socials bar */

#floating-box-container .fixed{ 

 position:fixed;

 top:200px;  /* Modifier cette ligne pour ajuster la postion vertical */

}

#floating-box-container{ 

 float:left;

 top:0;

 left:0;

 position:absolute;

 width:auto; 

}

Vous pouvez ajouter des boutons de partage en ajoutant des lignes dans le tableau html et en modifiant la hauteur de la balise à l’aide du code css.