2012-05-30 15 views
7

Ho usato il codice qui sotto per ottenere il pulsante Mi piace di Facebook. Ora le cose sono, vorrei cambiare la dimensione del pulsante Mi piace che viene reso. Ho provato l'attributo width che non funziona affatto. E ho provato a scavalcare la classe CSS che è usata per il codice qui sotto da facebook. Ma anche l'override della classe CSS non funziona altrettanto bene. Allora dimmi come posso aumentare l'altezza e la larghezza del pulsante Mi piace.cambia la dimensione del pulsante Mi piace di Facebook

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

possibile duplicato [Ridimensiona/scala facebook pulsante mi piace (altezza e larghezza)] (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

Ricorda di segnare la risposta della domanda che ha aiutato di più o quella con il maggior numero di voti - anche se non era la risposta che volevi sentire – reach4thelasers

risposta

3

pulsanti Facebook Come sono resi in un iFrame dal Javascript stato tagliato che forniscono, che iFrame è ospitato da Facebook e gli stili non può essere ignorata.

Abbastanza giustamente .... Se si fosse in grado di modificare le dimensioni o lo stile di un pulsante Mi piace, allora vedremmo ENORME, rosso acceso, lampeggiare come pulsanti su Internet - sarebbe terribile. Sono progettati per essere discreti, riconoscibili e non invadenti.

+0

Riconoscibile è anche la chiave qui. Immagina semplici collegamenti su tutta la rete che nessuno vedrebbe/sospetti che siano pulsanti simili a FB. Basta cliccare su un semplice link e bam, ti è piaciuta una pagina che non avevi intenzione di fare. –

3

Non è possibile modificare lo stile di questo tipo di pulsanti di Facebook, ma è possibile crearne di propri se si utilizza lo JavaScript OpenGraph SDK, in questo modo è possibile utilizzare un div (con informazioni personalizzate) o utilizzare un'immagine, in pratica personalizzalo come preferisci. Lo svantaggio è che non è semplice come usare i pulsanti generati da Facebook, e che è necessario un ID app e che l'utente ti concede alcune autorizzazioni, ma a parte questo puoi usarle a tuo piacimento.

15

Oppure puoi indirizzare l'iframe con CSS e ridimensionarlo utilizzando CSS3. Qualcosa di simile a questo:

#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; 
} 

Ecco un esempio http://www.tinydesign.co.uk/like/

+2

Non riesco a fare clic su questo su iPhone, non fa nulla. –

+1

Non funziona su iPhone potrebbe essere dovuto a http://ejohn.org/blog/clickjacking-iphone-attack/, non è stato trovato alcun trucco ancora –

+0

@ben Hai risolto il mio problema. Grazie – Ani

0

Creare div class per 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> 

ora aggiungere questo 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} 

Risultato:

Facebook Like Demo

Se non si dispone pulsante in centro desidera, è possibile utilizzare float insteed di margine

Problemi correlati