Pages

Saturday, March 23, 2013

How to Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Hello friends we all know that BlogSpot is the most popular blogging in the world. On the other side Facebook is the world largest social Networking site. . Today Facebook Like button,Like Box became a more powerful tool for sharing content. So why you not add Facebook Pop Out like button on your blogspot blog?

This Facebook Box Will Help Your Visitor To Become A Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page (This Is Better Than Email Newsletter). Follow These Steps To Add Facebook pop Out Like Box To Blogger Blog. 
How to add Facebook Pop Out Like Box to Blogger  

Go To Blogger Dashboard.

1. Next, go to Template, and click on the Edit HTML button:

2. Check the "Expand Widget Templates" box:



3. Search (using CTRL + F) for the following code :

</head>

4. Add the following code just before/above </head> tag:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

5. Save the Template.


6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:


<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F

For example, my facebook fan page is:

http://www.facebook.com/pages/Pinkusays/270740233060112

After replacing the characters above, your facebook fan page should look like this:
http%3A%2F%2Fwww.facebook.com%2Fpages%2Fpinkusays%2F270740233060112

Other settings (optional):
- to change the width and height of the facebook box, change the bolded values (250)
- to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can choose it from here)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Now you can save your widget. Enjoy!
How to Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect
9out of 10 based on 10 ratings. 9 user reviews.
Posted by: Mayor Botaks Updated at: 9:43 AM

4 comments:

  1. Great post!!

    Earn while you enjoy time with your Family & Loved ones!
    Join us today visit http://www.unemployedpinoys.com

    Unemployed is Brave and a choice to be a Freeman.
    To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
    HAPPY WORKING AT HOME :)

    ReplyDelete
  2. Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Earn Per Survey
    Paid Survey Website
    Paid Survey Websites in India
    Survey Websites in India
    Earn Per Survey
    Free Online Surveys
    Free Online Surveys Websites

    ReplyDelete
  3. Great Post.
    Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Online Survey Website
    Free Survey Website
    Survey Websites in Canada
    Survey Websites in India
    Earn Money from Home
    Free Online Surveys

    ReplyDelete
  4. Great Post.
    Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Online Survey Website
    Free Survey Website
    Survey Websites in Canada
    Survey Websites in India
    Earn Money from Home
    Free Online Surveys

    ReplyDelete