Kedora

Comment insérer des boutons de partage de réseaux sociaux?

#partage#reseauxsociaux

Aujourd'hui insérer des boutons de partage sur un site devient banal car les réseaux sociaux sont devenus une part importante dans l'apport de trafic d'un site web. Je vais vous montrer comment créer des boutons de partage pour les réseaux sociaux. Pour pouvoir avoir un maximum de lectures sur ses articles, il faut pouvoir facilement les partager sur les réseaux sociaux comme Facebook, Twitter, LinkedIN ou encore par mail. 

Intégrer un bouton

Les boutons de partage vont vous permettre de booster le nombre de lectures sur vos articles car avec un seul partage vous pourrez atteindre des centaines voir des milliers de comptes. Alors on comprend à quel point un simple petit bouton peu booster le nombre de visiteurs sur un site web.

Il faut aussi savoir que le les moteurs de recherches utilisent les statistiques des réseaux sociaux. Cela permet donc d'influencer la visibilité d'une page web dans les résultats du moteur de recherches et donc pour conséquence d'influer une nouvelle fois le trafic d'un site.

 

J'ai trouvé une méthode assez simple à l'aide d'une url et d'une fenêtre en javascript pour pouvoir partager facilement une page. 

Partager sur Facebook

<a class="lien-sociaux" href="http://www.facebook.com/sharer.php?u=url" target="_blank" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><div title="Partager sur Facebook" class="icon-social-facebook" ><i class="fa fa-facebook" aria-hidden="true"></i>				</div></a>

Dans url vous mettrez le lien de la page que vous voulez partager. Vous pouvez aussi le faire en php facilement.  

 

Partager sur Twitter

<a class="lien-sociaux" href="http://twitter.com/share?url=urldelapage&text=titredelapage&hashtags=hashtagsdevotrechoix&via=lecomptequevousvoulez" target="_blank" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><div title="Partager sur Twitter" class="icon-social-twitter"><i class="fa fa-twitter" aria-hidden="true"></i>				</div></a>

Dans urldelapage vous mettrez le lien de la page que vous voulez partager.

Dans titredelapage vous mettrez le titre de la page que vous voulez partager.

Dans hashtagsdevotrechoix vous mettrez les hashtags que vous desirez sans mettre le "#" devant. 

Dans lecomptequevousvoulez vous mettrez le compte que vous voulez identifier sans mettre le "@" devant. 

Partager sur LinkedIn

 

<a class="lien-sociaux" href="https://www.linkedin.com/shareArticle?mini=true&url=urldelapage&title=titredelapage&summary=tagdelapage&source=site" target="_blank" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><div title="Partager sur linkedIN" class="icon-social-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>				</div></a>

Dans urldelapage vous mettrez le lien de la page que vous voulez partager.

Dans titredelapage vous mettrez le titre dela page que vous voulez partager.

Dans tagdela page vous mettrez les tags que vous desirez.

Dans site vous mettrez le site par exmple: kedora.fr. 

Partager par mail

<a  class="lien-sociaux" href="mailto:?subject=titredelapage&body=urldelapage" rel="nofollow"><div title="Partager par e-mail" class="icon-social-mail"><i class="fa fa-envelope" aria-hidden="true"></i>				</div></a>

Dans urldelapage vous mettrez le lien de la page que vous voulez partager.

Dans titredelapage vous mettrez le titre dela page que vous voulez partager.

Code CSS

Pour le code CSS je vous propose d'intégrer le même design que le mien, après à vous de voir comment voulez-vous placer ces boutons sur votre page web. Mais pour les integrer sur un blog je vous propose de les laisser comme ça en fin de page.

 

.social-share{    display: inline-flex;    width: 80%;    text-align: center;    margin-top: 30px;    margin-left: 10%;    margin-right: 10%;}.icon-social-facebook, .icon-social-twitter, .icon-social-linkedin, .icon-social-mail {    color: #FFF;    font-size: 40px;    margin-right: 10px;    text-align: center;    margin: 0 5px;    display: inline-block;    width: 220px;}.icon-social-facebook{    background-color: #3b589c;}.icon-social-twitter{    background-color: #1DA1F2;}.icon-social-linkedin{    background-color: #1884BB;}.icon-social-mail{    background-color: #eb6856;}.icon-social-facebook:hover,.icon-social-twitter:hover, .icon-social-linkedin:hover, .icon-social-mail:hover{    opacity: 1;}.lien-sociaux{    color: #FFF;}

 

Code HTML

 J'ai utilisé les icônes de Font Awesome pour les logos des réseaux sociaux, puisqu'ils sont plus faciles à charger et à manier en CSS. Pensez bien à télécharger le dossier et à le mettre sur votre serveur. Le lien est ici.

<head>	<meta charset="utf-8">	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	<link rel="stylesheet" href="../font-awesome-4.7.0/css/fontawesome.min.css"></head>

 

Voilà vous avez maintenant une barre de partage pour réseaux sociaux. J'espère que cet article vous aura plus. Si jamais vous avez des propositions d'article, contactez-moi :) 

Inscrivez-vous à ma newsletter pour recevoir mes prochains articles