Add Our Facebook App »

How to Add a Bookmark This Page Link In your WordPress Blog template

Written by Amit Banerjee under Blogging

It is a good idea to include a Bookmark Button at the end of  your article so that your readers can easily bookmark a page.

To add a Bookmark button In your site you need a Simple JavaScript file to be called in the header and you  have to add two lines of code in your single.php file. Follow the tutorial below

1.Create the JavaScript

Copy the following code  into notepad and save it as “bookmark.js”. This will create a JavaScript file in your computer. ( Note :You can give your JavaScript any name or can merge it with other JavaScript Files)

/**********  BOOKMARK SCRIPT STARTS **********/
function bookmarksite(title,url)
{ if (window.sidebar) // firefox 
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera 
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click(); }
else if(document.all)// ie 
external.AddFavorite(location.href, document.title) }
/**********  BOOKMARK SCRIPT ENDS **********/

After Creating the JavaScript file upload it in your server.Note The URL of the javascript. You will need it in the next step.

2.Call the JavaScript from Your Blog template

Paste the following Code anywhere before </head> in your Blog Template

<script type="text/javascript" src="your javaScript Url"></script>

For example :If your bookmark.js file is located at “http://www.yoursite.com/files/bookmark.js” you need to use the following code :

<script type="text/javascript" src="http://www.yoursite.com/files/bookmark.js">

</script>

3.Include The Bookmark Link In Your Template

If your Blog is on a WordPress platform Then copy and paste the following code in your Single.php file

<div class="bookmark">
    <!--[if IE]> 
    <a  rel=”nofollow” href="<?php the_permalink(); ?>" onclick="return external.AddFavorite(location.href, document.title)">Add to My Favorites!</a> 
    <![endif]-->
    <![if !IE]>
    <a rel="nofollow" href="javascript:bookmarksite('&lt;?php the_title(); ?>', '<?php the_permalink(); ?>')">Bookmark this Page</a>
    <![endif]>
</div>

Note : Do not copy directly in your HTML editor (e.g Dreamweaver.MS-Frontpage).Copy to Notepad first.

You can add Style parameters in your Style.css file by creating a new class (e.g .bookmark { } )

The above code displays “Bookmark this page” in Firefox and “Add to My favorites” in Internet Explorer. I Hope this Code will be useful to you.If you face any problems in installing this code please drop in your valuable comments.

  1. Reader Comments

  2. hi thanks for this post but i need to show a png or jpg image button on my blog and to link with that script can i do that if yes how?

    September 22nd, 2009
  3. @ceops: To do that In the third step add the following code :

    img src=”your image file URL”

    Just before the a tag.Hope you get it.

    Thanks

    September 22nd, 2009
  4. And how do you make this script fetch translations??

    February 5th, 2010

Add Your Comment

All Comments are Moderated.

YOUR COMMENT



About This Site

Ampercent is a technology blog on computer tutorials, software guides, how to tricks and web tools. The blog is updated daily and written by two computer science students from India. Read More »



Subscribe to RSS Feed

Join Our Community

Submit Product For Review

Want a Software or a product to be reviewed ? Tell us about it, we will do the rest.