• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Ajouter « bottom scrolling popup subscription » à votre blog sans plugin

Ajouter « bottom scrolling popup subscription » à votre blog sans plugin

Màj le 14 février 2017

Salut blogueurs, Aujourd’hui on va apprendre comment ajouter une boîte d’abonnement à vos pages sur facebook et twitter. Cette boite glisse doucement au moment du défilement de la page en bas et contient deux boutons : un pour facebook et l’autre pour twitter, vous pouvez bien sure ajouter d’autres boutons.

Ce « bottom scrolling popup subscription » peut être ajouté facilement à Wordpress et aussi à Blogger, en copiant le code ci-dessous et le coller dans un widget texte.

scolling facebook popup

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

</script>   <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#IGsocialslide").show("slow");else $("#IGsocialslide").hide("slow");});function closeIGsocialslide(){$('#IGsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> 

<style type='text/css'> #IGsocialslide{ background:#f3f3f3; border-radius:9px; -moz-border-radius:8px;
-webkit-border-radius:8px; -moz-box-shadow:inset 0 0 4px #333; -webkit-box-shadow:inset 0 0 4px #333; box-shadow:inner 0 0 3px #333; padding:12px 14px 12px 14px; width:300px; position:fixed; bottom:13px; right:2px; display:none; z-index:3; height:65px;} </style> 

<div style="display: none;" id="IGsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeIGsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fwpcours&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div> <div style="float:left; margin:15px;"><a href="https://twitter.com/wpcours" class="twitter-follow-button" data-show-count="true" data-size="small" data-show-screen-name="false">Follow</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div>

Note:

Changer wpcours par le nom de votre page facebook, et même chose pour twitter.

Si vous voulez que cette boite apparaîtra à gauche de votre blog, changer right:2px; par left:2px;

Voici un deuxième modèle de popup pour facebook seulement:

popup-facebook

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.4.4%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> &nbsp; <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%24(window).scroll(function()%7Bif(%24(document).scrollTop()%3E%3D%24(document).height()%2F4)%24(%22%23IGsocialslide%22).show(%22slow%22)%3Belse%20%24(%22%23IGsocialslide%22).hide(%22slow%22)%3B%7D)%3Bfunction%20closeIGsocialslide()%7B%24('%23IGsocialslide').remove()%3B%24.ajax(%7Btype%3A%22POST%22%2Curl%3A%22%2Ffacebookpage.php%22%7D)%3B%7D%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D'text%2Fcss'%3E%20%23IGsocialslide%7B%20background%3A%23fff%3Bborder-left%3A%201px%20solid%20%23f0f0f0%3Bborder-top%3A%202px%20solid%20%23ea6a1b%3B%20-webkit-box-shadow%3Ainset%200%200%204px%20%23333%3B%20box-shadow%3Ainner%200%200%203px%20%23333%3Bbox-shadow%3A%200%204px%2010px%20%23666%3B%20padding%3A12px%2014px%2012px%204px%3B%20width%3A210px%3B%20position%3Afixed%3B%20bottom%3A3px%3B%20right%3A2px%3B%20display%3Anone%3B%20z-index%3A3%3B%20height%3A65px%3B%7D%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
<div style="display: none;" id="IGsocialslide">
 <a style="text-decoration:none;position:absolute;top:1px;right:10px;color:#DB0214;font-size:14px;font-family:Oswald,arial;" href="javascript:void(0);" onclick="return closeIGsocialslide();">x</a> <span style="font-family: Oswald,arial; font-size: 16px; margin: 10px 0;color: #ea6a1b;">SUIVRE TIFAWT</span> 
<div style="float:left; margin:15px;"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fwpcours&width=149&layout=button_count&action=like&size=small&show_faces=false&share=false&height=46&appId=406118966161312" width="149" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
</div>

  

N’oubliez pas de changer « https%3A%2F%2Fwww.facebook.com%2Fwpcours » par le lien de votre page facebook. vous pouvez utiliser ce widget pour blogger et aussi Wordpress, il suffit de copier le code entier et de le coller dans un Widget texte et le mettre dans le footer de votre site pour ne pas affecter le vitesse de chargement de votre blog.

Ces deux Widgets vous permettra d’augmenter facilement le nombre de j’aime de votre page facebook.


Plus de cours et exercices corrigés :

  • Comment envoyer tous les types de fichier dans les médias WordPress
  • Corriger erreur 403 dans Wordpress
  • Ajouter un bouton suivant et précédent (Next-previous) à votre blog
  • Ajouter des fichiers Javascript et CSS à l’en-tête et au pied de page dans WordPress
  • Utiliser le CDN Fonte Awesome pour accélérer le chargement de votre site

Interactions du lecteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact