css - zona - personalizar widgets wordpress

Facebook como widget en la página de fans, área de comentarios fuera del área visible

Question

Cuando se usa el widget "me gusta" o "enviar" en una Página de admiradores (no importa si usa la etiqueta iframe o fbml), la superposición para comentar se posiciona siempre a la derecha. ver http://twitpic.com/4q7ggi por ejemplo.

No puedo encontrar la forma de que el widget respete el límite de 520 píxeles de la pestaña de Facebook. ver http://www.facebook.com/pages/Ludwig-Test/127771653944246?sk=app_101150316644842 para un ejemplo. Alguien una idea de cómo resolver esto?

TIA Rufinus

Answer 1

No es una gran respuesta, pero la única opción que he encontrado es ajustar el widget en una Div absolutamente posicionada para mantenerlo en el lado izquierdo de la ventana

Answer 2

Intenta agregar esto a tu css:

.fb_edge_comment_widget {
    margin-left: -350px;
}

Esto moverá el cuadro de comentarios hacia la izquierda, pero también se moverá la pequeña flecha que apunta al botón (que podría tratar de cubrir con otro elemento). Solo funcionará si está utilizando XFBML, no un iframe.

Aquí hay un ejemplo .

Answer 3

Si está utilizando la implementación XFBML del botón Me gusta de Facebook , puede usar CSS para reubicar el menú "flotante" con respecto a su posición original cerca del botón Enviar :

El ejemplo anterior usando jsFiddle y este CSS:

.fb_edge_comment_widget {
    margin-left: -343px;
}

Dado que el contenido del "menú desplegable" se encuentra dentro de un iframe , no podrá aplicarle ningún CSS, lo que significa que no es posible mover el indicador triangular al lado derecho del "menú desplegable".

Los navegadores web han reforzado la seguridad en las secuencias de comandos de fotogramas cruzados debido a la suplantación de identidad y otros hacks, por lo que los iframes se tratan como páginas HTML separadas con sus propios CSS y JavaScript.

Para cualquier estilo avanzado de CSS, tendría que insertar el iframe del widget de Facebook usando DOM Scripting ... y aun así puede no funcionar en todos los navegadores.

Answer 4

Tuve que mover la pequeña flecha hacia abajo, y así fue como lo hice.

1) Mueva su ventana emergente a la posición deseada. Use la declaración! Importante para sobrescribir estilos predeterminados.

.fb_edge_comment_widget {
    top: -224px !important; left: -246px !important; height: 191px;
    background: url(../img/arrow-down.gif) 0 100% no-repeat
}

Este estilo también contiene una nueva imagen de flecha que reemplaza la línea inferior de la ventana emergente. Contiene mi propia flecha inferior nueva, que es azul (# 283E6C) por defecto y gris por dentro (# F2F2F2). Podemos usar la height para ajustar la posición vertical y mover la imagen de fondo a la parte inferior.

La imagen se verá así: .

2) Aplicar overflow: hidden en el tramo que envuelve el iframe, podremos cortar partes del iframe aplicando margin-top en el paso 3 y reemplazarlo por el nuestro.

.fb_edge_comment_widget > span {
    height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}

Estoy usando borde superior para crear mi propio borde superior, ya que en el paso 3 estamos cortando el borde y la flecha predeterminados.

3) Mueva el iframe un poco hacia arriba para cortar el borde superior y la flecha.

    .fb_edge_comment_widget > span > iframe {
        margin-top: -7px;
    }   

El resultado se ve así en mi caso:

Answer 5

Para solucionarlo, le recomiendo que coloque el widget de Facebook en el lado izquierdo de su página. Cualquier otra solución podría funcionar durante un cierto período de tiempo, pero en el futuro fallará. La razón es que Facebook actualiza su widget con frecuencia.