Facebook Popup Like box එක ඔයාගේ බ්ලොග් එකට.

Blog එකට එක එක වැඩ කෑලි දාන්න පුළුවන්. මේක මෙහෙම එකක්. ඔයා දැකලා ඇති අපි Website එකකට යනකොට එයාලගේ Page එකට like කරන්න කියලා දාන්න Popup like box එකක්.

මේවා වර්ග ගොඩක් තියනවා.
1. යන හැම page එකටම යනකොට මේක වැටෙනවා..
2. Home page එකට එනකොට විතරක් මේක වැටෙනවා.
3. Timer එකක් දාලා ටික වෙලාවකින් නැති වෙන්න හදනවා.
4. Blog or website එකට මුලින්ම එනකොට විතරක් මේක පෙන්නනවා.

අද කියන්නේ 4 වෙනි අවස්ථාව ගැන. මොනවා වුනත් අපි ගොඩක් සැලකිලිමත් වෙන්න ඕනේ user ගේ පහසුව. අපි දාල තියන දේවල් වලින් එයට කරදරයක් වෙනවනම් එක නොකර ඉන්න එක හොදයි. නැත්නම් මේක බලෙන් like දාගන්න වගේ කරන වැඩක් වෙනවා.

අද කියන ඒකෙන page එකට (Homepage හෝ අනෙක් කවර හෝ post page) මුලින්ම එන දවසේ මේ විදියට Facebook Popup like box එකක් හදාගන්න විදියයි.එහෙනම් වැඩේ පටන් ගමු..

1. මුලින්ම මෙන්න මේ Code එක Copy කරගන්න.

<style>

/*

ColorBox Core Style:

The following CSS is consistent between example themes and should not be altered.

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*

User Style:

Change the following styles to modify the appearance of ColorBox. They are

ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

box-shadow:0 0 15px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

}

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdKtsQglqb3SJTOrfp6C_jEb8kU0SXx0T9wbx_BVbM2pHYcdKIi6m1dntAingRQBybulV7tEQCAoOi6naQ3uUeE3eCH3jYiM6RcvBBdRwg8Fa9373oNu-LtAk7b8r9G8KYL-PbCdQNdVl/s1600/border.png

) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdKtsQglqb3SJTOrfp6C_jEb8kU0SXx0T9wbx_BVbM2pHYcdKIi6m1dntAingRQBybulV7tEQCAoOi6naQ3uUeE3eCH3jYiM6RcvBBdRwg8Fa9373oNu-LtAk7b8r9G8KYL-PbCdQNdVl/s1600/border.png

) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSFKG1rKVbVVs0GIhYOHkj-a6Vu32KP1mfIA7DJWxgpwPm64C6FC8IkM7wFyQIA0-pX-4XaTraHQujZBmhog7EdjDrtyI9aMt3OgM5FuKuQDbOID_l1G5ZvLbjrGkfDsA2eQgV_QK-Pbd/s1600/loading-background.png

) no-repeat center center;}

#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUCN0Yjv1OrDbZsjpwEhVe_IaBdjCUXyp88J1epMy5PWi_m-mGQHw2DGbUYRvpRud7f5vmX6_jF6r-OOCpvNcLPKykboFtqAOUUorFb2TmDJUAPEOPNLJhyphenhyphenWJIJKAN8-Z99f0VLMjdm8x/s1600/loading.gif

) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxmdpTrb-Hm3XLyE6nWbWyHG0Qd5ZZGm3X_hJd7WBiivPrVeunA0EcfcxAVcfvTjI4P3lGjegesiR7KtSwaLnyiyxYbLSfjysFwd2d7EX54Y5MB8qUbxYN2SR1NBePBee1Tl5f-Jp17Ba/s1600/controls.png

) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/

/* Facebook Likebox popup For Blogger

/*-----------------------------------------------------------------------------------*/

#subscribe {

font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe a:visited {

text-decoration:none;

}

.box-title {

color: #3B5998;

font-size: 20px !important;

font-weight: bold;

margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:10px;

line-height:25px; font-family:arial !important;

}

.box-tagline {

color: #999;

margin: 0;

text-align: center;

}

#subs-container {

padding: 35px 0 30px 0;

position: relative;

}

a:link, a:visited {

border:none;

}

.demo {

display:none;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

'></script>

<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js

"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=true') == -1) {

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#subscribe"});

}

});

</script>

<!-- This contains the hidden content for inline calls -->

<div style='display:none'>

<div id='subscribe' style='padding:10px; background:#fff;'>

<h3>like us onfacebook<center><p style="line-height:3px;" >▼</p></center></h3>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2yourfanpageurl&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>

<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://cybernet50.blogspot.com

">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com

">Blogger Widgets</a></p>

</div>

</div>

2. දැන් මේක MS.Word, Notepad වලට හරි වෙන තැනකට හරි Paste කරගන්න.

3. දැන් ඔයා ඔයාගේ Facebook fan page එකට යන්න. එකේ web address (URL) එකේ අන්තිමට තියන Page name එක විතරක් Copy කරගන්න.

4. මේක රතු පාටින් දාලා තියන තැනට (ඉහත Code 1 බලන්න) yourfanpage වෙනුවට දාන්න ඔබගේ ලයික පෙජ් එකේ URL එක දෙන්න 

ඒ වගේම නිල් පාටින් තියන තැනට ඔයාට කැමති නමක් දෙන්න. ඒක තමයි popup likebox එකේ උඩින්ම පෙන්නේ. මමනම් දැම්මේ like සයිබ NET on facebook කියලා. 

5. දැන් සම්පුර්ණ Code 1 copy කරගන්න
6. www.blogger.com වල Layout යන්න

7. Add a gadget වලින් HTML/JavaScript එකක් ගන්න

8. Title එකට ඔයාට කැමති නමක් (ex: FB popup) දීලා Content වලට අර Code එක paste කරගන්න.
9. දැන් Save දෙන්න.

10. දැන් Save Arrangement දෙන්න. 

දැන් ඔයා Blog එකට ගිහින් බලන්න කොමද කියලා...

සැලකිය යුතුයි:

ඔබ ඔබගේ කොම් එකෙන් දෙවනුව මම Page එකට යනවිට මෙය නොපෙනේ. නමුත් මෙයට අලුතෙන් කෙනෙක් පැමිණෙන සෑම වෙලාවකම මය දර්ශනය වේ.