Docstoc

How to add Facebook floating plugin in blogger

Document Sample
How to add Facebook floating plugin in blogger Powered By Docstoc
					How to add Facebook floating plugin in
blogger

Today I will teach you that how you can add Facebook floating plugin in blogger. Facebook floating
plugin is looks like this.




                  See Live Demo Here




Here are the steps to be followed.
    1.   First of all, login to your blogger account.
    2.   Go to Layout.
    3.   Click on Add a gadget.
    4.   Select HTML gadget.
    5.   And Copy Paste Following Code.
<script type="text/javascript">


/*<![CDATA[*/


jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function()
{jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right:
"-250"}, "medium");}, 500);});


/*]]>*/


</script>


<style type="text/css">


.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-
PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center
transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:
99999;position:fixed;right:-250px;top:20%;}


.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}


.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position:
absolute;right: 6px;text-align: right;z-index: 99999;}


.abtlikebox span a{color: gray;text-decoration:none;}


.abtlikebox span a:hover{text-decoration:underline;}


}


</style>


<div class="abtlikebox" style="">
        <div>


        <iframe
   src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmr
   mubi2&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=whit
   e&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no"
   frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width:
   245px;background:#fafafa;"></iframe><span>Widget by :<a
   href="http://howto16.blogspot.com">How to Learn</a></span>
        </div>
    </div>




Find highlighted Facebook Fan Page profile id mrmubi2

And replace it with your own Facebook page profile id

If you do not know your Facebook page profile id then go to your Facebook page and see in address bar.

Your Facebook page profile id is written after .com/YOUR FACE BOOK PROFILE ID

For Example:

www.facebook.com/mrmubi2


If you hover your mouse on Facebook Floating Plugin and it is not working
then do the same as written below.

   1.    Go to your blogger account
   2.    Click on Template
   3.    Click on Edit HTML, and then proceed
   4.    Find </head>
   5.    And paste following code before </head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>



Click Save                                                                          Doc By: How to Learn

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:39
posted:6/8/2012
language:English
pages:3