堆棧內存溢出
  簡體   English   中英

如何讓Facebook Like按鈕的寬度自動調整大小？

[英]How can I make the Facebook Like button's width automatically resize?

 原文  2010-12-03 17:36:40  4   8    javascript/ css/ facebook/ facebook-like/ facebook-javascript-sdk

問題描述

我正在實現Facebook Like Button ，但我遇到了寬度問題。 我正在使用JavaScript SDK實現，而不是直接iframe。

根據文檔，默認寬度為450 。 那沒關系，我明白寬度可以通過<fb:like>標簽上的width屬性來改變。 但是，我的問題是我真的無法指定固定寬度。 由於按鈕的性質，寬度在所有狀態下都不是恆定的。 例如，如果沒有人喜歡該頁面，它會顯示“成為您喜歡的第一個朋友”; 如果有人，它顯示“XXX這樣的人。成為你的第一個朋友”; 如果你喜歡它，它會顯示“你喜歡這個” 或 “你和XXX這樣的人”。 換句話說，按鈕有許多狀態，其中沒有一個共享恆定的寬度。

如果不是因為我想顯示浮動在<div>右側的按鈕，這不會是一個大問題。 為了更清楚，這就是我正在做的事情： 

<div id="wrapper">
    <span class="fb-like"><fb:like show_faces="false" width="450" font="lucida grande""></fb:like></span>
    ...
</div>
<style type="text/css">
.fblike {
    display: inline-block;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
}
#wrapper {
    position: relative;
}
</style>

這工作正常，但問題是iframe現在具有450像素的恆定寬度 。 由於iframe是左對齊的，因此當文本較短時，右側會有額外的空間。 我嘗試過text-align: right各種應用程序text-align: right沒有用。 而這個問題更加復雜的是，這實際上只是FB SDK添加的iframe的花哨標記，所以我無力用CSS或JavaScript更改其任何內容。

我需要一個解決方案，它將（a）保持按鈕區域的寬度動態（即，它根據內容而改變）; 或（b）右鍵對齊按鈕區域中的所有內容。

感謝任何人都可以給我的幫助！

8 個解決方案

解決方案1
 12  2011-01-28 10:59:16

#fblike iframe {
    width: 95px !important;
}

#fblike .fb_edge_comment_widget iframe {
    width: 330px !important;
}

和 

<div id="fblike"><fb:like show-faces="false" layout="button_count"></fb:like></div>

這樣，注釋和類似按鈕iframe都是固定寬度。 沒有搞笑的效果。 希望能幫助到你。

解決方案2
 5  2012-04-08 13:53:56

如果您使用Like按鈕的XFBML版本以及Facebook Javascript SDK，您可以訂閱'xfbml.render'事件，並且一旦該事件觸發，您可以將like按鈕iframe的寬度設置為某個小值。 （我使用50px。）iframe將根據需要自動調整其寬度，以便根據您的配置顯示按鈕和類似計數以及其他任何元素。

https://developers.facebook.com/docs/reference/javascript/

此解決方案的最大障礙是您需要Facebook App ID。 您可以在此處創建應用程序來獲取應用程序ID： https ： //developers.facebook.com/apps/

解決方案3
 5  2011-10-12 18:35:09

正如大家現在所知道的那樣，沒有簡單的方法可以做到這一點。 不過，我確實想出了各種各樣的程序設計。 當我說kludge時，我真的是這個意思！ 我不認為這是准備黃金時間，但有人可能喜歡修補這個概念，並嘗試找到可行的東西。

我們的想法是，雖然您無法讀取iframe的內容寬度，但您可以遍歷iframe本身的一系列寬度，直到找到一個幾乎不會阻止文本內部包裝的寬度。 此時，文本必須觸及iframe的右側。 換句話說，我們希望將iframe的寬度設置為比導致文本換行的寬度寬1px。

原則上檢測文本是否包裝很容易 - 設置iframe寬度，等待FB代碼調整內容，然后讀取高度。 如果一切都適合一條線，高度應約為25px。 更重要的是文本已經包裝。

困難在於“等待FB代碼調整內容”部分。 我覺得必須有一些強制“重繪”iframe，但到目前為止我還沒有找到它。 調用FB.XFBML.parse（）是顯而易見的，但它似乎不起作用。 這是我卡住的部分。 我通過設置src屬性來強制iframe重新加載，這樣可以完成工作但速度非常可怕。 在這一點上，它只是作為“概念證明”。 幾乎同樣好的方法是知道什么時候重繪完成; 我覺得這也應該是可能的，但在我發現任何簡單的事情之前，我的大腦陷入困境。

無論如何，這里有一些測試代碼，如果你想嘗試一下。 按鈕處於適當位置需要永遠，但它至少可以工作。 我在加載過程中保留了所有可見內容，因此您可以看到它正在做什么，在真實頁面上最好保持隱藏狀態直到一切准備就緒。 另請注意，對齊可能稍微偏離，因為我一次調整寬度為5px。 如果事情可以更快地完成，那么使用1px會很容易。 更好的可能是近距離的粗略調整，然后進行微調以使其完美。 對於那些想要接受它的人來說，顯然有很多嘗試要做。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
var likediv, likeframe;
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width='225px';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
newwidth=currwidth+5;
likeframe.style.width=newwidth+'px';
likeframe.style.height='0';
likeframe.src=likeframe.src;
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

