2012-11-06 43 views
20

我需要移動與Facebook像按鈕關聯的彈出評論框。我明白這個問題已經被問及解決了無數次。移動/位置Facebook贊按鈕評論彈出

以前問:Facebook Like Widget on Fan page, Comment area out of visible area

截圖同樣的問題,作爲我的:http://twitpic.com/4q7ggi

這裏的區別是,我認爲Facebook已經改變了過去數個月內實施,使雙方的Like按鈕和評論彈出窗口包含在一個iframe中。我預計他們可能會這樣做,因爲這是防止惡意網站通過自動喜歡內容來利用用戶的唯一可靠方法。但是,這意味着我無法應用CSS來重新定位評論框。

我使用的HTML5像按鈕實現,這是相同的用於像按鈕http://developers.facebook.com/docs/reference/plugins/like/官方Facebook的參考。要查看示例,請再次單擊Facebook參考頁面上的類似按鈕,然後檢查評論彈出元素。你會看到類似的按鈕和評論彈出包含在同一個iframe中。

+0

我有同樣的問題 –

+0

嗨,我有同樣的問題..你設法解決這個? – ddb

回答

1

這對我有用,這裏是一個fiddle的例子。所有我做的是一個簡單的修改使用CSS:

.fb_edge_widget_with_comment span.fb_send_button_form_widget { 
    top:100px!important; /*for example*/ 
    left:100px!important;  /*for example*/ 
} 

希望這會有所幫助。

+0

我沒有注意到這個移動評論框。 – rjksn

+0

我覺得它像一個蜜罐:) - 我必須說的原始的一個 –

0

我檢查了Facebook的例子,我看到這個評論框:http://screencast.com/t/fRQyUzqek

我檢查,並應用於花式這個類:

.-cx-PRIVATE-pluginCommentFlyout__full { 
    top: 100px!important; 
    left: 100px!important; 
} 

而感動的評論框。不過,我直接在檢查器中這樣做了,所以當您在CSS中使用它時,您可能還需要包含父級選擇器以確實具體。

希望這會有所幫助!

2

您不能更改iframe中的評論框的CSS,因爲它是same origin policy的衝突:

政策允許來自同一站點發起的互相訪問的網頁運行腳本方法和屬性,但沒有具體限制,但會阻止訪問不同網站上的頁面上的大多數方法和屬性。

發送消息給can be changed with CSS,因爲它不存在於iframe中。

4

這在過去對我有效。

.fb-like.fb_edge_widget_with_comment.fb_iframe_widget span iframe { 
    /* Now you can apply css here */ 
    bottom:0!important; 
} 
相關問題