Botón desplegable de envío de Facebook

Question

Estoy trabajando en el botón Enviar FB e implementándolo en un sitio nuevo. El problema es que el menú desplegable que muestra FB al hacer clic en el botón Enviar está debajo del botón Enviar. ¿Puede alguien decirme cómo podemos configurar el "menú emergente" (cuadro de diálogo que aparece al hacer clic en el botón Enviar) que se puede personalizar para que se muestre sobre el botón Enviar y no debajo de él.

¡Gracias de antemano!

Answer 1

Este complemento de Facebook no le permite especificar un archivo css personalizado como algunos de los más antiguos, por lo que será bastante difícil cambiar el aspecto además de jugar con el estilo/tamaño de iFrame. Sus cambios de css no se aplicarán al contenido de iframe que Facebook presenta porque está alojado en un sitio diferente, por lo que se aplicarán restricciones entre dominios.

Answer 2

Yo también quería agregar este botón a la derecha de la página, tuve problemas al mover el iframe para que estuviera visible, así que decidí abrir el botón de enviar en una ventana de diálogo. http://developers.facebook.com/blog/post/514/

Deberá utilizar el JS SDK para hacer esto, y también proporcionar un botón o un enlace que activará el diálogo de envío para abrir. Aquí es un código de ejemplo para hacer una mirada de enlace como un botón de enviar

HTML

<a class="fb-send-button"><i></i><span>Send</span></a> 

CSS

.fb-send-button { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
    cursor: pointer; 
    color: #3b5998; 
    -moz-outline-style: none; 
    text-decoration: none; 
    background: #eceef5; 
    border: 1px solid #cad4e7; 
    display: inline-block; 
    padding: 4px 5px; 
    white-space: nowrap; 
    padding: 2px 5px; 
    font-family: 'trebuchet ms', sans-serif; 
    font-size: 11px; 
} 
.fb-send-button:hover { 
    border-color: #9dacce; 
    text-decoration: none; 
    color: #3b5998; 
} 
.fb-send-button span { 
    line-height: 14px; 
    line-height: 13px; 
} 
.fb-send-button i, .fb-send-button img { 
    float: left; 
    height: 14px; 
    margin-right: 3px; 
    width: 14px; 
} 
.fb-send-button i { 
    background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png); 
    background-position: -1px -47px; 
} 

Javascript

FB.ui({ 
    method: 'send', 
    name: 'Facebook Dialogs', 
    link: 'https://developers.facebook.com/docs/reference/dialogs/' 
}); 

Deberá tener ya cargado el SDK de Javascript en su página, y deberá colocar el JS anterior en la etiqueta de anclaje en un atributo de clic, o preferiblemente agregarlo usando su propio Javascript.

Answer 3

que tenían el mismo problema y se usa lo siguiente para resolver este problema:

.fb_edge_widget_with_comment span.fb_edge_comment_widget { 
    left: -290px !important; 
} 

tratar de jugar con izquierda, arriba, derecha, los valores inferiores a medida que quieren que sea colocado.

Answer 4

La mejor solución que he probado hasta ahora es la siguiente:

.fb_edge_widget_with_comment span.fb_edge_comment_widget { 
    left: -45px !important; 
} 

Esta solución temporal mueve el cuadro emergente para una posición algo centrado bajo el botón Enviar, lo que hace que sea accesible en el móvil.

Ésta es la forma en que se ve como en un iPhone (nótese que todavía es demasiado un poco demasiado ancha para móvil):
http://s16.postimage.org/3xeep2uo5/foto_1.png

La misma página en un navegador de PC:
http://s16.postimage.org/nukby1dj9/xotc_browser.png

Aviso del La flecha pequeña en la parte superior de la ventana emergente ya no está alineada con el botón Enviar (debido a mi CSS). Observe cómo cambia de posición para estar en el lado izquierdo o derecho de la ventana emergente, dependiendo de dónde se ve (navegador móvil o de PC).

(lo probé en un Lumina 920 también, pero dio el mismo problema que iPhone)