Tweet to Unlock - Usa Twitter para bloquear contenido oculto en tu blog.

En TutorialZine muestran una forma de crear un sistema para desbloquear contenido mediante Twitter usando CSS y jQuery. Implementarlo puede ser un poco complicado para los que no conocen lo básico así que en esta entrada mostraré cómo implementarlo en sus blogs de manera exitosa.

El resultado será muy similar a este:

Twittea este artículo para desbloquear el enlace. Twittear.

Descargar

El tutorial:

Paso 1: Instalando jQuery y el script en la plantilla:

En "Diseño | Edición HTML" deberás buscar el siguiente código:

</head>

Arriba de éste pega el siguiente:

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
 <script src="http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/tweet-to-unlock/jquery.tweetAction.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

Si ya tienes jQuery instalado descarta la línea destacada.

Paso 2: Añadiendo los estilos:


Ahora busca la siguiente zona:

]]></b:skin>

Arriba de ésta pega el siguiente código CSS:

#container{
    width:90%;
    height:270px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    position:relative;
    background:#f6f5f5 url(http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/tweet-to-unlock/img/twitter_bird.png) no-repeat center;
    display:block;
    border-radius:10px;
        border:1px solid #d1d1d1;
}


#container p{
    font:24px/1.3 'Segoe UI Light','Segoe UI',Arial,sans-serif;
    padding: 10px 0 48px;
}

a.downloadButton{
    display:inline-block;
    width:187px;
    height:69px;
    text-indent:-99999px;
    overflow:hidden;
    background:url('http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/tweet-to-unlock/img/buttons.png') no-repeat;
    cursor:default;
    border:none;
    text-decoration:none !important;
}

a.downloadButton.active{
    background-position:left bottom;
    cursor:pointer;
}

Guarda los cambios y listo.


Paso 3: Usando el plugin:

Cada vez que quieras insertar este tipo de spoiler deberás hacerlo mediante el siguiente código en "Edición de HTML" de la entrada:

<div id="container"><p>
Twittea este artículo para desbloquear el enlace. <a href="#" id="tweetLink">Twittear.</a></p>
<a href="#" class="downloadButton">Descargar</a>
<script type="text/javascript">
$(document).ready(function(){
$('#tweetLink').tweetAction({
    text:        'TÍTULO DEL TWEET.',
        url:        'URL-DEL-TWEET',
        via:        'USERNAME',
        related:    'KEYWORD'
    },function(){
       
   

$('a.downloadButton')
        .addClass('active')
        .attr('href','URL-DEL-ARCHIVO-OCULTO');

    });
   
});
</script>
</div>

Reemplaza cada uno de los valores destacados en color por los correspondientes y listo.

Importante:

• El script no detecta el momento en el que se hace el tweet, sino cuando se cierra la ventana, por lo que el tweet puede ser burlado, aún así es una buena alternativa para obtener Tweets en las entradas.

Fuente: TutorialZine