編輯：做了一些實驗，仍然是一個尷尬的解決方法，但比以前更快： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
var likediv, likeframe, targwidth;
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width='225px';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
targwidth=currwidth+5;
likeframe.style.width='10px';
likeframe.style.height='0';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+'px';
likeframe.style.height='0';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe2, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

最終編輯：這是我認為這種方法最好的方法; 代碼肯定可以調整，但是總是需要幾秒鍾才能通過試驗寬度來找到有效的方法。 但它現在足夠快（大約5秒），它實際上可以使用。 順便說一句，我正在添加每個新的代碼版本，而不是替換舊版本，因為我沒有對此代碼進行過多次跨瀏覽器測試，並且高速版本可能無法為某些人工作。 由於它是所有實驗代碼，我認為最好讓不同的版本可用於后備。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
var minwidth=225, maxwidth=500, finished=false, last_was_good=null;
var likediv, likeframe, targwidth, boundlow, boundhigh;
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
likediv=document.getElementById('d2');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width=minwidth+'px';
setTimeout(trynewwidth, 1);
}
function trynewwidth()
{
if (last_was_good==null) { boundlow=minwidth; boundhigh=maxwidth; }
else if (last_was_good) boundhigh=targwidth;
else boundlow=targwidth;
finished=((boundhigh-boundlow)<2);
if (finished && last_was_good) { done(); return; }
if (finished && !last_was_good) targwidth=boundhigh;
else targwidth=parseInt((boundlow+boundhigh)/2);
setTimeout(setwidth, 1);
}
function done()
{
//All finished, if we were hiding the div make it visible now
}
function setwidth()
{
likeframe=likediv.getElementsByTagName('iframe')[0];
likeframe.style.width='10px';
likeframe.style.height='0';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+'px';
likeframe.style.height='0';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe2, 10); return; }
if (finished) { done(); return; }
last_was_good=(h<26);
setTimeout(trynewwidth, 1);
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right;height:25px;overflow:hidden;border:1px dotted red'>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

解決方案4
 2  2012-08-25 09:23:04

CSS修復 

.fb-like, 
.fb-like > span,
.fb-like > span iframe {
    max-width:273px;
}

解決方案5
 2  2012-09-08 22:22:30

我個人使用以下內容...... 

#fbook-like {
    width: 50px !important; /*width of just the button*/
    overflow: visible; /*so there is no cut off*/
    vertical-align: top; /*bc all other like buttons align top*/
}

我在這里做的是將fb按鈕放在最右邊，這樣它與我的邊緣對齊，只是添加的注釋（動態寬度）將顯示超過邊緣。 無論長度如何，我都可以在收到評論的同時保持良好的設計。

解決方案6
 2  2014-05-20 07:57:03

在選擇尺寸時，有一些值得閱讀的FAQ答案。

https://developers.facebook.com/docs/plugins/like-button

雖然說它仍然很神秘：

“插件的寬度。您選擇的布局會影響您可以使用的最小和默認寬度，請參閱下面的常見問題解答以獲取更多詳細信息。”

標准

最小寬度：225像素。

如果“推薦”操作，則最小增加40px，如果發送為“true”，則增加60px。

默認寬度：450像素。 高度：35像素（無照片）或80像素（帶照片）。

box_count

最小寬度：55像素。 默認寬度：55像素。 高度：65像素。

button_count

最小寬度：90像素。 默認寬度：90像素。 高度：20像素。

按鍵

最小寬度：47像素。 默認寬度：47像素。 高度：20像素。

解決方案7
 0  2014-04-02 14:29:43

我不得不面對add-this插件的同樣問題，並以類似的方式解決： 

.addthis_button_facebook_like,
.addthis_button_facebook_like span,
.addthis_button_facebook_like span iframe {
    max-width: 450px !important;
}

解決方案8
 0  2016-05-11 12:21:43

我把它添加到我的CSS中： 

div.fb-like.fb_iframe_widget > span {
 width: 100% !important;
}

div.fb-like.fb_iframe_widget{
 width: 100%;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我可以更改Facebook“贊”按鈕的評論框的寬度嗎？ 如何制作分享按鈕，例如Facebook或Twitter 如何讓我的對象在我的導航欄中自動調整大小？ 如何使Facebook像按鈕的彈出框顯示在左側 如何調試丟失的Facebook Like Button？ 如何檢查是否點擊了facebook按鈕？ 如何將Facebook與自己的“贊”按鈕集成 如何使用JavaScript將描述添加到Facebook之類的按鈕？ 如何使此代碼適用於自定義“ Facebook Like Box” 如何讓瀏覽器像 Facebook 一樣記錄點擊？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM