Facebook發送按鈕彈出窗口

我正在致力於FB發送按鈕並在新網站上實現它。問題在於點擊發送按鈕時FB顯示的彈出窗口位於發送按鈕下方。任何人都可以讓我知道我們如何設置「彈出」（點擊發送按鈕時出現的對話框）可以自定義顯示在發送按鈕上方而不是下方。Facebook發送按鈕彈出窗口

在此先感謝！

來源

2011-06-14 techguy

誰能幫我解決這個問題？ – techguy 2011-06-15 05:56:25

這個Facebook插件不允許你指定一個自定義的css文件，像一些較舊的css文件這樣做，除了搞亂iFrame樣式/大小之外，改變外觀將非常困難。您的CSS更改將不適用於Facebook呈現的iframe內容，因爲它位於不同的站點上，因此將會應用跨域限制。

來源

2011-06-18 18:19:22 bkaid

感謝您的信息！ – techguy 2011-06-20 05:37:20

我也想將此按鈕添加到頁面的右側，在移動iframe時出現問題，以便可見，因此決定在對話框窗口中打開發送按鈕。 http://developers.facebook.com/blog/post/514/

您將需要使用JS SDK來做到這一點，並提供一個按鈕或一個鏈接，將觸發發送對話框打開。下面是一些示例代碼，以使一個鏈接看起來像一個發送按鈕

HTML

<a class="fb-send-button"><i></i><span>Send</span></a>

CSS

.fb-send-button { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -ms-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
    cursor: pointer; 
    color: #3b5998; 
    -moz-outline-style: none; 
    text-decoration: none; 
    background: #eceef5; 
    border: 1px solid #cad4e7; 
    display: inline-block; 
    padding: 4px 5px; 
    white-space: nowrap; 
    padding: 2px 5px; 
    font-family: 'trebuchet ms', sans-serif; 
    font-size: 11px; 
} 
.fb-send-button:hover { 
    border-color: #9dacce; 
    text-decoration: none; 
    color: #3b5998; 
} 
.fb-send-button span { 
    line-height: 14px; 
    line-height: 13px; 
} 
.fb-send-button i, .fb-send-button img { 
    float: left; 
    height: 14px; 
    margin-right: 3px; 
    width: 14px; 
} 
.fb-send-button i { 
    background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/z7/r/ql9vukDCc4R.png); 
    background-position: -1px -47px; 
}

的Javascript

FB.ui({ 
    method: 'send', 
    name: 'Facebook Dialogs', 
    link: 'https://developers.facebook.com/docs/reference/dialogs/' 
});

您將需要在您的頁面上加載Javascript SDK，並且需要將上述JS放置在點擊屬性中的錨點標記中，或者最好使用您自己的Javascript添加它。

來源

2011-06-22 19:05:03

謝謝Thomas..will試一試，現在讓你 – techguy 2011-06-23 05:37:32

不工作：/ .... – vini 2012-02-17 13:55:27

我有同樣的問題，用下面的來解決這個問題：

.fb_edge_widget_with_comment span.fb_edge_comment_widget { 
    left: -290px !important; 
}

嘗試用左，上，右，下值，只要你想將它放置玩。

來源

2011-11-25 02:32:22 Gab

這也將重新定位按鈕，而不僅僅是點擊發送按鈕時出現的彈出框。所有東西都放在iframe本身，所以操縱iframe會導致操縱我認爲不符合操作要求的所有內容。 – 2011-12-09 06:54:46

到目前爲止，我已經試過最好的解決辦法是這樣的：

.fb_edge_widget_with_comment span.fb_edge_comment_widget { 
    left: -45px !important; 
}

這種治標不治本的移動彈出框到發送按鈕，下一個稍微居中的位置，這使得它在移動訪問。

這是怎麼看起來像在iPhone（注意它仍然太有點太寬了，手機）：
http://s16.postimage.org/3xeep2uo5/foto_1.png

在PC瀏覽器中查看

同一頁：
http://s16.postimage.org/nukby1dj9/xotc_browser.png

注意的彈出窗口頂部的小箭頭現在不再與發送按鈕對齊（由於我的CSS）。注意它是如何將位置切換到彈出窗口的左側或右側，具體取決於它被查看的位置（移動或PC瀏覽器）。

（我試過在魯米娜920爲好，但作出了同樣的問題，因爲iPhone）

來源

2012-12-14 14:56:29

Facebook發送按鈕彈出窗口

回答

相關問題