更改Facebook的大小Like按鈕

我使用下面的代碼來獲取Facebook的Like按鈕。現在事情是，我想改變呈現的Like按鈕的大小。我試過寬度屬性，它根本不起作用。我試圖覆蓋用於Facebook的下面的代碼的CSS類。但是重寫CSS類也不起作用。那麼告訴我如何增加Like按鈕的高度和寬度。更改Facebook的大小Like按鈕

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

來源

2012-05-30 Nagaraj .

可能重複（HTTP：//facebook.stackoverflow .com/questions/8676972/resize-scale-facebook-like-button-height-and-width） – Igy

yeah或http://stackoverflow.com/questions/3493117/custom-skin-for-facebook-like-button – Shenaniganz

請記住標記幫助最多或最具投票的問題的答案 - 即使它不是您想要聽到的答案 – reach4thelasers

Facebook的按鈕一樣在被Javascript的iFrame呈現剪斷他們提供的，該iframe由Facebook的託管和風格不能被重寫。

完全正確如此....如果您能夠更改Like Button的大小或樣式，那麼我們會看到巨大的，鮮紅的，像整個互聯網上的按鈕一樣閃爍 - 這將是可怕的。它們被設計爲謹慎，可識別且不顯眼。

來源

2012-05-30 16:46:10 reach4thelasers

可識別的也是這裏的關鍵。想象一下所有網絡上的簡單鏈接，沒有人會看到/懷疑它們是FB按鈕。你只需點擊一個簡單的鏈接和bam，你就喜歡一個你不打算的頁面。 –

您無法更改此類Facebook按鈕的樣式，但是如果您使用JavaScript OpenGraph SDK，則可以創建自己的樣式，這樣可以使用div（具有自定義信息）或使用圖像，基本上定製它，但是你想要它。缺點是不像使用Facebook生成的按鈕那麼簡單，而且你需要一個App ID，並且用戶給你一些權限，但除此之外你可以隨意使用它們。

來源

2012-05-30 16:58:12 Rafael

或者您可以使用CSS定位iframe並使用CSS3對其進行縮放。事情是這樣的：

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

下面是一個例子http://www.tinydesign.co.uk/like/

來源

2012-10-28 13:52:28 Ben

似乎無法在iPhone上點擊此按鈕，它不會執行任何操作。 –

在iPhone上不工作可能是由於http://ejohn.org/blog/clickjacking-iphone-attack/，找不到任何解決方法，然而 –

@ben你解決了我的問題。謝謝 – Ani

創建DIV類的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>

現在添加此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}

結果：

Facebook Like Demo

如果你不想在中間的按鈕，你可以使用保證金的浮動insteed

[調整/ Facebook的規模像按鈕（高度和寬度）的

來源

2016-05-23 06:04:52

更改Facebook的大小Like按鈕

回答

相關問題