Thursday , May 25 2017
Home / Social-Media / How to Add Floating and Pop up Like Box widgets to Website / Blog

How to Add Floating and Pop up Like Box widgets to Website / Blog

Hey friends , everyone knows that how important is social media websites to our blog or websites . Actually social media pulls a website to the way of success once our blog or website got popularity in social sharing . So talking about social sharing, it’s really increase our website or blog ranking in search engine . And it is very easy and amazing job because they didn’t need any ability as compared to search engine optimization world and it’s consider one of the important factor of Seo aswell .

If you looked out to any website or blog they must have social sharing fan pages among their business name and most often social media website is Facebook Nowadays . So here our topic is almost about how we can add Facebook floating and pop up like box widgets to our website or blog .

How to Add Facebook pop up like box widget ?

You may have notice while visiting someone websites or blog that after entering, suddenly pop up like box will have appear which expect you to give us Facebook page like . This is better and legal way to increase your Facebook fan page likes as well as once they likes your page it’s mean you got a regular visitor to your site because when that user login to Facebook account they must have seen your Facebook page on thier timeline, they may visit again and again to your site .

So there is alot of advantages once you have Facebook pop up like box on your websites or blog . So if you want to add pop up like box then follow our these simple steps

Follow these Steps :

  • Copy the code from below

<!– Facebook Popup Widget START –><!– Brought to you by www.TopItIdeas.com–>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<style>
#fanback {display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; }
#fan-exit { width:100%; height:100%; }
#MorganAndMen { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%;  margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; margin: -220px 0 0 -375px;}

#TheBlogWidgets { float:right; cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;
height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; }

.remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3;
margin-top:16px; position:relative; margin-left:20px;}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; }

</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_user_login’) != ‘yes’){
$(‘#fanback’).delay(10000).fadeIn(‘medium’);
$(‘#TheBlogWidgets, #fan-exit’).click(function(){
$(‘#fanback’).stop().fadeOut(‘medium’);
});
}
$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });
});
</script>

<div id=’fanback’>
<div id=’fan-exit’>
</div>
<div id=’MorganAndMen’>
<div id=’TheBlogWidgets’>
</div>
<div class=’remove-borda’>
</div>
<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/topitideas

&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream

=false&header=false’

style=’border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;’></iframe><center>
<span id=”linkit”></span></center>
</div>
</div>
<!– Facebook Popup Widget END. Brought to you by www.TopItIdeas.com –>

 

  • Once you Copied the above code Now go to your dashboard > Appearance > Editor .
  • Now Go to home.php and paste the code right after opening  <body> tag.
  • Now change these lines according to your Facebook Page Address for example change the topitideas words according to your facebook page username , see the quote below

href=https://www.facebook.com/topitideas

  • Now Save the changes and refresh the page you will see the pop up like box

Note : Above method work on WordPress Platform if you have using manually website code then you can paste above code right after opening <body> tag . And use rest of the steps its work

How to Add Floating Facebook widget ?

One of the best and easiest way to increase real traffics to site is very simple and easy just you Need to have maximum likes of your Facebook fan page and the very next step is update your page daily by useful information about your site so when you shared your websites link on Facebook pages and if someone likes that information then they may visit your site to read full story .

So here we talking about floating Facebook widgets which has stuck on the left side of your Web pages every time . By hovering your mouse cursor on that widget it’s slide from the left side of your page while its goes back to their position when removing cursor from them below these are the screen shot of the slider.

So if you want to add it then follow our steps to begin 

Follow these Steps :

  •  First Copy the Code From below

<!–Floating Facebook Widget by www.TopItIdeas.com START–>
<script type=”text/javascript”> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(“.theblogwidgets”).hover(function() {jQuery(this).stop().animate({right: “0”}, “medium”);}, function() {jQuery(this).stop().animate({right: “-250”}, “medium”);}, 500);}); /*]]>*/ </script> <style type=”text/css”> .theblogwidgets{background: url(“http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px “lucida grande”,tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!–Brought to you by www.TopItIdeas.com–><div class=”theblogwidgets” style=””>
<div>
<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftopitideas&width=245&colorscheme=light&show_faces

=true&border_color=white&connections=9&stream=false&header=false&height=270″ scrolling=”no” frameborder=”0″ scrolling=”no” style=”border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;”><!–Brought to you by www.TopItIdeas.com–></iframe><span><center>

</span></div>
</div>
<!–Floating Facebook Widget by www.TopItIdeass.com END–>

  • Once you copied the code from above then go to Dashboard > Appearance > Editor
  •  Now Go to home.php and paste the code right after opening  <body> tag.
  • Now change topitideas word according to your Facebook Page username  for example change the topitideas words according to your facebook page username , see the quote below

href=http%3A%2F%2Ffacebook.com%2Ftopitideas

  • Now Save the changes and refresh the page you will see the pop up like box

Note : Above method work on WordPress Platform if you have using manually website code then you can paste above code right after opening <body> tag . And use rest of the steps its work 

About Hkloma

Check Also

How to remove Auto format in Microsoft Word or Microsoft word numbering

Some time its annoying to see auto format/automatic format and Microsoft word numbering while typing in Microsoft …

Leave a Reply

Your email address will not be published. Required fields are marked *