TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget d’icônes de partage social simple pour Weebly

32

De nos jours, le partage social est un élément essentiel de tout site Web. Ils permettent aux utilisateurs de faire passer le mot instantanément en quelques clics en partageant votre article. Alors que le marketing sur les réseaux sociaux est un sujet populaire, les constructeurs de sites comme Weebly ne proposent pas de widget de partage social pour les utilisateurs. Malheureusement, même les utilisateurs de plans d’affaires sur Weebly n’auront pas d’icônes de partage social décentes sur leur site après avoir payé près de 25 $ par mois. Dans cet article, nous allons créer un widget de partage social CSS personnalisé pour le site Weebly et expliquer comment l’ajouter sur votre site Weebly avec des liens de partage social.

Malheureusement, cela doit être fait sur chaque page en ajoutant l’URL de la page. Consultez notre article séparé sur la façon d’ajouter des icônes sociales par défaut et un widget spécial d’icônes tournantes essentiellement pour ajouter des profils sociaux sur votre site Weebly.

Widget d’icônes de partage social CSS personnalisé

Étant donné que l’objectif de cet article n’est pas de discuter de l’aspect de la conception, nous fournirons le code CSS complet comme indiqué ci-dessous. Fondamentalement, nous utilisons des icônes de police géniales pour les icônes sociales avec une largeur de conteneur de 300 pixels pour accueillir cinq icônes sociales – Facebook, Twitter, Google+, Pinterest et LinkedIn.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> /* Container */ .column { width: 300px; } /* Individual Icons with first Box for Facebook */ .box { background-color: #3b5998; color: rgba(251, 244, 217, 0.99); display: block; width: 17%; text-align: center; float: left; margin-right: 1px; border-radius: 50%; } /* Twitter */ .box:first-child + .box { background-color: #55acee; } /* Google+ */ .box:first-child + .box + .box { background-color: #dc4e41; } /* Pinterest */ .box:first-child + .box + .box + .box { background-color: #bd081c; } /* LinkedIn */ .box:first-child + .box + .box + .box +.box { background-color: #0077b5; } /* Link Effects */ .column a { text-decoration: none; color: #ffffff; outline: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; } /*Font Awesome Icons Effects */ .box .fa { margin: 10px; display: block; font-size: 26px; } /* Box Hover Effects */ .box:hover { opacity: 0.7; } </style>

Widget HTML pour les icônes de partage social

Vous trouverez ci-dessous le code HTML ainsi que l’URL de partage pour le widget social :

<div class="column"> <a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box"> <div class="fa fa-facebook"></div> </a> <a href="https://twitter.com/home?status=www.webnots.com" class="box"> <div class="fa fa-twitter"></div> </a> <a href="https://plus.google.com/share?url=www.webnots.com" class="box"> <div class="fa fa-google-plus"></div> </a> <a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box"> <div class="fa fa-pinterest"></div> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box"> <div class="fa fa-linkedin"></div> </a> </div>

Le widget ressemblera à ci-dessous sur le site publié :

Nous avons utilisé cette URL de site, assurez-vous de remplacer le contenu pertinent comme indiqué ci-dessous à partir du code HTML :

  • Facebook, Twitter et Google+ – remplacez l’URL du site par la vôtre.
  • Pinterest – remplacez l’image et l’URL.
  • LinkedIn – remplacez l’URL et le titre du site.

Si vous souhaitez l’utiliser comme widget « Suivez-nous », remplacez simplement les URL dans la partie « href » par vos propres liens de profil social.

Ajout de CSS et HTML sur Weebly

  • Collez le CSS dans la section « Header Code » de la page dont vous avez besoin ou placez-le sous les « Paramètres » pour que le code soit efficace au niveau du site. En savoir plus sur l’ajout de CSS dans le site Weebly.

Widget d'icônes de partage social simple pour Weebly

Ajouter un code d’en-tête dans la page

  • Ajoutez le contenu HTML sur une page où vous souhaitez placer les icônes, en utilisant l’ élément " Embed Code ".
  • Publiez votre site pour voir les icônes de partage en action.

Personnalisation du widget

  • Bien que nous ayons expliqué avec cinq icônes, vous pouvez ajouter n’importe quel nombre d’icônes. Référez-vous aux codes de couleur des icônes sociales pour choisir la couleur de vos icônes.
  • La largeur du conteneur plein est de 300px pour aligner automatiquement les icônes sur les appareils mobiles. Si vous ajoutez d’autres icônes, assurez-vous d’utiliser les requêtes @media pour aligner les icônes sur le mobile de manière appropriée.
  • La largeur de l’icône individuelle est de 17% dans la classe CSS ".box" que vous pouvez réduire ou augmenter selon vos besoins.
  • La taille de l’icône est de 26px avec la classe CSS ".box .fa" que vous pouvez modifier selon vos besoins.
  • Si vous ajoutez plus d’icônes, ajoutez simplement "+ .box" et définissez la couleur de fond des icônes.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails