Wednesday 22 April 2015

Responsive Facebook Page widget 


                 <div class="facebook_cont">
                    <div id="fb-root"></div>
                    <script>

// facebook widget js 
                       (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/sdk.js#xfbml=1&version=v2.3";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));

// script for making the widget responsive 
                           $(window).bind("load resize", function () {
                            var container_width = $('#container').width();
                            $('.fb-page').each(function () {
                                // Change 'data-width' attribute
                                $(this).first('span').width(container_width);
                                $(this).attr('data-width', container_width);

                                FB.XFBML.parse();
                            });
                        });
                    </script>

// Html from facebook widget
                    <div id="container" style="width: 100%">
                        <div class="fb-page" data-href="https://www.facebook.com/your_Page" data-width="500" data-height="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
                            <div class="fb-xfbml-parse-ignore">
                                <blockquote cite="https://www.facebook.com/
your_Page"><a href="https://www.facebook.com/your_Page">Your Page</a></blockquote>
                            </div>
                        </div>
                    </div>
                 </div>

No comments:

Post a Comment