Header Ads

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 .

    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src =     &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=107963722663354&amp;version=v2.3&quot;;
  fjs.parentNode.insertBefore(js, fjs);
    }(document, &#039;script&#039;, &#039;facebook-jssdk&#039;));

Other Scripts with cookies and login 

    window.fbAsyncInit = function() {
      appId  : &#39;107963722663354&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/sdk.js&#39;;
    e.async = true;
Or This one

<!-- facebook -->
<div id="fb-root"></div>
window.fbAsyncInit = function() {
      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'));
<!-- /facebook -->
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

<!--Floating Facebook Widget by www.blogmytuts.net START-->
<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("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/blogmytuts_facebook_widget.png") 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><!--Brought to you by www.blogmytuts.net--><div class="blogmytuts" style="">
<!--Brought to you by http://www.blogmytuts.net/2015/04/facebook-pop-out-page-like-box-with.html--><div>
<!-- http://www.blogmytuts.net/2015/04/facebook-pop-out-page-like-box-with.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogmytuts&amp;width=250&amp;height=570&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true&amp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:570px;" allowtransparency="true"><!--Brought to you by www.blogmytuts.net--></iframe><!--Brought to you by www.blogmytuts.net--><span><!--Brought to you by www.blogmytuts.net--><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>
<!--Floating Facebook Widget by www.blogmytuts.net AND www.blognizend.blogspot.com END-->

5. Add or Paste your edited scripts on your blogspot / site html gadget or widgets the SAVE.

VISIT : http://www.blogmytuts.net/2015/04/new-facebook-pop-out-page-plugin-widget.html

No comments

blogmytuts. Powered by Blogger.