16-06-2014, 01:15 PM
Si quieres bloquear un contenido para obligar al usuario a compartir tu web en las redes sociales como facebook, twitter o google plus, he hecho un ejemplo muy sencillo para realizar esta tarea y puedas usarla en cualquier web.
Por un lado tienes el CSS (dentro de <head>):
El código HTML y JS necesario (dentro de <body>):
[social][/social]
Esto lo puedes utilizar en landing page, tu plantilla de blogger o allá donde quieras poner el HTML bloqueador de contenido.
Bloquea el contenido que tengas escrito dentro de esta capa div:
Por un lado tienes el CSS (dentro de <head>):
Código:
<style>
#gatewaydiv
{
background-image:url("");
background-repeat:no-repeat;
width:500px;
height:100px;
padding:10px;
position:absolute;
display:none;
background-color:#0e0f0f;
border:solid 4px gray;
text-align:center;
font-family:arial;
font-weight:bold;
opacity:0.9;
padding:50px;
}
#gatewaydiv h1
{
font-size:35px;
color:#cc0000;
}
#gatewayMessage
{
font-size:18px;
}
#gatewayDimmer
{
background-color:#000000;
opacity:0.9;
filter: alpha(opacity = 50);
display:none;
position:absolute;
top:0;
}
</style>El código HTML y JS necesario (dentro de <body>):
[social]
Código:
<div id='gatewayDimmer'>
</div>
<div id='gatewaydiv'>
<div><a href="http://twitter.com/share" class="twitter-share-button" data-text="" data-url="" data-count="horizontal" data-lang="es">Tweet</a></div>
<div><g:plusone size="medium" annotation="inline" callback="sociallocker_plusone" href=""></g:plusone></div>
<div><fb:like id="fbLikeButton" href="" show_faces="false" width="450"></fb:like></div>
<p><font color="#ffffff">Comparta para desbloquear el contenido.</font></p>
<script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
var Delay = 2;//Seconds after them clicking the link, the gateway vanishes.
var sociallocker_use = true;
function setupgateway()
{
var Left = $(window).width() /2;
Left = Left - $('#gatewaydiv').width()/2;
var Top = $(window).height()/2;
Top = Top - $('#gatewaydiv').height()/20;
$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
}
function removegateway()
{
$('#gatewaydiv').css('display', 'none');
$('#gatewayDimmer').css('display','none');
}
function sociallocker_plusone(plusone) {
console.log("test");
if (plusone.state == "on") {
setTimeout('removegateway()', Delay*1000);
}
}
FB.init();
jQuery(document).ready(function () {
setupgateway();
FB.Event.subscribe("edge.create", function (href, widget) {
setTimeout('removegateway()', Delay*1000);
});
twttr.ready(function (twttr) {
twttr.events.bind("tweet", function (event) {
setTimeout('removegateway()', Delay*1000);
});
});
});
</script>
</div>Esto lo puedes utilizar en landing page, tu plantilla de blogger o allá donde quieras poner el HTML bloqueador de contenido.
Bloquea el contenido que tengas escrito dentro de esta capa div:
Código:
<div id='gatewayDimmer'>
</div>
.