I am neither the first nor the last one that will be writing about placing twitter follower counter in webpage. Though there already exist many widgets anyone can easily use and customize; see here and here; But those widgets have limited options in terms of color, layout and moreover they have their info attched (somewhere) in widget which does not feels good. Here’s my attempt on how to get follower count in twitter using PHP.
Wibiya enables blogs to integrate the most exciting services, applications and widgets of their choice into their blog through customized web-based toolbars.
You can add the toolbar to wordpress, blogger, typepad, drupal, joomla, ning, vBulletin, and even in your custom website as well.
Benefits
- Increase page views and time on site
- Increase content sharing with the social tools available
- Enrich your content and increase communication
Here is a list of Applications available in wibiya toobar (there are more applications than the list below):
- Search (add search box in the toolbar)
- Google Translation (translate your page with google translation)
- Latest posts (view latest posts from the toolbar)
- Random posts (view random posts)
- Live notifications (broadcast alerts, messages, news and more to all your visitors)
- Real time users (display real time stats of your website including number of online users, popular pages and a dynamic geolocaion user map)
- Navigation links (create a custom navigation menu or button that make it easier for your visitors to reach different pages)
- Subscribe (add rss subscription button)
- Sharing tools (facebook, twitter, email, digg, stumbleupon, yahoo! buzz, myspace and more)
- Facebook community (create your own website community with facebook connect in just one click)
- Twitter dashboard (post tweets from website, latest tweets, twitter search, and more)
- Facebook fan page (bring your fan page to your website and grow the number of fans)
- Photo gallery (display your flickr photogallery in your website)
- Youtube channel (display your youtube video gallery in your website)
You can view the demo of the toolbar in the wibiya homepage itself.
Use wibiya toolbar, make your site more popular, interactive and cool. ;)
Cheers,
Scenario:
You are browsing the web. You liked a url and wanted to share it, probably on twitter.
The old lengthy way:
You will open twitter.com, login with you username and password. Open url shortner like bit.ly and shorten the url you want to share. Then post your tweet with some text and shortened url.
The new and quick way:
You can do the same very easily and quickly. I hope you are using Firefox. So, there is a firefox addon Shorten url which will shorten the url and display the result in location bar. It supports more than 100 URL shorteners.
You can always remain logged in in twitter with the firefox addon Echofon. Echofon adds a tiny status bar icon that notifies you when your friends post tweets. You can also view updates in a timeline and post your own tweets.
So, it’s just simple. Shorten any url with Shorten url ff addon. And share it adding some text with Echofon ff addon.
Enjoy tweeting!
Jquery; magic in web programming, have allowed us to use different features with the simple knowledge to use them. I was searching for basic code to refresh the specific DIV using jquery and found this article and like to share with my viewers.
There are very simple steps to achieve this:
Step 1:
Copy the following code and paste it in the head section of your webpage.
<script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow"); }, 20000); </script>
Here , above the file “reload.php” will be reloaded in every 20000ms ie 20 second . You can change the file which you have to reload and you can also change the reload time as per your requirement.
and secondly , the #loaddiv is the name of DIV which is going to be refreshed.
Step 2:
and now you need to put the div in the body section of your page
<div id="loaddiv"> </div>
Step 3:
Now finally you need to write the code for the file “reload.php” which will extract the contends from the other page or it also may contain the code to read the data from the database depending upon requirement.
here i am going to read a small content from another site. you can copy , paste the code and save it as the filename “reload.php”. in the same folder that contains the source code.
echo"<img src='http://www.nepalstock.com/datanepse/realindex.php'/>";
Now your page is ready .
Click here to see the demo.
In my recent project, i had to put video clips and mp3’s, the media file at the webpage and was searching for codes to play media files. I found this simple code that could play media files . you can simply download the zip file from the jwplayer and use it.
Step 1:
Copy and paste the following codes in the head section of your webpage.
<!-- body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; } a { color: #360; } h3 { padding-top: 20px; } ol { margin:5px 0 15px 16px; padding:0; list-style- type:square; } -->
Step 2:
Now download the following files and store it in the same folder which contains the main code.
player-viral.swf
swfobject.js
preview.jpg
Step 3
Now copy the following codes in the body section of your page
<object id="player" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="315" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="name" value="player" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value="file=axa.flv&image=preview.jpg" /><param name="src" value="player-viral.swf" /><embed id="player" type="application/x-shockwave-flash" width="400" height="315" src="player-viral.swf" flashvars="file=axa.flv&image=preview.jpg" allowscriptaccess="always" allowfullscreen="true" name="player"></embed></object>
here above file “video.flv” is the media file that is going to be played and file “preview.jpg” is the image that will first appear in the screen.
now your site is ready to play the media file.
click here for demo
Suppose, you are migrating you wordpress installation from one server to the other. In this case, you might have a different database server, database username and password. You might also have a different domain name as well. A general scenario will be migrating you wordpress installation from your localhost (local installation on your computer) to any online server.
In this case, you need to consider few things to make the site working. You need to make changes in wp-config.php (present in root directory of wordpress installation) and some update in wp-options table of your database.
Changes in wp-config.php
I suppose that my database name is wordpress, database username is root, password is pass and database server name is localhost.
/** The name of the database for WordPress */ define('DB_NAME', 'wordpress'); /** MySQL database username */ define('DB_USER', 'root'); /** MySQL database password */ define('DB_PASSWORD', 'pass'); /** MySQL hostname */ define('DB_HOST', 'localhost');
Changes in database (wp-options table)
1) In wp-options table, search for siteurl and home in option_name column.
SELECT * FROM `wp_options` where `option_name` = 'siteurl' OR `option_name` = 'home';
2) Then edit the option_value column for the two rows with your current site url. I have supposed your current url as http://example.com. You can put your own url.
UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'home' ; UPDATE `wp_options` SET `option_value` = 'http://example.com' WHERE `wp_options`.`option_name` = 'siteurl' ;
My last article was about inserting twitter updates in personal webpage. Now this time I am writing on how to use google map in webpage. Google offers an API which we can use to pull information from google maps for our own use. Even easier, they offer a little JavaScript widget which automatically uses this API and returns simple HTML of google maps and we can use this simple html where we need to show the location’s through google map.
Here are some simple steps for this.
Step 1:
First go to http://maps.google.com/ and search the map which you want to insert in your webpage.
Step 2:
Then click to the ”Link” bottom seen on the upper right side of the page like shown below.
Step 3:
And now you will see the following page on your screen .If you are fine with the size( height and width), zoom of the map , then copy the html code and paste it in the page where you want to insert the map.
If you want to customize the map then click on the “Customize and preview embedded map”. and you will see the following window.
Next change the size of the map and zoom as you want, copy the html code and paste it in the your page. Its very simple and easy.
click here to see the example.
Twitter; now-a-days, is the most familiar term in the web. Different kinds of people use ‘twitter’ for different purpose. Some people use to stay connected with friends while other use it to share new ideas and innovations. It is so popular that the news which we cannot get on the television and radios can be seen in the twitter. We also may want to put our twitter updates on our webpage.
For this, Twitter offers an API which you can use to pull information from twitter for your own uses. Even easier, they offer a little Javascript widget which automatically uses this API and returns simple HTML of your recent tweets.
Here are some simple steps for this.
First logon to your Twitter account and go to your homepage. Click the “Goodies” which is at the bottom of your twitter page like given below.
Then you will see the following page and click on the “Widgets”
After this you will see the following window. Click on the “My Website”. And then click on the “Profile Widget” to display your personal tweets.
After this you will see a window where you can Customize Your Profile Widget.You can add the username of the account which you want to show tweet in your webpage then set the preference ,appearance and dimension of the profile widget which will appear in page.
You can test the script by clicking the test settings.If you are fine with the testing result then click on the bottom ” Finish & Grab Code” and finally you will see the script,copy that script and paste it in the div of your page where you want to show your twitter updates .
Example:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter Page</title>
</head>
<body>
< -- script copied from the twitter --->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('rabishrestha').start();
</script>
</body>
</html>click here to try it yourself
Note: Make sure that your twitter account has public status. If you want to change your status on twitter account, click on the setting link and unchecked the bottom “protect my tweets”.
Sometime we need to put a live time clock in webpage. There are various codes and scripts which allows us to insert live time and date in the page . I was reading an article and found quite easier than the ones i have used in my projects. So i feel that i should share with others.
We need to follows some simple steps for this as mentioned below
Step 1:
Insert the following codes into the webpage where, we wish to appear live time clock.
<script language="javascript" src="liveclock.js"> /* Live Clock Script- By Mark Plachetta (astro@bigpond.net.au©) based on code from DynamicDrive.com For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com */ </script>
Step 2:
Insert the following codes inside the body of the html page
<body onLoad="show_clock()"> </body>
Step 3:
Download liveclock.js (by right clicking, and selecting “Save As”), and upload to your webpage directory.
Click here to view the DEMO
Normally, when we need to update the certain part of the page we do refresh the whole page. But it seems to be inefficient when we need to update a small portion of the page and we are refreshing the whole.Using the div tag in the page or tableless page have made easy for programmer to refresh a portion or division by using DIV with AJAX.
Here i have taken an example to show how to use AJAX in DIV.
In the example, there are three files (in the same folder):
- ajax.js
- index.html
- boo.php
ajax.js should contain
<!-- // Customise those settings var seconds = 5; var divid = "timediv"; // div that need to refresh var url = "boo.php"; // php file that contains code //////////////////////////////// // // Refreshing the DIV // //////////////////////////////// function refreshdiv(){ // The XMLHttpRequest object var xmlHttp; try{ xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (e){ try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Your browser does not support AJAX."); return false; } } } // Timestamp for preventing IE caching the GET request fetch_unix_timestamp = function() { return parseInt(new Date().getTime().toString().substring(0, 10)) } var timestamp = fetch_unix_timestamp(); var nocacheurl = url+"?t="+timestamp; // The code... xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ document.getElementById(divid).innerHTML=xmlHttp.responseText; setTimeout('refreshdiv()',seconds*1000); } } xmlHttp.open("GET",nocacheurl,true); xmlHttp.send(null); } // Start the refreshing process var seconds; window.onload = function startrefresh(){ setTimeout('refreshdiv()',seconds*1000); } -->
and second file “index.html” contains the div to be refreshed
<!-- <mce:script mce_src="ajax.js">< ! <strong>This is the current date and time (updates every 5 seconds): <script type="text/javascript">< ! refreshdiv(); // --> // this is going to be refreshed --></script>
third file “boo.php” that contains the php code to read time from the system.
<!-- // Format time output $str = "It is %a on %b %d, %Y, %X - Time zone: %Z"; // Echo results echo(gmstrftime($str,time())); -->
Although the content of this file could have been any, I decided it to be a PHP function (gmstrftime) which requests the current time and formats it. Every time the DIV is refreshed, the function returns the current time formatted; therefore you can clearly see that the example works, as the time will keep refreshing every 5 seconds.
The result, once you completed the example, should look like this:
This is the current date and time (updates every 5 seconds):
It is Thru on Oct 22,2009,16:03:50 – Time zone :GMT
You can change the code of boo.php to whatever you wish to try new things…
Source: http://www.aleixcortadellas.com
