Facebook的喜歡按鈕對話框顯示的頁面

Question

我已經放在一起的「社交滑塊」，允許訪客「喜歡」和「+」一個頁面...此滑塊的容器顯示在絕對右下角瀏覽器的角落。除非您單擊Like按鈕，否則所有效果都很好，彈出的允許評論的對話框就在頁面之外。

有沒有一種方法我沒有看到，允許您配置對話框顯示的位置/方式？

<div id="social-container"> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div> 
</div> 

而CSS：

#social-container { 
     clear: both; 
     z-index: 999; 
     position: fixed; 
     bottom: 120px; 
     right: 20px; 
    } 

Answer 1

前一段時間，你可以改變的CSS的社交插件的一些事情（通過傳遞一個CSS文件的URL給社會插件代碼），但afaik不再可能，你幾乎必須把它們照原樣。所以，不，這不可能，那些社交插件是一個封閉的系統。你能做的唯一事情就是設計一切，以便類似的按鈕位於左側。

Answer 2

如果您的佈局絕望地需要從右側觸發「您是否喜歡此頁」框，您是否可以考慮加寬框並將內容排除？

這應該爲此彈出內容的出現創建更多空間。

您還應該確保在頁面底部使用CSS添加了足夠的空間，以便將其擴展爲。它的定位很可能不會在它出現時添加自己的空間。

Answer 3

你不能選擇彈出框在哪裏出現，因爲它是一個iframe，並且你不能控制跨域iframe的css（並且沒有這個參數）。

，你唯一可以做的就是限制等等按鈕iframe的尺寸，使對話框保持隱藏：

#fb-like iframe { 
    width: 62px !important; height: 24px !important; 
} 

Answer 4

這似乎是顯而易見的，檢查與任何瀏覽器的工具，你喜歡的元素，發現彈出容器的名稱，相應地添加和調整。

例如：

#social-container.popup { 
    position: absolute; 
    right: 150px; 

Answer 5

所以，這是不可能的，這將解決您的問題，因爲你似乎有足夠能力知道如何做到這一點，發佈到實際對問題進行評估沒有真正的代碼，我不能找出你正在使用的是哪個Facebook API，但是，你不能僅僅捕獲點擊事件和iframe的寬度，不管它是什麼，只是比較偏移量？喜歡的東西 -

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var iframeHeight = facebookSelector.height(); 
    var iframeWidth = facebookSelector.width(); 
    var winHeight = $(window).height(); 
    var winWidth = $(window).width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    if (e.clientY > (winHeight-iframeHeight)){ 
     facebookSelector[0].style.top = winHeight-iframeHeight + "px"; 
    } 
    else { 
     facebookSelector.style.top = e.clientY + "px"; 
    } 
    //Set the left based on where mouse click occured 
    if (e.clientX > (winWidth-iframeWidth)){ 
     facebookSelector[0].style.left = winWidth-iframeWidth + "px"; 
    } 
    else { 
     facebookSelector[0].style.left = e.clientX + "px"; 
    } 
    } 
} 

上面的例子少verbose-

$("#social-container").click(function(e){ 
    var facebookSelector = $(iframe selector here); 
    var h = $(window).height() - facebookSelector.height(); 
    var w = $(window).width() - facebookSelector.width(); 

    if (e.clientY && e.clientX){ 
    //Set the top based on where mouse click occured 
    facebookSelector[0].style.top = (e.clientY > h) ? h + "px" : e.clientY + "px"; 
    //Set the left based on where mouse click occured 
    facebookSelector[0].style.left = (e.clientX > w) ? winWidth-iframeWidth + "px" : e.clientX + "px"; 
    } 
} 

你也可以使用像按鈕，而不是點擊位置的Facebook的位置（你想也好，真的）。

注意事項和附錄：
1。如果您的iframe的id（或任何其他內容）由Facebook動態生成，並且您無法控制它，那麼這將不會如此輕鬆。
2.如果Like按鈕位於iframe中，防止事件冒泡到您的容器。
3.此示例目前需要jQuery。
4.您的iframe（或其他）必須是position: absolute或position: fixed

Answer 6

這可能是溢出屬性的問題。嘗試在＃社會的容器或身體添加此：

overflow: auto; 

或

overflow: visible; 

或

overflow: scroll; 

Answer 7

上述解決方案都沒有爲我工作。我發現一個快速修復about facebook like button showing outside page，它的工作。

希望它可以節省時間，乾杯！