Here a simple script that will easily implement a Facebook popup like widget to any kind of website and blogs such as blogger and wordpress.
How to implement the code to your website
1. Blogger blog – Login to your blogger dashboard and go to layouts. Add a HTML/Javascript gadget to the sidebar and include the below code.
2. WordPress blog – Login to your wordpress dashboard and goto Appearance > Widgets. Add a Text widget to the sidebar and add the below code in the text widget.
Understand the code and making changes
The below code has 4 variables that you can change as per your requirements-
- cookieExpire – This variable control the frequency of the popup to be shown to the users. Setting it to zero will make it popup on every page. Setting it 1 will make it appear only once in a day. Please note this value sets the number of days before the popup is shown again.
- delaySec – Time to wait a user visits your site before the popup is displayed. 1000 represents 1 sec to wait after the page is loaded.
- fbUrl – Your Facebook page URL
- popTitle – Set the Title of the popup box.
The Code
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<link rel='stylesheet' href='https://raw.githubusercontent.com/sudiptomahato/seecoupons/master/fbpopupwidget/fbpopupwidget/style.css'/>
<script type='text/javascript' src='https://raw.githubusercontent.com/sudiptomahato/seecoupons/master/fbpopupwidget/fbpopupwidget/script.js'></script>
<script type='text/javascript'>
// number in days. 0 means show everytime page is refreshed
cookieExpire=0;
// number of seconds after which the popup will be displayed. 1000 = 1 second
delaySec=3000;
// your facebook page url here
fbUrl='http://www.facebook.com/techxt';
// Title text
popTitle='Like us on Facebook and never miss an article.';
//do not change anything below this
jQuery(document).ready(function(){
addPopup();
});
</script>
I am the founder and developer at TECHXT. Over the decade I have helped hundreds build their own site. All plugins I develop are made have a common goal: Make it as simple as possible and as easy to use as possible.
Do you like this article?
