Favicon + Title on external links with jQuery

What is it?

Ever wanted to put an icon in front of external links? How about the page's favicon? And because we're all lazy, why not getting it's title as well? Now, here's the plugin for jQuery!

Implementation

Download the package, unzip it and put the files on your server. Make sure that you have access to a jQuery library. If not, download it from their homepage and upload it to your server as well. You will also need the arrow, if you want to use a different image or the image is not in the same folder as the HTML, you will have to change two variables, one in the JavaScript, one in the PHP.

Name Type Other
url varchar (300) primary key
title varchar (75)  
icon int  
time int  

But before we can get started, you need a MySQL-Table in order to have the cache working. The table needs to have four columns, one is url which is the primary key, second is title, third is favicon which is an integer and last is time which is an integer as well. Just look at the table on the right. If you have any questions, feel free to drop me a line: netsnake24@googlemail.com

Now, after we have created our table open the returnPage.php file and edit the following lines starting at line 29:

$dbCache  = true; // Whether caching is on or not, on is true and off is false
$dbTime   = 60; // In seconds how often the cache should be updated, 60*60*24 is one day
$dbServer = "localhost"; // server
$dbUser   = ""; // username
$dbPsswd  = ""; // password
$dbDB     = ""; // database
$dbTable  = ""; // table

To customize the appearance of the script, keep returnPage.php open and go to line 24.
In the first line you can edit the alternate title which will be displayed when pulling the title from the page fails.
The second one is the path to the alternate icon if there is no favicon available. I used the same one which is also displayed onMouseOver of the link.

$alternateTitle = (!empty($_GET["t"]) || isset($_GET["t"])) ? $_GET["t"] : "Alternate Title";
$alternateIcon  = (!empty($_GET["i"]) || isset($_GET["i"])) ? $_GET["i"] : "arrow_branch.png";

The next step is to open the faviconAndTitle.js and to adjust the following two lines, the first being the path to the PHP-file and the second being the path to the mouse-over icon.

var scriptUrl = "returnPage2.php";
var arrowUrl = "arrow_branch.png";

Finally, open your HTML file where you want the script to do it's magic, and add the jQuery library and the plugin. Then fire the function onto those a-tags you want to replace, in this example we only want to replace the links in a div called "#content". In the end, add some CSS to the icon to prevent it from being too big:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="faviconAndTitle.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("#content a").addFavicon();
});

</script>

<style>
a img {
	height: 11px;
	border: none;
	margin-right: 3px;
}
</style>

Now you should be ready to go! If you have any problems, feel free to contact me at netsnake24@googlemail.com!

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor. Morbi eu quam tincidunt dui adipiscing rhoncus. Praesent auctor, odio nec aliquet bibendum, justo ante pretium felis, ut auctor magna nisi vitae elit. In et enim. Vivamus eu diam. Morbi et diam. Cras facilisis orci eu ante placerat dictum. Nam lectus. Sed ac tellus. Curabitur fermentum sagittis lorem. Suspendisse iaculis. Suspendisse est magna, tristique vitae, convallis nec, dictum varius, lacus. Cras in ligula. Nulla at lectus non nulla pulvinar luctus. Suspendisse ipsum risus, bibendum ut, pretium eget, accumsan eget, ante. Fusce sed leo tincidunt nulla pharetra egestas. Fusce semper enim et erat pretium adipiscing. Vestibulum tincidunt condimentum purus. Integer ullamcorper, lacus at mollis pellentesque, magna orci tempus nisi, vel mollis orci dolor eu sem. Duis a sem.

Sed porttitor. Vestibulum feugiat. Nulla eget nibh. Sed quis velit. Nam sem orci, fringilla vel, pulvinar eu, tempor at, odio. Maecenas cursus dolor at ligula. Aliquam id risus mollis augue sollicitudin viverra. Vestibulum vestibulum faucibus urna. Pellentesque commodo neque eget felis. Vestibulum magna est, ultricies vel, sollicitudin ac, vehicula non, odio. Curabitur et tortor in metus suscipit porttitor. Nullam vitae ante ac lectus pulvinar eleifend. Fusce sit amet augue a massa sagittis pharetra. Cras luctus mi consectetur nunc. Maecenas scelerisque.

Sed mi nisi, accumsan vitae, lobortis sed, sodales quis, nibh. Proin felis sapien, sagittis in, vestibulum non, consectetur vitae, nunc. Suspendisse quis felis in ipsum iaculis cursus. Vivamus lacinia tincidunt purus. Ut eget nulla. Cras ut dui. Mauris id dolor. Donec dui ligula, venenatis a, accumsan id, eleifend non, nibh. Nunc eget dui eu lectus vestibulum lobortis. Nam lobortis pretium nisl. Maecenas odio. Sed enim lacus, imperdiet at, volutpat non, accumsan gravida, quam. Nulla mi. Nam quis libero nec eros adipiscing scelerisque. Nulla facilisi. Donec dui tellus, consectetur ut, iaculis vel, lacinia vel, justo. Integer lobortis. Sed mattis aliquet nibh.

Links used:

Google
Yahoo
NY Times
Xooria (Default icon, no favicon available)
Bitlife (No icon at all, same domain)

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

For the license, see: http://www.gnu.org/licenses/gpl.txt

Download

Load the following zip-file, unpack it and put the files onto your server. Follow the instructions to get it to work.

Do you like this?

Be sure to bookmark this site for futur use and check back regularly because I'm planning a blog you don't wanna miss!! (P.S.: The design's gonna be a real one that time - this design was just a quick thing without all the Photoshop and CSS magic :)