Saturday, August 11, 2012

Add Pop-Up Facebook Like Box With Twitter Button

Author: Gagan Masoun
Pop-Up Facebook Like Box With Twitter Button
This time we will talk about how to add pop up facebook like box with twitter follower button on blogger blogs. In my previous guide ever written about how to add JQuery Pop-Up Facebook like box to blogger blog, but this time I will tell you how to install a button box like Facebook and Twitter follow in your blog.

By installing this widget on the blog, you can attract the visitors for following and like your profile on twitter and Facebook.Let's start the tutorial.

Add Pop-Up Facebook Like Box With Twitter Button

Live Demo

How To Add Pop-Up Facebook Like Box With Twitter Button To Blogger Blog
  • Go to Blogger Dashboard -> Layout -> Add A Gadget -> Add HTML/Javascript
  • Now Copy and Paste The Following Code Inside It
<script src="http://blogsdaddy.googlecode.com/files/pop-up.js" type="text/javascript"></script><div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTHx6JTLDZB7NTU28j9xdjOT0tV071wwNDhyphenhyphencguEtjRbhpe9kHuePDbEk9nOzy7_rkyHfHqQVGDkWbpKrev1Flo3pdUCTGDpL2qBZvVuwmEXWVG4CkVhNSJHom7QrjhgvxlcCVEyR8zQv/s1600/white_blogsdaddy.gif&quot;) repeat scroll 0% 0% transparent;-moz-border-radius: 15px 15px 15px 15px; border: 3px solid rgb(255, 51, 0); display: block;"><div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;"><a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 2px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="#">Close</a><strong style="color: rgb(0, 0, 0);">Like And Do Not Forget To Follow Us!</strong><br/><a href="https://twitter.com/BlogsDaddy" title="blogs daddy" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @blogsdaddy</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fid-id.facebook.com%2FBlogsDaddy&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;height=212&amp;appId=332038240214544" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:120px;" allowtransparency="true"></iframe></div></div> 

How to Customize This Widget 

  • Replace Blogsdaddy with your Twitter Username (2 times)
  • Replace BlogsDaddy and App Code (Yellow Color) with your own Facebook page username and code.
  • Now Click on the save button and now check your blog. 

3 comments:

  1. Replies
    1. Thanks for using our widget ... :), Your blog is awesome..

      Cheers..........

      Delete
  2. working nice.. thanks for the tutorial..

    ReplyDelete