WordPress sans plugin : Des boutons de partage dont Diaspora

Aujourd’hui j’inaugure une idée qui me trottait dans la tête depuis un certain temps. Une série dirons les uns, une simple catégorie d’articles diront les autres. Au final, je nomme donc ça « WordPress sans plugin ».

Le concept est simple, comment avec quelques lignes de codes ou quelques astuces, se passer de certains plugins. J’avais déjà parlé des problèmes de sécurité concernant les plugins WordPress, nous verrons donc dans cette série comment vivre sans certains.

Attention cependant, les plugins peuvent contenir des failles mais ils restent avant tout du code, vous pouvez donc théoriquement trouver des failles dans certains morceaux de code servant d’alternatives à certains plugins.

Maintenant que le concept est introduit, passons au vif du sujet !

 Créer des boutons de partage sans plugin

L’exemple typique d’un plugin qui peut être évité, si l’on regarde de plus près, qu’est ce que fait un plugin de ce genre ?

  • Prend l’url de la page
  • Crée les liens de partage en insérant l’url
  • Restructure le tout sous forme de bouton
  • Inclut les boutons au début ou à la fin de l’article

Nos amis de chez Crunchify nous on donc mis en ligne un code tout prêt pour ça, un petit aperçu :

wordpress bouton partage sans plugin diaspora

Allons jeter un œil !

Fichier CSS

Je commence par vous donner celui ci, car il serait dommage de rater les tests que nous allons effectuer car les classes ne sont pas définies :p

.crunchify-link {
padding: 4px 8px 6px 8px;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);}
.crunchify-link:hover,.crunchify-link:active {color: white;}
.crunchify-twitter {background: #00aced;}
.crunchify-twitter:hover,.crunchify-twitter:active {background: #0084b4;}
.crunchify-facebook {background: #3B5997;}
.crunchify-facebook:hover,.crunchify-facebook:active {background: #2d4372;}
.crunchify-googleplus {background: #D64937;}
.crunchify-googleplus:hover,.crunchify-googleplus:active {background: #b53525;}
.crunchify-buffer {background: #444;}
.crunchify-buffer:hover,.crunchify-buffer:active {background: #222;}
.crunchify-pinterest {background: #bd081c;}
.crunchify-pinterest:hover,.crunchify-pinterest:active {background: #bd081c;}
.crunchify-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;}

Rien de compliqué ici, du CSS classique que vous pourrez modifier si vous en avez envie, passons au plus intéressant !

Function.php

Le code suivant est donc à insérer dans votre fichier function.php :

function crunchify_social_sharing_buttons($content) {
if(is_singular() || is_home()){

// Get current page URL
$crunchifyURL = get_permalink();

// Get current page title
$crunchifyTitle = str_replace( ' ', '%20', get_the_title());

// Get Post Thumbnail for pinterest
$crunchifyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=Crunchify';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;

// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;

// Add sharing button at the end of page/page content
$content .= '<!-- Crunchify.com social sharing. Get your copy here: http://crunfy.me/1EFBLtA -->';
$content .= '<div class="crunchify-social">';
$content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$content .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" target="_blank">Pin It</a>';
$content .= '</div>';

return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');

Nous retrouvons ici le schéma dont je vous parlais au début de l’article, de la création de liens, jusqu’à l’insertion des boutons.

Avec ce code les boutons suivants sont disponibles :

  • Facebook
  • Twitter
  • GooglePlus
  • Buffer
  • Pinterest

Pour ma part je l’ai modifié afin de supprimer buffer & pinterest tout en ajoutant Diaspora et en modifiant les CSS à mon goût, merci FontAwesome !

Insérer vos propres boutons de partage

Pour faire il suffit de reprendre la même structuration que ceux déjà présents, par exemple le bouton Facebook se présente ainsi :

$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';

Il vous suffit alors de remplacer les variables par de nouvelles créées vous même ou alors de directement les insérer.

Regardons de plus près ce procédé ensemble !

Insérer un bouton de partage Diaspora

Nous avons donc besoin de l’url de la page ainsi que de son titre, sous forme de variable afin de correspondre avec la page en cours de lecture.

Le cas Diaspora est spécial, nous aurons aussi besoin de l’outil sharetodiaspora permettant de partager une page sur n’importe quel pod.

Nous récupérons donc le code permettant le partage (sans javascript), ce qui nous donne ceci :

<a href="http://sharetodiaspora.github.io/?title=Your title here&url=http://www.example.com/some/path" target="_blank"></a>

Il ne nous reste plus qu’à insérer la variable du titre et de l’url des pages sur lesquelles se trouve votre bouton. Par chance, le code que je vous ai donné plus haut les inclus déjà, il ne reste plus qu’à s’en resservir !

Variable de titre : $crunchifyTitle

Variable de l’url : $crunchifyURL

Nous avons donc le code suivant :

<a href="http://sharetodiaspora.github.io/?title='.$crunchifyTitle.'&url='.$crunchifyURL.'" target="_blank"></a>

Nous l’insérons ensuite avec les précédent en ajoutant les classes CSS, voici le résultat :

$content .= '<a class="crunchify-link crunchify-diaspora" href="http://sharetodiaspora.github.io/?title='.$crunchifyTitle.'&url='.$crunchifyURL.'" target="_blank"></a>';

Retirer les boutons des pages

Sur ce blog, mes seules pages sont celle de don et de contact, je ne trouve donc pas utile que ces dernières disposent des boutons de partage.

Pour les faire apparaître uniquement sur vos articles il faut alors modifier le code du fichier function.php, trouvez donc la ligne suivante :

if(is_singular() || is_home())

Et remplacez la par celle-ci :

if (is_single())

 Avantages :

Des boutons uniformisés

Un des problèmes que j’ai rencontré lorsque j’ai voulu insérer des boutons de partage est la non-uniformité des boutons.

Je pourrai me contenter d’utiliser un seul plugin mais  aucun ne contient tous les boutons que je souhaite afficher. Je serai donc dans l’obligation de modifier chaque plugins à la main.

Cette démarche étant beaucoup plus longue que la mise en place du code nous même, je n’y vois pas d’intérêt.

Fichiers css, javascript & requêtes HTTP

Plusieurs plugins veut donc dire plusieurs fichiers à charger, css ou même parfois javascript. Même si on peut potentiellement les combiner et les minifier ça reste tout de même beaucoup de code pour pas grande chose, keep it simple

Envie de partager ?

Poster un Commentaire

9 Commentaires sur "WordPress sans plugin : Des boutons de partage dont Diaspora"

avatar
Angristan
Invité

Et du coup c’est possible d’avoir ton CSS pour les icônes ? :)

wpDiscuz