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

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
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger