facebookプラグイン

In this example below you will see how to do a facebookプラグイン with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by unison-tanaka, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright unison-tanaka ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>facebookプラグイン</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <div id="wrapper">
        <div class="fb">
            <iframe id="iframe" style="border:none;overflow:hidden"></iframe>
        </div>
    </div>
</body>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='js/vxlovp.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/unison-tanaka/facebookandx30d7andx30e9andx30b0andx30a4andx30f3-RyPXdZ */
.fb {
  width:100%;
}

/*Downloaded from https://www.codeseek.co/unison-tanaka/facebookandx30d7andx30e9andx30b0andx30a4andx30f3-RyPXdZ */
$(function () {
    $("#iframe").facebook({
        container: '.fb',
        height: '500',
        href: "https://www.facebook.com/facebook",//最後にスラッシュを入れるとエラーになる
        tabs: "timeline",//timeline、events、messages
        small_header: 'false',
        adapt_container_width: 'true',
        hide_cover: 'false',
        show_facepile: 'true',
        scrolling: 'no',
        frameborder: '0',
        allowTransparency: 'true',
        allow: 'encrypted-media',
    });
});

Comments