CONTENIDO SOCIAL BLOQUEADO

Cuando nos referimos a contenido social bloqueado significa que crearemos un contenido pueden ser imagenes videos etc.. este solo sera visible cuando el usuario le de en compartir en twitter , un me gusta o un +1

AQUI PUEDES VER UNA DEMO

Al implementar este contenido social bloqueado tendras grandes beneficios:

• Contenido viral
• Alto impacto en las redes sociales
• Es gratis

CODIGO

 con ayuda de las teclas "ctrl+f " busca </head>  arriba de este  coloca el siguiente codigo


<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>

Ahora es cuando lo vamos a insertar en nuestro blog, lo recomendable es que lo insertemos en alguna entrada, pero lo puedes insertar en cualquier parte de tu blog.


<article id="default-usage"> <div class="to-lock" style="display: none;"> <!--Inicia el contenido oculta (Tambien puedes usar HTML)--> <div style="text-align: center; margin-bottom: 20px;"> <img src="Añade_Imagen_Aqui" alt="" style="margin: auto;" /> </div> <div style="text-align: justify"> Añade el texto oculto aqui, recuerda que tambien puedes usar HTML </div> <!--Termina el contenido oculto--> </article> </div> <script type="text/javascript" src="http://mybloggerlab.com/Scripts/lock.js"></script> <script> jQuery(document).ready(function ($) { $("#default-usage .to-lock").socialLock({ text: { header: "Comparte esto, para desbloquearlo", message: "Este es el contenido social bloqueado, para verlo da clic en cualquier botón de abajo." }, style: "ui-social-locker-secrets", buttons: { order: ["twitter", "facebook", "google"] }, // Opciones de Twitter twitter: { url:<span style="background-color: yellow;"> "TU-USUARIO-DE-TWITTER",</SPAN> text: <span style="background-color: yellow;">"Texto que quieres que aparezca a la hora de twittear el contenido oculto"</SPAN> }, // Opciones de Facebook facebook: { url:<span style="background-color: yellow;"> "TU-PAGINA-DE-FACEBOOK",</SPAN> appId: <span style="background-color: yellow;">"418044881593120"</SPAN> }, google: { url:<span style="background-color: yellow;"> "TU-PAGINA-DE-GOOGLE-PLUS"</SPAN> } }); });;;; </script>

Configuracion

Para Twitter: Remplaza TU-USUARIO-DE-TWITTER  por tu usuario de twitter.
Para Facebook:  Remplaza TU-PAGINA-DE-FACEBOOK  por tu pagina de facebook.
También debes remplazar “418044881593120″ por la ID de de tu aplicación de facebook.
Para Google plus: Remplaza TU-PAGINA-DE-GOOGLE-PLUS qpor tu pagina de google plus.
Remplaza: Añade_Imagen_Aqui por la imagen que quieres ocultar.
Remplaza: Añade el texto oculto aqui por el texto que quieres coultar, recuerda que tambien puedes agregar elementos HTML, tales como gadgets o scripts.

Con todo esto echo ya solo basta con guardar y ver el resultado final.

TIENES ALGUNA DUDA NO OLVIDES COMENTAR LA ENTRADA CON GUSTO TE AYUDARE

Category: REDES SOCIALES