Pulsanti social recuperati in modo asincrono con ajax

Scopriamo come recuperare i pulsanti social o di condivisione in modo asincrono con ajax al fine di velocizzare il caricamento della pagina.

[button link=”http://www.targetweb.it/tutorial/2015/segui-socialbox-ajax/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]

Integrare i social network al fine di renderli sempre meno “invasivi” per l’utente finale è una sfida sempre attuale per tutti i developer e web designer moderni. In questo articolo ho pensato di fornire una soluzione semplice ma estremamente efficace per caricare gli script sociali solo se sono realmente necessari, ovvero quando l’utente ha bisogno di effettuare un’interazione sociale.

Ecco la mia idea concettuale:

A) Di base la pagina viene caricata senza script sociali, a tutto vantaggio della velocità di caricamento

B) Una volta che l’utente apre un riferimento sociale (come ad esempio l’icona di facebook) uno script in ajax fa la richiesta a uno script di elaborazione php in modo da “caricare” lo script facebook.

Come immaginerete nel caso l’utente non voglia eseguire una qualsiasi action sociale la pagina viene caricata senza script sociali e tutto il progetto risulterà molto piu snello nel caricamento. Ovviamente questa soluzione è consigliabile sopratutto per progetti a medio-alto traffico.

Struttura HTML

  <ul class="followus">
            <li class="followtext">Seguici: </li>
            <li class="openSocialBox" data-target="facebook"><i class="fa fa-facebook-square"></i> </li>
            <li class="openSocialBox" data-target="twitter"><i class="fa fa-twitter"></i></li>
            <li class="openSocialBox" data-target="feedrss"><i class="fa fa-rss-square"></i></li>
            <div class="socialcontainerbox"></div>
  </ul>

Styling CSS

.followus{ position: relative; display: block; padding: 20px;  }
.followus li{ float: left; padding: 5px 6px; margin: 0px 3px; list-style: none;   }
.followtext{ font-weight: bold; }

.openSocialBox{ cursor: pointer;  }
.openSocialBox:hover{background: url('li-bg.png'); }
.socialcontainerbox{  border:1px solid #ececec; position: absolute; bottom: -88px; left: 20px; background: #fff; height:60px; width: 250px; display: none; padding:10px; color:#333; }

(necessario per l’esempio in demo ma completamente personalizzabile).

Script jQuery

Il funzionamento dello script è piuttosto semplice, unica nota è la variabile data-target che permette di recuperare quale tipologia social recuperare ed è l’unica variabile passata via POST allo script di elaborazione php. Il primo if serve semplicemente a eseguire il caricamento social solo se il box sociale è visibile.

 $(document).ready(function() {


               $(".openSocialBox").hover(
                function(){

                if($('.socialcontainerbox').is(':visible')) {

                  $(".socialcontainerbox").hide();

                } else {

                var target = $(this).attr("data-target");
                //Ajax stuff
                 $.ajax({
                          type: "POST",
                          url: "elabora_social.php",
                          data: "target=" + target,
                          dataType: "html",
                          success: function(msg)
                          {
                            $(".socialcontainerbox").html(msg);
                            $(".socialcontainerbox").show();
                          },
                          error: function()
                          {
                            $(".socialcontainerbox").html("Errore caricamento socials");
                            $(".socialcontainerbox").show();
                          }
                        });

                }

                });

               $(".socialcontainerbox").mouseenter(
                function(){
                    $(".socialcontainerbox").show();
                });

               $(".socialcontainerbox").mouseout(
                function(){
                $(".socialcontainerbox").hide();
                });

        });//DOM

Elaborazione asincrona

Il file elabora_social.php è quello richiamato nello script javascript e permette tramite un semplice ciclo if di renderizzare diversi tipi di social a seconda della variabile “passata”.

<?php
$target = $_POST['target'];

if($target == "facebook"):

	echo "Facebook Code";

else:
if($target == "twitter"):

	echo "Twitter Code";

else:
if($target == "feedrss"):

	echo "RSS Code";

else:

	//Errore
	echo "Errore caricamento socials";

endif;
endif;
endif;
?>

Conclusioni e Download

[button link=”http://www.targetweb.it/tutorial/2015/segui-socialbox-ajax/index.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://www.targetweb.it/download/2015/segui-socialbox-ajax.zip” color=”blue” target=”blank” size=”large”]Download[/button]

Una soluzione piuttosto elegante per gestire i vostri social e rendere il vostro progetto  “snello” e veloce. Avete altre soluzioni come questa? Scrivete nei commenti e condividetela con noi!

Image Credits: Social Media di Shutterstock.