Bannière - Twitter et WordPress

Intégrer un bouton de partage Twitter sur votre blog WordPress relève d’un jeu d’enfant. Il suffit de copier / coller le bout de code JavaScript fourni par le service de micro-blogging pour l’afficher sur votre site. Mais comment faire pour disposer d’un bouton sur-mesure et surtout sans JavaScript ?

Ce besoin est apparu lors de la refonte du thème du site Protuts.net. J’avais l’idée de créer une zone contenant des liens de partage mais je souhaitais absolument réduire le temps de chargement et donc me passer de JavaScript.

De fait, il existe une technique relativement simple à mettre en oeuvre qui combine les fonctions PHP de WordPress et celles prises en charge par Twitter.

Pour commencer, éditez le fichier de votre thème qui abritera votre lien de partage Twitter. Par exemple, content-single.php pour le thème par défaut Twenty Eleven mais l’emplacement n’a pas d’importance sur le bon déroulement des opérations. Pour ma part, je préfère placer la totalité des liens de partage dans un fichier PHP séparé.

Copiez donc les lignes de code suivantes que je vais vous détailler ci-après :

<a target="_blank" title="Cliquez pour partager sur Tweeter" href="http://twitter.com/home?status=En train de lire <?php the_title(); ?> => <?php the_permalink(); ?> via @wpchannel" class="share-twitter share-icon" via="wpchannel" rel="nofollow">Twitter</a>

Plusieurs attributs sont personnalisables en fonction de votre compte Twitter et de votre blog WordPress :

  • title : l’infobulle au survol du lien ;
  • href : le lien de partage vers Twitter avec la particularité essentielle qu’il contient le tweet. Saisissez-le juste après ?statuts= et n’hésitez pas à combiner celui-ci avec des fonctions PHP de WordPress comme dans l’exemple qui récupère le titre et le permalien de l’article. Ajoutez aussi un @votre_compte_twitter ;
  •  via : indiquez le nom de votre compte Twitter ;

Sauvegardez le fichier du thème que vous venez de modifier et vérifiez que tout fonctionne en ligne.

Pour vous donner une idée du résultat final, rendez-vous en bas d’un article du site Protuts.net.

Ce tutoriel vous aura montré comment disposer d’un lien de partage vers Twitter, facilement personnalisable et sans avoir recours à du JavaScript. Vous connaissez d’autres méthodes tout aussi pratique ? Partagez-les !

Crédits photo : Ddesign

14 commentaires

  1. Merci pour ce code

    Ca aurait été un peu bien d’ouvrir un pop up à la place d’un nouvel onglet.

    Et aussi de pouvoir afficher le nombre de partage twitter pour une totale personnalisation.
    je sais que Seomix le fait mais je n’arrive pas a trouvé le code sur le net.

    1. Seomix le fait pour le nombre total d’abonnés. Dans sa version actuelle, il y a les boutons de partage classique…

      Pour le pop-up, tu peux le faire mais avec un peu de JavaScript.

        1. Effectivement, j’avais dans une version précédente des boutons de partage sans javascripts. Mais j’ai depuis abandonné cette idée pour avoir un compte en temps réel des partages, et en mettant en asynchrone les scripts qui gère chacun de ces boutons.

  2. J’utilise aussi ce genre de bouton simple, par contre je vois 3 problèmes

    1) Tu écris dans un lien sans faire de urlencode(), donc moi qui ai un thème qui affiche le titre sans textures (les doubles quotes  » sont de vraies  » et pas des quotes anglaises), cela donne un problème de concaténation de quotes, je te laisse imaginer le résultat si dans le href tu as un titre « Toto ! » ça donne « Je lis cet article « Toto ! » fin. » Il y a bien un soucis de  » imbriquées !
    Solution :
    utiliser « urlencode() » qui est une fonction PHP et non WP permettant d’encoder les caractères qui sont inclus dans un lien.
    Exemple :
    http://twitter.com/home?status=En train de lire <?php echo urlencode( get_the_title() ); ?> => <?php echo urlencode( get_permalink() ); ?> via @wpchannel

    2) Je fais parfois des titres très longs. En ajoutant « En train de lire » + mon titre +  » =>  » + permalink (long aussi donc) + via @boiteaweb, j’ai dépassé 140 caractères et twitter me coupe mon via @boiteaweb » … NAAAON !
    Solution :
    Utiliser le paramètre « via » de twitter
    Exemple :
    http://twitter.com/home?status=En train de lire <?php echo urlencode( get_permalink() ); ?> => <?php echo urlencode( get_the_title() ); ?>&via=wpchannel
    Ainsi, tweeter forcera le via, il ne sera plus coupé (manuellement par vous, si vous coupez la fin), par contre pensez à mettre l’URL en premier, sinon c’est elle qui sera coupée

    3) Les urls seront raccourcies avec t.co et comme j’utilise ma propre url de raccourcis qui est baw.li je ne veut pas mettre t.co !
    Solution :
    Ne pas utiliser « home?status= » mais « intent/tweet?text »
    Exemple :
    http://twitter.com/intent/tweet?text=En train de lire <?php echo urlencode( get_permalink() ); ?> => <?php echo urlencode( get_the_title() ); ?>&via=wpchannel

    4) (oui un 4eme qui est dû au fait que j’utilise une url raccourcie donc c’est MON problème)
    Comme j’utilise une url raccourcie dans mon tweet, je dois indiquer à tweeter quelle est la véritable URL pour laquelle il doit compter les tweets, vues etc.
    Solution :
    Utiliser le paramètre « counturl »
    Exemple :
    http://twitter.com/intent/tweet?text=En train de lire <?php echo urlencode( wp_get_shortlink() ); ?> => <?php echo urlencode( get_the_title() ); ?>&via=wpchannel&counturl=<php echo urlencode( get_permalink() ); ?>

    5) Non ce n’est pas un problème mais on peut aussi ajouter le paramètre « hashtags » qui prends des mots séparés par des virgules et en fait des hashtags, pas mal pour y placer vos mots clés
    Exemple:
    http://twitter.com/intent/tweet?text=En train de lire <?php echo urlencode( wp_get_shortlink() ); ?> => <?php echo urlencode( get_the_title() ); ?>&via=wpchannel&counturl=<php echo urlencode( get_permalink() ); ?>&hashtags=<?php echo urlencode( implode( ‘,’, wp_get_post_tags( $post->ID, array( ‘fields’ => ‘names’ ) ) ) ); ?>

    Voilà, là ça me plait bien
    Désolé de reprendre le code, mais comme ça bugait chez moi et que les paramètres « via » et « counturl » n’était pas cités, je n’ai pas su me retenir :p

      1. … qui n’a absolument rien à voir !
        Démo de leur différence :
        echo urlencode( ‘ »tâtâ, toto & titi..!’ );
        echo esc_url( ‘ »tâtâ, toto & titi..!’ );
        donne :
        %22t%E2t%E2%2C+toto+%26+titi..%21
        http://t�t�,toto&titi..!

        urlencode() encode les caractères pour qu’ils puissent être inclus dans un paramètre d’url par exemple.
        Alors que esc_url() vérifie et néttoie une chaine pour en sortir une url.
        Esc_url() est plutot utilisée pour construire un href.

        Bisou

  3. Pour moi, je ne pouvais intégrer mon lien complet c’était un truc du style : monsite.fr/?p=mapage&id=monid et il ne me prenais pas en compte le : &id. Donc j’ai coupler sa à l’api de bit.ly afin de racourci mes liens et c’est perfect merci

Laisser un commentaire