Monday, 28 November 2016

How to Add Floating Facebook Like Box Widget to Blogger

Bottom floating facebook like box widget is the profession design made in such a nice way that when a user visits your blog, they don't like to leave without becoming your facebook page fan. So today I will share this widget with you. If you want to increase your facebook like they should promote your page on your blog with your blog's users. Then you will get more likes from your users who visit your blog.

Facebook Like Box Widget for Blogger

Pay Attention: How to Add Flat Popup Facebook Like Box Widget to Blogger

When you install this bottom floating like box on your blog, you will surely get a very positive result. This widget working fine with also smartphone device. You should also try Floating Facebook Like Box For Blogger this widget also working fine. I hope this blogger widgets will be helpful for you for increasing your facebook like.

Read Also: 31 Handpicked Facebook Keyboard Shortcuts

Steps to Add Bottom Floating Facebook Like Box Widget to Blogger:

  1. Login to your Blogger Dashboard > Theme > Edit HTML
  2. Click anywhere inside the theme editor and press Ctrl + F
  3. Type </style> and hit Enter key
  4. Add the given CSS right above the </style>
  5. #open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;} .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;} .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } }
  6. Now past the following snippets just above the </body>
  7. <div class='slideUp' id='open-fb'> <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Close'><i class='fa fa-times'/></a> <div class='fb-like-box ' data-header='false' data-height='62' data-href='' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/> </span></div></div> <script type='text/javascript'> function show(target) { document.getElementById(target).style.display = &#39;block&#39;; } function hide(target) { document.getElementById(target).style.display = &#39;none&#39;; } </script>

    Note: Replace knigulper twice with your Facebook page username.

  8. Finally, click Save theme and view result by refreshing your blog.

I hope you liked this awesome tutorial. If yes, then do not forget to share this with your friends. And if your facing any problems related to this widget, then let me know by posting your valuable comments.

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.

Speak Your Mind