√ Nuevo Popup like box flotante de Facebook para Blogger

Nuevo Popup like box flotante de Facebook para Blogger

mayo 30, 2015

Como sabemos que facebook es una de las redes sociales mas influyentes para tus suscriptores de tu blogs a través de su pagina de facebook se comunica con las nuevas actualizaciones de tu blogs.

Es entonces facebook lanza una nueva actualización Graph API v2.3 , Ahora el plugin Like Box está en desuso. Utilice la nueva página Plugin en su lugar. La Página Plugin permite incrustar una sencilla fuente de contenido de una página en sus sitios web.

Ahora Facebook dice si no actualiza manualmente a la página Plugin, su aplicación plug-in como la caja se actualizara automáticamente al Plugin Página en esta fecha de 23 de junio 2015 .

Facebook Página Plugin V2.3 : Le permite fácilmente incrustar y promover cualquier página de Facebook en su sitio web. Al igual que en Facebook, los usuarios pueden recibir y compartir la página sin tener que salir de su sitio. Esta nueva actualización es la definitiva sustitución a la caja de like facebook .

Usted lo puede hacer uno para su pagina :

CREAR

Para crear esta nueva pagina plugin es lo mismo que lo anterior caja like box . Haci que no te preocupes .

Nuevo Popup like box (facebook- pagina plugin ) : Como facebook a actualizado de la caja de like box por pagina plugin . Te presento el nuevo Popup like box flotante :

PERO ANTES VAZ HABER EL DEMO EN VIVO :

DEMO

Pero antes tienes que reemplazar tambien por el nuevo JavaScript SDK de facebook v2.3 ..

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '841812812528433',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/es_LA/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

tienes que ponerlo debajo de <body> si no lo tienes olvidate no va a salir el popup completo.

1.- Copia estos códigos del popup facebook

<style type='text/css'>

#PopFace {

position : absolute;

display : block;

top : 0;

left : 0;

width : 100%;

height : 100%;

position : fixed;

background-color : rgba(0, 0, 0, 0.3);

margin : 0;

overflow : hidden;

z-index : 999999;

}

#PopBook {

background-color : #ecf0f1;

overflow : hidden;

z-index : 999999;

}

.PopBook {

width : 340px;

height : 300px;

position : fixed;

top : 45%;

left : 50%;

margin-top : -200px;

margin-left : -200px;

border : #3b5998 solid 10px;

padding : 20px;

z-index : 999999;

border-radius : 4px;

}

#PopTitle {

background : #3b5998;

color : #fff;

font-size : 18px !important ;

font-weight : 675;

width : 390px;

margin : 0 -27px 10px -27px;

padding : 10px;

line-height : 25px;

text-align : center;

float : left;

}

.anarchyta {

width : 330px;

height : 200px;

position : relative;

background : #3b5998;

padding : 0 10px 15px 0;

margin-top : 60px;

border-radius : 4px;

overflow : hidden;

}

.anarchyta, .anarchyta:before, .anarchyta:after {

background : transparent;

border : #3b5998 solid 1px;

}

.anarchyta:before, .anarchyta:after {

position : absolute;

content : "";

bottom : -3px;

left : 10px;

right : 10px;

height : 1px;

border-top : none;

}

.anarchyta:after {

left : 10px;

right : 10px;

bottom : -5px;

box-shadow : 0 0 2px #3b5998;

}

.close {

background : #3b5998;

padding : 5px 5px 10px 5px;

font-size : 14px;

font-weight:bold;

color : #ecf0f1;

text-decoration : none;

border-radius : 4px 4px 0 0;

cursor:pointer;

}

</style>



<div id='PopFace'>

<div class='PopBook' id='PopBook'>
<h3 id='PopTitle'>Articulos y Videos via Facebook</h3>
<div class='anarchyta'>

<center><div class="fb-page" data-href="https://www.facebook.com/danydanielrt" data-width="340" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/danydanielrt"><a href="https://www.facebook.com/danydanielrt">Danydanielrt</a></blockquote></div></div></center>


</div><br/>

<a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CERRAR</a>

</div>

</div>

Lo que usted va hacer es cambiar el nombre de mi pagina de facebook por la vuestra.

2.- Entra a su blogs de Blogger y ve a diseño y haga clic en AÑADIR UN GADGET y luego seleccione :