css - personalizado - Mover/posicionar el botón me gusta de Facebook Comentar emergente

no aparece el boton me gusta en mi pagina de facebook

Question

Necesito mover el cuadro de comentarios emergente asociado con un botón de me gusta de Facebook. Entiendo que esta pregunta se ha formulado y resuelto miles de veces.

Previamente preguntado: Facebook como Widget en la página de fans, área de comentarios fuera del área visible

Captura de pantalla del mismo problema que el mío: http://twitpic.com/4q7ggi

La diferencia aquí es que creo que Facebook ha cambiado la implementación en los últimos meses, de modo que tanto el Botón Me gusta como el elemento emergente de comentarios están contenidos en un solo iframe. Esperaría que lo hicieran probablemente porque sería la única manera confiable de protegerse contra sitios web maliciosos que se aprovechan de los usuarios por el contenido que les gusta automáticamente. Sin embargo, significa que no puedo aplicar CSS para cambiar la posición del cuadro de comentarios.

Estoy utilizando la implementación de botón similar a HTML5, que es la misma que se utiliza en la referencia oficial de Facebook para botones similares http://developers.facebook.com/docs/reference/plugins/like/ . Para ver un ejemplo, haga clic en el botón Me gusta en la página de referencia de Facebook nuevamente y luego inspeccione el elemento emergente de comentario. Verá que tanto el botón como el popup de comentarios están contenidos dentro del mismo iframe.

Answer 1

esto funciona para mí, aquí hay un ejemplo de violín . Todo lo que hago es una modificación simple con CSS:

.fb_edge_widget_with_comment span.fb_send_button_form_widget {
  top:100px!important;  /*for example*/
  left:100px!important;        /*for example*/
}

Espero que esto ayude

Answer 2

Revisé el ejemplo de Facebook y estoy viendo este cuadro de comentarios: http://screencast.com/t/fRQyUzqek

Inspeccioné y apliqué estilos a esta clase:

.-cx-PRIVATE-pluginCommentFlyout__full {
    top: 100px!important;
    left: 100px!important;
}

Y eso movió el cuadro de comentarios. Sin embargo, hice esto directamente en el inspector, por lo que cuando lo está utilizando en su CSS, puede que necesite incluir también los selectores principales para ser realmente específico.

¡Espero que esto ayude!

Answer 3

Esto funcionó para mí en el pasado.

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe {
    /* Now you can apply css here */
    bottom:0!important;
}

Answer 4

No puede cambiar el CSS del cuadro de comentarios dentro del iframe porque es una violación de la misma política de origen :

La política permite que los scripts que se ejecutan en páginas que se originan en el mismo sitio accedan a los métodos y propiedades de los demás sin restricciones específicas, pero impide el acceso a la mayoría de los métodos y propiedades en las páginas de diferentes sitios.

El mensaje de enviar a la casilla se puede cambiar con CSS porque no reside en el iframe.