Unziptech

Comment ajouter un widget réseaux sociaux tout-en-un dans Blogger

Au lieu d'empiler des widgets séparés pour Facebook, Twitter et l'e-mail, utilisez un widget social tout-en-un pour gagner de la place et réduire le temps de chargement.

Decompressing Your Digital Noise

Retour au blog
BloggerWidgetsRéseaux sociaux
Par Équipe Unziptech5 min de lecture

Les réseaux sociaux ont influencé le blogging dans une large mesure. Vous publiez un nouvel article et le partagez sur vos réseaux sociaux ; vos abonnés et fans reçoivent une mise à jour instantanée de votre contenu. Ils visitent votre blog et vous obtenez beaucoup de trafic. Pour que tout cela se produise, vous devez vous constituer une bonne base d'abonnés et de fans sur des réseaux comme Facebook et Twitter.

Beaucoup de gens ajoutent des widgets séparés pour chaque réseau sur leurs blogs et sites web, ce qui peut nuire au temps de chargement des pages. Pour réduire le temps de chargement et l'espace utilisé par tous ces widgets, vous pouvez intelligemment utiliser un seul widget qui les regroupe tous : Facebook, Twitter, un bouton de recommandation et l'abonnement par e-mail via FeedBurner. Vous gagnerez beaucoup de place en ajoutant ce widget, et vous pourrez utiliser l'espace libéré à d'autres fins, par exemple pour monétiser votre blog avec des régies publicitaires.

Comment ajouter le widget social tout-en-un

  1. Tout d'abord, accédez à votre tableau de bord Blogger en vous connectant à votre compte.
  2. Cliquez sur Mise en page pour ouvrir la mise en page de votre modèle.
  3. Cliquez ensuite sur Ajouter un gadget et sélectionnez le gadget HTML/JavaScript.
  4. Collez-y le code suivant et remplacez les noms de profil par les vôtres.
<style>
/* Social Widget */
#UT-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: linear-gradient(180deg,#FFCA00 0,#FF9B00 100%);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:linear-gradient(180deg,#ffda4d,#ff9b00);
outline:0;
box-shadow:0 0 3px #999;
border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul li, #other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a, #other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li a{
text-decoration:none;
}
#other-social-bar .other-follow li a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
</style>

<!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="UT-mashable-bar"> <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/YOUR_PAGE&amp;send=false&amp;layout=standard&amp;width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;height=100px" scrolling="no" frameborder="0" style="border:none; overflow:hidden;"></iframe>
</div>
<div class="twitter"> <!-- Twitter -->
<a href="https://twitter.com/YOUR_USERNAME" class="twitter-follow-button" data-show-count="true">Follow @YOUR_USERNAME</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="email-news-subscribe"> <!-- Email Subscribe -->
<div class="email-box" style="background:#EDF4FF">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEED_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="YOUR_FEED_ID" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</div>
<div id="other-social-bar"> <!-- Other Social Bar -->
<ul class="other-follow">
<li class="my-rss">
<a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/YOUR_FEED_ID" target="_blank">RSS Feed</a>
</li>
<li class="my-linkedin">
<a rel="nofollow" title="linkedin" href="#" target="_blank">LinkedIn</a>
</li>
</ul>
</div>
</div>
<!-- End Widget -->
</div>
<!--end of social widget-->
  1. Une fois cela fait, cliquez sur Enregistrer et déplacez le gadget à l'endroit où vous voulez qu'il s'affiche.

Les éléments à modifier dans le code sont les espaces réservés YOUR_PAGE (le nom de votre page Facebook), YOUR_USERNAME (votre nom d'utilisateur Twitter) et YOUR_FEED_ID (l'identifiant de votre flux FeedBurner). Veillez à ne pas modifier les autres parties, sinon le widget pourrait cesser de fonctionner.

Si le widget ne tient pas dans votre barre latérale, modifiez la valeur de largeur (width:300px) dans la règle CSS #UT-mashable-bar.

Vous devriez aussi consulter notre section Astuces et conseils Blogger pour plus de tutoriels sympas. Cela améliorera votre expérience de blogging.