jFav, is a jQuery plug-in, that allows you in the most easiest way to add your website to the user's favourites/bookmarks. It is a very simple to use and enables the user that visit's your website to click on a button/link and create a new bookmark/favorite in his browser! Moreover jFav allows you to create custom bookmarks/favorites to the current page the user is visiting or any other page, in your site or in the web in general. The size of jFav is 3kb so it's a must have tool for every web developer!
Download jFav v1.0 with examples! View jFav v1.0 examples!
In order jFav to work you need the jQuery library (version 1.2+) and the javascript file (.js) of the jFav! Once you have them both, link them inside the head of your html file in the following order:
don't forget to replace "folderName" with the folder that you've stored the two ".js" files.
jFav has been test for compatibility issues with the following browsers:
Unfortunately jFav doesn't work for Safari or Chrome browsers, since both of them don't have any option in their javascript API to access the bookmarks/favorites. To work around that browser limitation I have enabled jFav with a popup message for Safari and Chrome browsers that informs to press the CTRL + D shortcut or CMD +D (for Mac) in order to achieve the same effect. Alternatively you have the option to add jFav functionality ONLY if the browser is not Chrome and is not Safari. If anyones knows a way to bypass this limitation for these two browsers (maybe some time in the future) please add the solution to the contacts in order to update the plugin.
In orde for jFav to work it needs to have one or more html links that will be affected (<a> tag). To control the bookmark url and title, you will have to change the href and title attributes of each link. If you don't set the href and title attributes then jFav will add to your bookmarks the current's page url with the title taken from <title>...</title>. So let's list The available options that you for each link that you apply jFav:
href and title attribute. URL/LINK: Current Page. Name: <title>...</title>. [internal use]title attribute only. URL/LINK: Current Page. Name: set by title attribute. [internal use]href attribute only. URL/LINK: set by href attribute. Name: <title>...</title>. [internal use]href and title. URL/LINK: set by href attribute. Name: set by title attribute.[external use]To properly use jFav, you must first make sure that the DOM is ready to be traversed and manipulated. To achieve that the codemust reside inside the event ready. For example let's assume you want to apply jFav on a link with id="add2favorites".
An alternative way to achieve the same thing, is to ensure that the jFav is placed after the DOM element that you want to handle. Although it's not the "appropriate" way, you could do it...continuing the above example we have:
There is a concept in JavaScript that urges the programmer to use/implement the language unconstructively. What that basically means is that: you must ensure that a user that will be able see and interact with you page without any problems, either if he has JavaScript enabled or not. Following that philosophy if you want to add some "extra" future in your website that can be used ONLY if JavaScript is enabled, then the right thing to do is add it via JavaScript (not HTML).
Now that we clarified the theory let's go into practice. Here are the steps:
<a>) and give it an identifier (class or id).append(), prepend(), after(), before(), insertAfter() or insertBefore().<a> tag using CSS.Let's start with steps 1 to 3, which is the JavaScript/jQuery code place inside the <head>...</head> part of html.
Regarding step 4, the CSS part you should create a style to format the a#add2favorites element.
jFav takes only one...not so important parameter. The lack of parameters is because each link, <a> tag can be handled independantly according to the href and title attributes.
The first and most important thing you have to understand is that jFav, doesn't have any parameters. In order to have maximum usability and implementation the "bookmarking" parameters are set per link, in the attributes href and title! Now that you've got tha let's go the most simple and common usage of jFav, make a link (or more, but I believe you need only one), to Add to Bookmarks/Favourites the current url. In order to do that you have to do two things: 1) create the link(s) in HTML and then 2) assign the jFav function on those links. The following examples goes like this...
HTML CODE:
<a id="buttonOne">Click here to Add this Page to Favourites</a>
jQuery CODE:
$('#buttonOne').jFav();
By click the link above in the example, you will see that the add to bookmarks/favourites dialogue box opens. The name of the link is taken from the <title> element of you page (inside <head>...</head>) and the link (URL, HREF whatever you call it) is the current url of the page. This is the (smart) jFav, it sees that you have not set the title & href attributes on the <a> tag and it assumes that you want this bookmark to point to the current page.
The second more "complicated" usage of jFav is handy when you want to create bookmarks that point to any url/href/link you want and with any title you want. Declare a title and href attributes in your links and you are set. A very important think to note, is the correct declartion of external links. This is wrong: www.google.com this is correct: http://www.google.com! See the following examples and you will understand.
HTML CODE:
1) <a class="buttonsTwo" href="http://www.google.com/" title="Google T H E search engine">Bookmark Google</a>
2) <a class="buttonsTwo" href="http://www.drupal.org/" title="Drupal RULEZ">Add Drupal to favourites!</a>
3) <a class="buttonsTwo" href="#" title="My Page Name Here">Bookmark Current Page, with custom title</a>
jQuery CODE:
$('.buttonsTwo').jFav();
The first and second links have a custom declaration in both title and href, thus instead of links these two work as add bookmarks/favourites for Google and Drupal respectively. The third link has a declaration only in the title attribute, so jFav uses the current URL/address for the favourite/bookmark destination and the bookmark/favourite name is take by the title attribute.
jFav is released under GPL Open Source Licenses...thus it is completely and totally free!. You are obligated to keep all credits (links, names etc) and if you feel like it a link to this page will be appreciated!
Comments
Graph API from Google
It uses java script and is
eg
How to wean off buspar
Coflict with lightbox
Post new comment