我们可以自定义facebook likebox吗?

时间:2014-12-16 12:53:35

标签: javascript jquery css html5 facebook-likebox

我正在尝试使用以下代码自定义Facebook likebox中的Feed和自动滚动功能。

<div id="fb-root"></div><script>(function(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_IN/sdk.js#xfbml=1&appId=453991991316939&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

enter image description here 我已尝试在多个网站中给出多个画布调整大小的方法但现在卡住了。 有任何想法吗?我该如何自定义,如果有人已为此创建了插件,那将会很棒?

1 个答案:

答案 0 :(得分:1)

You need to copy the given below CSS code with Facebook Like Box code and paste it in your page.
You need to changee the url in iframe *************** to your facebook url.

    <style type="text/css">
     .f-bookMain {
        background-color:#E1E1E1; 
        width:320px; 
        border:1px solid #BCBCBC;
        padding:15px 0 15px 15px;
        height:280px;
      }
     .f-bookInnerBlock { 
        overflow:hidden;
         height:280px;
         border:1px solid #aaa;
      }
    </style>

    <div class="f-bookMain">
    <div class="f-bookInnerBlock">

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F***************&amp;
    width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;
    show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" 
    allowTransparency="true">
    </iframe>

    </div>
    </div>

    <div id="fb-root"></div>
    <script>
    (function(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);
    }(document, 'script', 'facebook-jssdk'));
    </script>

You need to changee the url in iframe *************** to your facebook url.