फेसबुक लाइक बॉक्स(Facebook Like Box) हममें से बहुत ब्लॉगरों ने अपने ब्लॉग में लगाया हुआ है। कुछ इसे ब्लॉगर साइडबार में इसका प्रयोग कर रहें हैं और कुछ ने मेरी पिछली पोस्ट विजेट पॉपअप फेसबुक लाइक बॉक्स (Popup Facebook Like Box) को अपनाया है। यदि आपकी साइडबार में विजेटों की भरमार है या आप कुछ नया प्रयोग करना चाहते हैं तो आपको अब पेश है फेसबुक लाइक बॉक्स (Facebook Like Box) लेकिन यह सब एक बिल्कुल नये अंदाज़ में। आपके ब्लॉग पर यह बहुत कम जगह घेरेगा और जब कोई पाठक इस लोगो पर अपना माउस ऐरो (Mouse Arrow) ले जायेगा तभी यह उसके सामने खुलकर आयेगा। इसे फ्लोटिंग फेसबुक लाइक बॉक्स (Floating Facebook Like Box) कहा जा सकता है। इसका स्क्रीन शॉट (Screen Shots) नीचे दिया जा रहा है। आशा है इससे आपको बहुत कुछ स्पष्ट हो जायेगा।
Demo | सजीव उदाहरण देखने के लिए यहाँ क्लिक करें
बंद विजेट | Off State of Widget
खुला विजेट | On State of Widget
आइए इसे ब्लॉग पर लगायें
1. सबसे पहले आपको आपके ब्लॉगर टेम्पलेट में <head> टैग के नीचे jquery min javascript जोड़नी है। इसके लिए निम्न चरण पूरे करें।
ब्लॉगर Dashboard पर जायें ¬> Blog को चुनें ¬> Template पर क्लिक करें ¬> EDIT HTML पर क्लिक करें ¬> Proceed पर क्लिक करें
नोट: चरण 1 और चरण 2 को किस प्रकार पूरा करना है आप इसे इस पोस्ट से समझ सकते हैं। [Guide] Blogger Template में Edit करना << Click HERE
2. इसके बाद जो बॉक्स खुलेगा उसमें <head> टैग की खोज करके उसके ठीक अगली लाइन में नीचे दिया गया कोड पेस्ट कर लें।
jQuery Min Code:
<script src='http://code.jquery.com/jquery-1.7.2.min.js' type='text/javascript'></script>
नोट: यदि आपने पहले ही किसी विजेट के लिए jQuery Min अपने ब्लॉगर टेम्पलेट में इस्तेमाल की हुई है तो इसे दुबारा <head> टैग के नीचे प्रयोग न करें। इससे आपके ब्लॉग के खुलने की स्पीड पर प्रभाव पड़ेगा।
3. इतना कर लेने के बाद आपको अपने ब्लॉग में एक HTML/Javascript Gadget जोड़ना है और उसमें नीचे दिया गया कोड कॉपी करके उसे पेस्ट कर गैजेट को सहेज देना है।
HTML/Javascript Gadget जोड़ना:
ब्लॉगर Dashboard पर जायें ¬> Blog को चुनें ¬> Layout पर क्लिक करें ¬> Add a Gadget पर क्लिक करें ¬> एक HTML/Javascript Gadget जोड़ें
छूमंतर Facebook Like Box कोड:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".tp-fb-like-box").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.tp-fb-like-box{background: url("http://2.bp.blogspot.com/-Adx1bOXQoiQ/UD9E5ypFWpI/AAAAAAAAC0Y/Pi--TagBv00/s1600/facebook.png") no-repeat scroll right top transparent !important;display:block;float:left;height:136px;padding:0 46px 0 0;width:245px;z-index:99999;position:fixed;left:-250px;top:10%;}
.tp-fb-like-box div{border:none;position:relative;display:block;}
.tp-fb-like-box span{bottom:12px;font:8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right:7px;text-align:right;z-index:99999;}
.tp-fb-like-box span a{color:gray;text-decoration:none;}
.tp-fb-like-box span a:hover{text-decoration:underline;}
</style>
<div class="tp-fb-like-box">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FFACEBOOK_USER_NAME&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border:50px soild #0B0B0B; overflow: hidden; height: 270px; width: 250px;background:#fff;"></iframe>
</div>
लाल रंग से दर्शाये गये FACEBOOK_USER_NAME को अपने Facebook User Name से बदलना न भूलें।
आशा है आपको यह मजेदार लगेगा और आपके लिए उपयोगी सिद्ध होगा।