以不同的风格显示Facebook评论?

时间:2015-04-16 16:21:54

标签: javascript jquery html facebook plugins

我想在网页上显示Facebook评论,但facebook评论插件附带facebook风格。是否可以删除除facebook评论文本以外的所有内容?

或者是否有其他js / jquery插件或代码只会提取Facebook评论,以便我可以显示它们。

非常感谢任何帮助或提示!

1 个答案:

答案 0 :(得分:0)

好吧,正如我上面评论的那样,这是一个例子,解释了我认为你可以做到的。显然这是有限的,但也很有用:

jsFiddle here

// HTML

<div class="relative">
    <div class="overlap">
        <div class="box a"><p>You have to imagine that this is the facebook plugin</p></div>
        <div class="box b"></div>
        <div class="box c">IPSUM dolor and sit then amet</div>
        <div class="box d"></div>
        <div class="box e"></div>
    </div>
    <iframe scrolling="no" src="http://en.lipsum.com"></iframe>
</div>
<br />
<input type="button" value="show/hide overlaps" />


// CSS

*:not(input) { margin: 0; padding: 0; }
iframe { width: 350px; height: 350px; overflow: hidden; border: solid 1px lightblue; }
.relative { position: relative; width: 350px; height: 350px; } 
.overlap { display: none; position: absolute; width: 100%; height: 100%; top: 1px; left: 1px; }
.box { position: absolute; background: white; text-align: center; }

.a { left: 0; width: 100%; height: 105px; background: lightgreen; }
.a p { font: normal 14px/105px Tahoma, sans-serif; color: #666; }
.b { left: 0; bottom: 0; width: 57px; height: 114px; }
.c { left: 108px; bottom: 90px; width: 225px; height: 20px; font: normal 15px Arial, sans-serif; color: red; text-align: left; }
.d { left: 0; bottom: 0; width: 100%; height: 87px; background: lightgreen; }


// JS

$('input').on('click', function(){
    $('.overlap').fadeToggle();
});