फ़ेसबुक पॉपअप लाइक बॉक्स ब्लॉग पर लगायें

Facebook Like Box एक बहुत अच्छी और उपयोगी विजेट है। इसके द्वारा आप फेसबुक उन मित्रों तक अपनी हर बात/अपडेट पहुँचा सकते हैं जिन्होंने आपके Facebook Page को Like किया हुआ है। यदि आप इस विजेट को अपने ब्लॉग पर भी दिखायें तो अवश्य ही आपके फेसबुक पेज के Like बढ़ेंगे। इस विजेट को ब्लॉगर पर लगाने के तरीक़ा उपलब्ध है जिसके द्वारा आप इसे sidebar में दिखा सकते हैं किंतु मैं आपको इस विजेट का एक सुंदर Pure CSS Popup Widget रूप उपलब्ध कर रहा हूँ। जैसे ही कोई पाठक आपके ब्लॉग पर पधारेगा उसका अभिवादन इस Popup Widget द्वारा किया जायेगा। इससे पाठक की इस विजेट के प्रति जिज्ञासा बढ़ेगी और उसके द्वारा इसे Like किये जाने की सम्भावना भी। कोई भी पाठक इस विजेट बाक्स को इसके नीचे बायीं ओर दिये [X] CLOSE text बटन पर क्लिक करके बंद कर सकता है।

Screen Shot: Facebook Page Like Box Popup Widget

Facebook Like Box Popup Widget को Blogger पर लगाना

1. ब्लॉगर ड्राफ़्ट ¬> ब्लॉग चुनें ¬> Layout पर क्लिक करें ¬> HTML/Text विजेट जोड़ें (Title को न भरें)
2. अब इस विजेट में नीचे दिया गया कोड पेस्ट कर दें। ध्यान रहे कि कोड में लाल रंग से दर्शाये गये FACEBOOK_FAN_PAGE_NAME को अपने Facebook Page Name के साथ बदलना न भूलें

उदाहरण: जैसे मेरे Facebook Page का नाम techPrevue है

http://www.facebook.com/techPrevue

हरे रंग से दर्शाया गया text फेसबुक पेज का नाम होता है।

Facebook Like Box Popup Widget Code

<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->
/*FACEBOOK LIKE BOX CSS POPUP WIDGET
Web link to gadget code: https://taknikdrashta.com/facebook-page-like-box-popup-widget-pure-css/
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
<style type="text/css">
* html #tpstylepopupdiv{position:absolute}
#tpstylepopupdiv{display:block;top:0px;left:0px;width:100%;height:100%;margin:0;overflow-y:auto; z-index:9999}
#tpstylepopup{background-color:#fff;overflow:none}
.tpstylepopup{width:320px;height:380px;position:fixed;top:45%;left:50%;margin-top:-200px; margin-left:-200px;border:7px solid #6D85B5;padding:20px;z-index:9999}
.tptitle{background:#3B5999;color:#fff;font-size:16px !important;font-weight:bold;margin:5px 0;border-left:20px solid #6D85B5;padding:10px;line-height:25px;font-family:arial !important; float:left;z-index:9999}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;overflow-y:hidden}
/*]]>*/
</style>
<![endif]-->
<div id="tpstylepopupdiv">
<div id="tpstylepopup" class="tpstylepopup">
<h3 class="tptitle">GET ALL UPDATES VIA FACEBOOK JUST PRESS <img alt="Like" style="vertical-align:middle" src="http://goo.gl/bX6c0" /> BUTTON</h3>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFACEBOOK_FAN_PAGE_NAME&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center>
<br/>
<center style="float:left; margin-left:10px;cursor:pointer;"><a style=" font-size:xx-small; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('tpstylepopupdiv').style.display='none'">[X] CLOSE</a></center>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="https://taknikdrashta.com/2012/08/facebook-page-like-box-popup-widget-pure-css.html">Tech Prévue</a></center>
</div></div>
<!-- FACEBOOK LIKE BOX CSS POPUP WIDGET -->

यदि आपके ब्लॉग पर विजेट केवल आपके फेसबुक पेज का नाम बदलने से न चले तो आपको पूरा नीला और लाल लिंक (Entire blue and red link) बदलना होगा। जिसे आप फेसबुक पेज (Facebook Page) खोलकर अपने ब्राउज़र की एड्रेसबार (Browser address bar) से कॉपी कर सकते हैं।

विशेष नोट: इस विजेट को किसी भी HTML वेबसाइट पर बड़ी आसानी के साथ दिखाया जा सकता है। आपको ऊपर दिया गया कोड को </body> टैग के ठीक ऊपर पेस्ट करना होगा।

Keywords: Facebook Like Box, CSS Popup Facebook Like Box, Facebook Like Box Auto Popup Widget