Facebook Pop Out Page Like Box with Post Feed

It allows administrators to promote their Pages and embed a simple feed of content from a Page into other sites.

Latest Page Plugin with Feeds I already use this plugin before but it eats a lot space.

The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.

This widget show page post and the face who already like your page.

Get the Latest Plugin

"With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites," it said.

1.Visit this Page : https://developers.facebook.com/docs/plugins/page-plugin
2. Get the SDK Code
Don't Have Application ID?
Get Idea here : http://www.blogmytuts.net/2014/01/create-your-own-via-status-on-your.html

3. Paste the code on your template right after the <body>

If there is Error like this one..
Error parsing XML The reference to entity "version" must end with the ';' delimiter

Try this scripts change the Application ID (appId)with your own .

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

Other Scripts with cookies and login

<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : '107963722663354',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml : true // parse XFBML
    });
};
    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/sdk.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

Or This one

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
      appId      : '107963722663354', // App ID
      xfbml      : true, // parse XFBML
      version    : 'v2.3' // sdk version
    });
    // Additional initialization code here
};
// Load the SDK Asynchronously
(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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

NOTE: Remeber to change Application ID with your own the one with color RED OK!.

This handy tool automatically converts javascript ad code into the correct format so you can embed it directly into your new xml Blogger template.
Visit :http://www.blogmytuts.net/2012/03/blogger-ad-code-converter.html
Copy your Facebook plugin scripts paste it here and convert. then directly paste on your template after <body>

4. Copy this code on a Notepad and find edit the fallowing press CTRL + F
RED color your Facebook Page name
BLUE color The Height of the widget


<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogmytuts").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogmytuts{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HJpJpcyxD3lXPpnznpAKLGnmJTmKUsH-5FclI0xXhG5Qz4G2i6Ih3kKgdYiiHxtLZ2_W_ijwYfvjrykqIDP-GTW6rtjsQb_Ei1TAWttVbX61OAh-BuLclIsuGPXDwWZH3L8_coQ4h6yZ//") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 1px 0 46px;width: 250px;z-index: 99999;position:fixed;right:-250px;top:5%;} .blogmytuts div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .blogmytuts span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogmytuts span a{color: gray;text-decoration:none;} .blogmytuts span a:hover{text-decoration:underline;} } </style><div class="blogmytuts" style="">
<div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogmytuts&width=250&height=570&colorscheme=light&show_faces=true&header=true&stream=true&show_border=true&amp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:570px;" allowtransparency="true"></iframe><span><center>
<a style="color:#a8a8a8;font-size:12px;" href="http://blogmytuts.net">blogmytuts</a> - <a style="color:#a8a8a8;font-size:12px;" href="http://www.blogmytuts.net/2015/04/facebook-pop-out-page-like-box-with.html">Click Here to Get this Widgets</a></center>
</span></div>
</div>
