Breaking

Sunday, September 15, 2019

Add Floating Facebook Page Like Box in Blogger- getshelps.info

Add Floating Facebook Page Like Box in Blogger.


Add Floating Facebook Page Like Box in Blogger

Assalamualaikum ... how are u all? I hope you are well at the mercy of God. Today we will learn how to add interesting Floating Facebook Page Like Box to the blog.

Floating Facebook Like Box is a very popular widget for blogs and websites. This will help you like the Facebook page and get visitors to your blog.

We previously shared a Floating Twitter Box with you. Now I'm going to share a similar Facebook Widget. Floating Facebook Like Box is a very popular widget for blogs and websites. This will help you to take home your blog from Facebook. Also, using it will enhance the beauty of your blog. These types of widgets can also be used on various personal blogs, starting from professional websites.

Learn more- how to create html sitemap page

This kind of Widget can be seen on various blogs, but they are no longer working as they are very old. As you probably know, Facebook has now changed the style of the Like Box. For now, Facebook Like Box is not being adjusted to the old ones. This is matched with the full update version. Therefore, it should not be disturbed.

Floating Facebook Page Like Box in Blogger

This widget can be used on both Blogger and WordPress. This will usually be a hidden position on the right side of the blog, but when your computer mouse grabs the top of it, it will slide out quickly. So it will be able to attract the attention of any visitor.

How to add facebook like a box?

  • First, log in to your Blogger account.
  • Then click on Template> Edit Html from the Blogger dashboard.
  • Then search for the </body> tag.
  • Now paste the following codes above the </body> tag.
<div id='fb-root'/>
<script>
//<![CDATA[
(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>
  • Then click on Save Template to exit.
  • Then click on Layout from the Blogger Dashboard.
  • Now click on Add Gadget from the right side layout.
facebook kike box

  • Then click on HTML/JavaScript.
  • Now copy and paste the code below into the HTML/JavaScript cell. 
<style type="text/css">
img,a {border:0}
#facebook-floating {visibility:visible}
#pro-facebook-right {z-index:10004; background-color:#3a5795; border:2px solid #3a5795; position:fixed;right:-250px}
.pro-facebook {width:100%; height:100%; overflow:hidden; margin:1px 0 0 0px}
.pro-facebook-img {position:absolute; top:-2px; left:-35px; border:0}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function(){ jQuery("#pro-facebook-right").hover(function(){
jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){
jQuery("#pro-facebook-right").stop(true,false).animate({right: -304}, 500); });});
</script>

<div id="facebook-floating">
<div id="pro-facebook-right" style="top:20%; right:-304px;">
<div class="pro-facebook">
<img class="pro-facebook-img" src="https://2.bp.blogspot.com/-RDgbq_mFWTU/VcoMg6cJ0kI/AAAAAAAAFc4/sWd_y4iC7x8/s1600/facebook.png" />
<div class="fb-page" data-href="https://www.facebook.com/getshelps" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
</div>
</div>
</div>
  • Save the gadget with the name of your Facebook Page in the red marked area above.

No comments:

Post a Comment