Making-of: Intégrer un encart flottant facebook sur votre blog

Tout nouveau, tout beau, vous pouvez apprécier une “floating facebook like box” sur le côté gauche de votre blog, McGulfin. En trois étapes, une petite explication sur le “ comment intégrer ” un tel encart. 


Etape 1: Le but est d’insérer un petit fichier javascript intitulé jquery. Sur blogger, vous vous rendez sur “Modéle”, “Modifier le code html”, vous recherchez la balise <head> et vous collez ce code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Etape 2: Maintenant que jquery est installé, l’opération consiste à mettre en place l’encart flottant facebook.

1- Tout d'abord, vous cliquez sur ctrl + f afin de déceler la balise </body>

2- Si vous utilisez blogger, comme moi, veuillez copier ce code:

<!--Floating Facebook Widget by www.TheBlogWidgets.com START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKxyi2EXRR0rRMsEh6QKwcb_EBAw3xn9293dQhgkA45XTZt1EDKGqrx_qJ6FQwjZOsBmjuQqV4SvlyegoP4LekSAj6WEdDBxKfqi2gd_dFA-us7WRWCn0eReZYBSWvFtXJI7ScR65dH7E/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div class="theblogwidgets" style="">
<!--Brought to you by http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>
<!-- http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Floating Facebook Widget</a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.TheBlogWidgets.com END-->

3- Ensuite, il suffit de le coller dans ce logiciel: Parse HTML sur blogger , afin de rendre ledit code blogger-compatible ( http://blogcrowds.com/resources/parse_html.php )

4- Collez le code ainsi obtenu avant la balise </body>

Etape 3: Personnalisation / Adaptation. Maintenant que l'encart est en place et actif, le but est de le connecter à votre page facebook.

1- Avec un brin d’aide, la fonction recherche ( ctrl +f), recherchez ceci:
facebook.com%2Ftheblogwidgets

2- A la place de theblogwidgets, veuillez mettre le nom de votre page facebook, tel qu'il apparaît au niveau de votre url après ces termes: facebook.com/ Par exemple, pour McGulfin, dont l'adresse facebook est: https://www.facebook.com/pages/McGulfin/105989102882256?ref=hl , theblogwidgets est remplacé par: pages/McGulfin/105989102882256?ref=hl

D’autres widgets sont disponibles sur the blog widgets, et dont l’adresse web est: http://www.theblogwidgets.com/

Pour aller plus loin: Si vous souhaitez intégrer un menu déroulant sur votre blog, cliquez ici ! 

Commentaires

Articles les plus consultés