2012-05-30 22 views
7

Utilicé el siguiente código para obtener el botón Me gusta de Facebook. Ahora las cosas son, me gustaría cambiar el tamaño del botón Me gusta que se representa. Probé el atributo de ancho que no funciona en absoluto. Y traté de anular la clase CSS que Facebook usa para el código siguiente. Pero anular la clase CSS tampoco funciona. Así que dime cómo puedo aumentar el alto y el ancho del botón Me gusta.cambiar el tamaño del botón Me gusta de Facebook

<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div> 
+1

posible duplicado de [/ escala de Facebook como el botón (altura y anchura) Redimensionar] (http: //facebook.stackoverflow .com/questions/8676972/resize-scale-facebook-like-button-height-and-width) – Igy

+0

Sí o http://stackoverflow.com/questions/3493117/custom-skin-for-facebook-like-button – Shenaniganz

+0

Recuerde marcar la respuesta de la pregunta que más ayudó o la que recibió más votos, incluso si no fue la respuesta que deseaba escuchar – reach4thelasers

Respuesta

3

Facebook como botones se prestan en un iFrame por el Javascript cortado con tijeras que proporcionan, que iFrame está alojado en Facebook y los estilos no se puede anular.

Con toda la razón, así que ... Si pudieras cambiar el tamaño o el estilo de un Botón me gusta, entonces veríamos ENORMES, de color rojo brillante, parpadeando como botones en todo internet, eso sería horrible. Están diseñados para ser discretos, reconocibles y no molestos.

+0

reconocible también es la clave aquí. Imagine enlaces simples en toda la red que nadie vería/sospecharía que son botones FB. Simplemente haga clic en un enlace simple y bam, le ha gustado una página que no pretendía. –

3

No puede cambiar el estilo de este tipo de botones de Facebook, pero puede crear los suyos si usa el JavaScript OpenGraph SDK, de esta manera puede usar un div (con información personalizada) o usar una imagen, básicamente personalícelo como lo desee. La desventaja es que no es tan simple como usar los botones generados en Facebook, y que usted necesita un ID de la aplicación y que el usuario le da algunos permisos, pero aparte de eso, puede usarlos como lo desee.

15

O puede orientar el iframe con CSS y escalarlo utilizando CSS3. Algo como esto:

#fbiframe 
{ 
transform: scale(1.5); 
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
-moz-transform: scale(1.5); 
transform-origin: top left; 
-ms-transform-origin: top left; 
-webkit-transform-origin: top left; 
-moz-transform-origin: top left; 
-webkit-transform-origin: top left; 
} 

He aquí un ejemplo http://www.tinydesign.co.uk/like/

+2

Parece que no puede hacer clic en iPhone, no hace nada. –

+1

No funciona en iPhone puede ser debido a http://ejohn.org/blog/clickjacking-iphone-attack/, no pudo encontrar ninguna solución todavía –

+0

@ben Usted ha resuelto mi problema. Gracias – Ani

0

Crear div class para iframe

<div class='like-btn'> 
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 
    </div> 

ahora añadir este CSS

.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4} 

Resultado:

Facebook Like Demo

Si no botón en el centro desea, puede utilizar insteed flotador del margen

Cuestiones relacionadas