Panoramique header - Labo de Creativconflans.fr

Créer un bouton follower pour les réseaux sociaux


Pour continuer l’article Suivez-nous fini la partie théorie, on passe aux choses sérieuses, le code source, le hack tout ce que j’aime nous allons créer le bouton follower.

Pour commencer la partie pratique, on va prendre le coté facilité avec les outils mise à disposition dans les centres développements des réseaux sociaux. Assez rapide pour les insérer mais pas très esthétique pour un site ou disons plutôt on les voit sur pas mal de sites web. Il faut quand même le faire pour apprendre un peu plus les réseaux sociaux et le bouton follower.

Twitter

Voici le code source à insérer sur votre blog, le plus généralement c’est dans un widget Texte qu’on l’ajoute.

Changez l’URL par celle de votre profil.

Par défaut le nombre de followers n’est pas affiché pour activer cette option il faut renseigner true à l’attribut data-show-count.

Ajouter aussi l’attribut data-size= »size » pour agrandir le bouton.

<

pre><a href= »…. data-size= »large »>



Bouton follower de Twitter.

Vous pouvez vous rendre sur le site des développeurs Twitter pour affiner votre bouton. Je vous conseille tout de même de créer une application  » Profil « , nous allons en avoir besoin dans les prochains tutoriaux. Cela vous servira pour créer vos clés afin de profiter d’autres éléments de twitter pour votre blog.

Facebook

Pour Facebook c’est encore plus facile que Twitter pour ajouter un bouton follower, il faudra ajouter ce code source sur votre blog après avoir répondu au formulaire:

Vous pouvez aussi ajouter la SocialBox de Facebook qui s’ajoute facilement dans un widget.


D’autres boutons, box et liens sont disponible pour intégrer sur votre site mais assez limité par rapport aux autres réseaux sociaux présentés: Développeurs.

Google+

Pour Google+, il existe beaucoup plus de formes de boutons, de badges et d’icones pour permettre à vos visiteurs de vous suivre. J’ai choisi 2 exemples différents pour savoir lequel est le plus adapté à votre site: le bouton et le badge.

Le bouton abonnement tout simple qu’on ne voit pas souvent.


Le badge qu’on peut insérer dans un widget ou un footer ( notre badge est dans le toogle sur l’accueil )

Pour ce badge en mode paysage, j’ai choisi le Layout Landscape. pour qu’il soit plutôt horizontal que vertical



Vous désirez une configuration plus avancé de vos boutons et de vos badges, je vous donne rendez-vous sur le site de Google Developpers.

Bouton follower made in nos petits doights

Nous allons passer à la création de note bouton follower en utilisant une feuille de style en CSS3.
Code source CSS3

Code source HTML

Ce sont des boutons follower tout simple avec un effet d’opacité mais assez efficace sur votre blog pour inviter vos visiteurs sur les réseaux sociaux et qu’ils deviennent follower.On peut aussi ajouter un effet de changements de couleurs, on a pleins d’effets aussi sympa les un que les autres pour compléter dans notre feuille de style.

Alors vous être plutôt bouton follower ou plugin ?

Commentaires