Cómo desbloquear contenido utilizando las redes sociales

Hace unos días, descargándome una fuente gratuita para utilizar en un diseño, me topé con un mensaje que me indicaba: “¡El contenido está bloqueado! Dame un like para desbloquear”. Así que nada, tuve que darle like para que se mostrase el descargable y poder utilizar la fuente. El caso es que me llamó la atención, no ya la práctica en sí, que me parece un poco rastrera y ruín, sino el modo en el que está implementado.

Decidí investigar el modo con el que había sido creado, y vi que había incluido un plugin de jQuery. Sin más dilación, me puse a hacer experimentos en local con este plugin para bloquear contenidos. Lo mejor de todo, es que he creado un ejemplo en el que utilizo dicho plugin, el cual, para desbloquear contenido, debes compartir la información en redes sociales, ya no solo darle un Like un Facebook. Os cuento cómo lo hice...

También utilicé un plugin de jQuery para añadir los botones de redes sociales como los de compartir y seguir de Twitter, el like de Facebook, el de Google Plus o el de compartir de LinkedIn. El objeto es ocultar el contenido hasta que el usuario haga clic en alguno de estos botones, y crear una cookie para mostrar el contenido. Si el usuario cuenta con dicha cookie en su navegador, el contenido se mostrará. ¿Empezamos?

Antes que nada, debes descargar este plugin de jQuery llamado Social Locker, el cual hemos extraido de la web phpgang.com.

Incluímos jQuery y el plugin

<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/social-locker.js"></script>

Código jQuery para inicializar Social Locker

<script type="text/javascript">
    jQuery.noConflict();                    
    jQuery(document).ready(function ($) {
        $("#lock-my-div").sociallocker({
            text: {
                header: "El contenido esta bloqueado", // replace content with this heading
                message: "Haz clic en el boton like para desbloquearlo" // hidden content message
            },

            theme: "starter", // Theme

            locker: {
                close: false,
                timer: 0
            },

            buttons: {   // Buttons you want to show on box
                order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"] 
            },

            facebook: {  
                appId: "2068418453432508",
                like: {
                    title: "Like us",
                    url: "https://www.facebook.com/programacionencastellano" // link to like in Facebook button
                }
            },

            twitter: {
                tweet: {
                    title: "Tweet", 
                    text: "Programacion en castellano.", // tweet text
                    url: "http://www.programacion.net/" //tweet link
                },
                follow: {
                    title: "Follow us", 
                    url: "http://twitter.com/noprog" // Twitter profile to follow 
                }
            },

            google: {                                
                plus: {
                    title: "Plus +1",
                    url: "http://www.programacion.net/" // Google plus link for +1
                }
            },

            linkedin: {
                url: "http://www.programacion.net/",      // LinkedIn url to share 
                share: {
                    title: "Share"
                }
            }
        });
    });
</script>

En el anterior jQuery, damos nuestros enlaces al usuario para darle like o compartir e incializar el plugin Social Locker. También hemos definido que el contenido del div con id lock-my-div será el que se muestre una vez hecho clic en algún botón.

CSS para personalizar el ejemplo

<style type="text/css">

    .jo-sociallocker.jo-sociallocker-msie {
        background-color: hsl(200, 65%, 91%);
        border-color: hsl(190, 65%, 84%);
        color: hsl(200, 50%, 45%);
    }
    .jo-sociallocker {
        background-color: hsl(50, 81%, 94%);
        border: 1px solid hsl(39, 83%, 91%);
        -moz-border-radius: 4px 4px 4px 4px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
        margin-bottom: 20px;
        padding: 8px 35px 8px 14px;
        -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5);
        width:60%;
        margin-left: auto;
        margin-right: auto;
    }
    .jo-sociallocker-button{
        float: left;
        margin-left: 10px;
    }
    .jo-sociallocker-after-text{
        margin-bottom: 20px;
    }
    .jo-sociallocker-buttons{
        height:35px;
    }
    .jo-sociallocker-strong{
        font-size: 30px;
        color: hsl(0, 0%, 0%);
    }
</style>

Fuente: phpgang.com