Facebook Popup Like Box Blog Par Kaise Lagaye.?

हेलो विज़िटर,
आज हम सब के पास अपनी खुद की वेबसाइट हो चुकी है ! और हर वेबसाईट का मालिक अपने वेबसाइट को design करने मे लगा हुआ है ! ऐसे समय मे हमे भी अपने वेबसाइट को थोड़ा stylish करना चहिए !
जिससे हमारे वेबसाइट के विज़िटर बढ़ सके तो आपको मैं आज एक widget के बारे मे बता रहा हूँ और वह widget है ! Facebook pop up like box ! इस widget को आप अपने वेबसाइट पर लगाकर विज़िटर बढ़ा सकते है ! और फ़ेसबुक popup लाइक बॉक्स लगाने का एक फायदा ये भी है की हमे वेबसाईट पर इस widget के लिये जगह नही देनी पड़ती ! और इस widget को लगाने से पक्का आपके वेबसाइट पर विज़िटर और आपके फ़ेसबुक पेज की लाइक ज़रूर बढेगी !. क्योंकि जब भी विज़िटर आपकी साइट को खोलेगा तो एक popup फ़ेसबुक लाइक खुलेगा तब आपके विज़िटर के पास एक ही रास्ता होगा या तो वह आपके फ़ेसबुक पेज.को.लाइक करे या फ़िर popup लाइक बॉक्स को cancel करे ! तो दोस्तो है ना अच्छा widget तो चलिये अब टॉपिक पर बात करते है !-



Facebook  Pop Up लाइक बॉक्स को कैसे लगाए ....?


STEP 1 :- सबसे पहले आप अपने ब्लॉगर अकाउंट मे LOGIN कीजिये ! LOGIN करने के बाद LAYOUT को सेलेक्ट कीजिये ! और  'Add a Gadget' TAB पर क्लिक कीजिये !

STEP 2 Add a Gadget पर क्लिक करने के बाद html/javascript को सेलेक्ट कीजिये !

STEP 3 HTML/JAVASCRIPT पर क्लिक करते ही एक popup html बॉक्स खुल जाएगा ! तो आप को यहाँ पर हमारे द्वारा दिये हुए html कोड को डालना है

STEP 4 अब आप नीचे दिये हुए कोड को कॉपी कीजिये और जैसा की ऊपर फोटो मे दिखाया गया है कोड PASTE करने की जगह वही पर कोड को PASTE कर दीजिये !



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 0%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://m.facebook.com/Knowledge-Me-Guru-1030957923598410&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://knowledgemeguru.blogspot.com" rel="nofollow">KMG</a></div>
</div>
</div>


STEP 5 अब आप HTML कोड को SAVE कर दीजिये ! और अब आपके वेबसाइट पर POP UP फ़ेसबुक लाइक बॉक्स लग चुका है !

IMPORTANT - 1 HTML कोड ADD करने के बाद हमारे FACEBOOK पेज URL https://m.facebook.com/Knowledge-Me-Guru-1030957923598410 की जगह अपने फ़ेसबुक पेज का URL बदलना ना भूलिए !


IMPORTANT - 2 ऊपर के HTML कोड को लगाने से केवल एक बार POP UP फ़ेसबुक लाइक दिखेगा और अगर आप चाहते की जब भी विज़िटर आपके वेबसाइट की NEW PAGE खोले तो उसे POPUP लाइक बॉक्स दिखे तो आप ऊपर दिये इस कोड को $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); 
REMOVE कर दीजिये !
SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 Comments:

Post a Comment