¿Cómo cambiar las ventanas emergentes de Facebook?

Question

Uso y envío el plugin en la parte inferior de mi sitio. Pero, cuando se hace clic en el botón enviar, la ventana emergente se abre y no se muestra completa. ¿Cómo puedo hacer que las ventanas emergentes se abran arriba? pero no cambia como y envía posiciones de botones. Para cambiar solo las posiciones de ventana emergente.

Answer 1

Así que tiene que agregar un poco de negative margin desde la izquierda para mover el cuadro emergente del widget a la izquierda hasta que aparezca en visible area. Usted puede utilizar esto en el CSS:

.fb_edge_comment_widget { 
    margin-left: -370px !important; //use any figure appropriate to you 
} 

Usted tendrá que añadir un poco de margen inferior a los padres div donde los botones aparecen por lo que obligará a la caja móvil parece un poco a la izquierda y es completamente visible ...

Aquí hay un enlace a la pregunta similar: Facebook Like Widget on Fan page, Comment area out of visible area

Espero que esto ayude.

Answer 2

En realidad, es posible.

Nuestra solución hace más que simplemente tener el diálogo Me gusta de Facebook aparece arriba, también es totalmente asincrónico, por lo tanto no bloquea la página, crea automáticamente la entrada de URL correcta para que se use el mismo javascript en todas nuestras páginas, y Actualízate y muéstralo solo después de conocer el tamaño real, matando así 3 pájaros de un tiro.

1) incluimos en todas nuestras páginas de un div "vacío", es decir que llenó en javascript:
<div id="social-media-bar"><div id="social-media"></div></div>

PS: la razón de 2 niveles de div es porque voy a tarde extender esto a Google +, Twitter, etc

2) cargamos facebook de forma asíncrona
utilizando el cargador de LazyLoad pero cualquiera sirve y también se puede hacer síncrona si quieres: LazyLoad.js(('https:' == document.location.protocol ? 'https://' : 'http://') +
'connect.facebook.net/en_US/all.js');

3) en el facebook init, que:
- Llenar el div dedicado,
- pregunte fb para analizar las etiquetas insertadas
- Utilizamos un tiempo de espera después del análisis para asegurarse de pantalla ha sido renovado y por lo tanto Ancho y altura son correctos.

window.fbAsyncInit = function() { 
     var d = document,n,nn,url,url_ref,i;` 

     // due to bug in facebook need to delay the actual access to data after parse 
     function FBUpdateSize(){ 
      var h,str; 
      // show facebook entry using actual element size 
      h = nn.firstChild.clientHeight; 
      str = h+'px'; 
      nn.style.height= str; 
      n.style.height= str; 
      n.style.overflow='visible'; 
     } 

     FB.init({ channelUrl : 'http://www.plixo.com.sg/channel.html', 
        //appId : '228760567272221', 
        status  : false, 
        xfbml  : false}); 

     // create facebook entries in the DOM 
     n = d.getElementById('social-media'); 
     url = d.URL; 
     i = url.lastIndexOf('/')+1; 
     url_ref = url.slice(i,url.indexOf('.',i)); 
     nn = d.createElement('fb-like'); 
     nn.innerHTML = '<div id="fb_like_bottom"><fb:like href="' + url + '" ref="' + url_ref + '" send="false" layout="standard" width="360px" show_faces="false"></fb:like></div>'; 
     nn = n.appendChild(nn); 

     // call facebook to fill DOM entries 
     // use a timeout in callback to ensure browser has refreshed internal clientHeight 
     FB.XFBML.parse(nn,function(){setTimeout(FBUpdateSize,50)}); 
    };` 

4) y sólo 3 estilos css dedicados para reposicionar el diálogo:
#social-media{position:relative;display:block;width:auto;z-index:200;overflow:hidden;height:0;background-color:#f2f2f2;border:1px solid #bdc7d8}
#fb_like_bottom{padding:4px;position:absolute}
#fb_like_bottom .fb_iframe_widget_lift{bottom:0;background-color:#f2f2f2;border:1px solid #bdc7d8!important;margin:-5px;padding:4px}

Se puede ver un ejemplo en cualquiera de nuestras páginas web, ex, http://www.plixo.com.sg/large-format-printing-services.html.

dude en volver a usar/modificar etc, se acaba de apreciar si se vincula a cualquiera de nuestra página ;-)