Tutorial : personnaliser le plugin Ultimate Follow Me

De nos jours, on trouve tout ce qu’on veut pour personnaliser WordPress, tant au niveau du design que des plugins.

Je cherchais un module permettant d’afficher mon réseau sur mon blog.

Alors oui, j’aurais eu du temps, je me serais probablement amusé à le faire moi-même avec quelque chose de simple :

  • Une image spécifique à chaque réseau social ;
  • Un lien vers mon réseau.

Rien de compliqué pour un petit tripoteur comme moi.

Cependant, je suis débordé, même plus le temps de rédiger et, de plus, j’ai trouvé comme beaucoup d’autres Ultimate Follow Me, un plugin assez pratique.

Plugin Ultimate Follow Me

Ce plugin réalisé par Russell Yermal actuellement en version 1.2.2 a été téléchargé bientôt 4 000 fois, autant dire qu’il a du vécu.

Ce module permet d’afficher, après téléchargement et activation de l’extension, un widget que vous pouvez mettre où vous voulez dans votre thème.

Très sympathique, il permet d’afficher Facebook, Twitter, LinkedIn (avec un lien personnalisé du style http://www.linkedin.com/in/identifiant), YouTube, mail et flux RSS.

Ouais mais je suis difficile !

Ben oui, c’est un peu light quand on est sur la plupart des réseaux comme Google + par exemple.

Alors, j’avais entrepris de bidouiller un peu le code PHP pour arriver à mes fins.

Et j’y suis arrivé comme vous pouvez le voir sur l’accueil du blog, dans le premier cadre à droite.

Pour une fois, je propose de vous faire partager le fruit de mon labeur en vous permettant de télécharger le code modifié pour que vous ajoutiez vous-aussi voss réseaux.

J’ai ajouté Viadéo, Google + et Identi.ca et j’ai optimisé LinkedIn tout en conservant uniquement le style 1, c’est-à-dire les plus petites icônes.

Ultimate Follow Me version TiPi

Téléchargement de l’archive

Il faut commencer par le commencement, téléchargez le fichier.

[download id= »2″]

Upload des images

Quand vous aurez téléchargé le fichier ultimate-follow-me-tipi en archive .zip, installez les 3 images du dossier style1 dans le dossier du même nom sur votre serveur web, à l’emplacement du genre /wp-content/plugins/ultimate-follow-me/style1.

Modification du code

Allez, depuis votre navigateur web, dans votre WordPress.

Vous cliquez sur Extensions installées puis sur Ultimate Follow Me Plugin by Free Blog Factory & TiPi.

Là, allez sur Modifier pour ajouter le code personnalisé.

Modification du code Ultimate Follow Me

Vous ouvez le fichier ultimate-follow-me.php de mon archive avec Notepad++ ou Wordpad ou le Bloc-Notes et vous copiez-collez mon code sur le premier fichier, par défaut ultimate-follow-me/ultimate-follow-me.php.

Vous sauvegardez via Mettre à jour le fichier en bas.

Paramétrage des liens réseaux

Rendez-vous alors sur Widgets dans Apparence.

Là, vous placez le widget Ultimate Follow Me TiPi où vous le voulez dans vos sidebars.

Vous ajoutez vos liens vers vos réseaux, j’ai mis Viadéo, Google + et Identi.ca.

Et si y’a une mise à jour ?

Il n’y en a pas beaucoup pour ce module.

Mais, s’il y a, il faudra alors refaire les ajouts de code.

Vous viendrais me demander sur mon blog et je vous le ferai, dans la mesure du possible.

Encore plus ?

Petite optimisation pour vous, j’ai commenté certaines lignes du code, vers la fin notamment.

Vous pourrez alors choisir l’ordre d’affichage des réseaux en les mettant dans l’ordre que vous voulez, sachant qu’il y en a 4 par ligne.

Autre chose, si vous voulez configurer d’autres styles avec des images plus grandes,mettez-les dans le dossier adéquat et vous activez le style que vous souhaitez.

Le code est opérationnel pour tous les styles, il suffit juste d’ajouter les images aux 2 autres styles et d’en activer 1.

Dernière remarque. Pour ajouter un réseau quelconque, vous suivez les étapes du code en paramétrant les lignes de code commentées.

Les lignes commentées sont en fait désactivées, il suffit d’enlever certains morceaux de code pour les intégrer :

  • en PHP, elles sont identifiées par /* au début et */ à la fin ;
  • en HTML, on les voit avec <!-- au début et --> à la fin.

Vous enlevez ces morceaux et vous modifiez le code. Bien entendu, remplacez TonNom par le nom du réseau, http://www.TonReseau/ par le lien du réseau à ajouter et TonId un identifiant court qui servira juste pour le codage.

En gros, 6 lignes à décommenter et à modifier :

$TonNom_image = 'TonNom.png';

function create_TonNom_tag($id, $style_id){
if(strlen($id) < 1)
return;
$url = "http://www.TonReseau/$id";
$img = '<img src="'.get_TonNom_image($style_id).'" border="0" style="margin:3px;"/>';
return '<a href="'.$url.'" target="_blank">'.$img.'</a>';
}

function get_TonNom_image($style_id){
global $path_to_styles;
global $TonNom_image;
return $path_to_styles.'/style'.$style_id.'/'.$TonNom_image;
}

if(isset($_POST['uf_TonId_id']))
$data['uf_TonId_id'] = $_POST['uf_TonId_id'];

<tr>
<td align="right"><label>Ta phrase pour le widget :<small>(http://www.TonReseau/<u>identifiant</u>)</small> :</label></td>
<td><input name="uf_TonId_id" type="text" value="<?php echo $data['uf_TonId_id']; ?>" /></td>
</tr>

echo create_TonNom_tag($data['uf_TonNom_address'], $data['uf_style']);

Alors, cela vous plaît ?