Botón Me gusta de Facebook Alinear texto en el cuadro flotante a la derecha

Question

Estoy usando el botón de me gusta de Facebook en mi sitio, a través de un iframe.

Ahora debe especificar el ancho del iframe. Debido a varios idiomas del botón Me gusta, esto significa que tengo que establecer el ancho de al menos 70 píxeles.

Ahora quiero que el botón Me gusta se alinee en el extremo derecho de mi sitio, ahora puedo hacerlo agregando "text-align: right" en el estilo css del iframe. El iframe se muestra a la derecha, pero no a la derecha.

Esto ocurre debido al ancho del iframe, es 70px y, por ejemplo, el botón tipo inglés es solo 55px.

Ahora lo que quiero: alinear el contenido real del iframe a la derecha del iframe real.

http://pastehtml.com/view/1dnwtbh.html

Aquí he construir un ejemplo. Está alineado a la derecha de la compilación diviva, pero como el iframe es más grande que el botón real, no está perfectamente alineado con la derecha. Quiero que el botón Me gusta esté alineado a la derecha en el iframe.

Espero que ustedes puedan ayudar

Answer 1

Las reglas de CSS solo se aplican al elemento iframe, no al contenido del iframe, porque se trata de otra página web completamente.

Usted 'podría' ser capaz de utilizar JavaScript para agregar una hoja de estilos CSS a la página iframe con:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink); 

Pero no estoy seguro de si eso va a trabajar en todos los navegadores. Su mejor opción es llamar a la página con AJAX. esa manera se puede modificar el contenido de la página antes de mostrar que

Un ejemplo de función jQuery AJAX podría tener este aspecto:

$.ajax({ 
     type: "GET", 
     url: "facebookURL", 
     dataType: "html", 
     success: function(html) { 
      processData(html); 

     } 
    }); 

function processData(fbData) { 
    $('#injectFBLikeHere').html(function() { 
     return $(fbData).find('#LikePluginPagelet').html(); 
    }); 
} 

Nota No he probar esto, sólo se utilizan como punto de partida punto o una guía

Answer 2

como esta? http://d.pr/Cbkd

Si es así, aquí es lo que hice a través de Firebug

.connect_widget_number_cloud, 
.connect_widget_connect_button {float: right !important;} 

También ha cambiado el ancho de marco flotante a algo así como 60 píxeles.

Answer 3

La modificación del contenido de un iFrame es normalmente imposible por los modernos estándares web: http://en.wikipedia.org/wiki/Cross-site_scripting

Porque no se puede determinar el ancho del botón en el interior del marco flotante, no se puede cambiar el tamaño del marco flotante a la anchura mínima para estar anidado a la derecha.

La única forma en que puedo pensar es en cambiar el tamaño del iframe, pero como dijiste, necesitas admitir varios idiomas, lo cual supongo si usaste javascript para detectar el idioma del usuario (JavaScript for detecting browser language preference). Es posible que pueda ajustar manualmente el ancho del marco del botón similar según el idioma. No puedo pensar en ninguna forma automatizada para hacer esto, debido a la creación de scripts entre sitios.

Answer 4

Esto es lo que debe hacer.

Insertar un DIV llamado #like antes de la etiqueta, a continuación, poner el código de Facebook en el interior, como se muestra a continuación

<div id="like"> 

    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
    <fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like> 
</div> 
<!-- End Like 

Ahora crear el CSS #like que ha aplicado a la DIV anterior, como se muestra a continuación y ajustar según sea necesario .

/* CSS para Facebook como */

#like { 
     position: fixed; 
     top: 300px; 
     right: -20px; 
     float: right; 
     height: auto; 
     width: 130px; 
} 

Nota: eliminar cualquier CSS anterior que haya aplicado a la i-marco para que no entre en conflicto con éste.

Answer 5

Tal vez this funcione para usted: cuando genere el código aquí, establezca el ancho en 0.