How to Add Favorite/Bookmark Button to Blogger - 2 ways

Adding a Cross-Browser compatible 'Add to Favorites' or 'Bookmark this Site' button to Blogger sites for easy Social Bookmarking

• Javascript based Favorite/Bookmark Button
• External Bookmarking Service

One of the coolest inventions on the web apart from the tremendously increasing information via blogs and websites is ability of the readers to follow their favorite food blogs, technology trends, viral videos and lots of helpful educational material available online that makes life a lot easier when compared to age without Internet,

but due to the tremendously increasing Social Media and availability of several awesome guides and How to's on the same topic it creates a Information overload scenario due to limited time and social media distractions in such a case the single most powerful tool that comes to once's rescue is the bookmark or add to favorites button available under various names for various popular browsers like Google Chrome, Internet Explorer,Safari, Firefox, Opera, etc.

Adding a Bookmark button ensures that readers see it bookmark it and keep coming back to the same info as it's readily available to them via their browsers. In this how to you will learn how to add a Favorite/bookmark button to your websites and blogs in 2 simple ways.

Instructions to Follow:

1. Adding Favorite/Bookmark Button using Javascript

   In this method we will add a cross-browser compatible add to favorites/bookmark this site button script to your blogger articles or site pages which will work without slowing down your site and will degrade gracefully in Javascript disabled websites as well.
   
   Start by adding the below script just above your </body> tag in your blogger template.

   <script type="text/javascript">
       $(function() {
           $("#bookmarkme").click(function() {
               // Mozilla Firefox Bookmark
               if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                   window.sidebar.addPanel(location.href,document.title,"");
               } else if( /*@cc_on!@*/false) { // IE Favorite script via geniushowto.blogspot.com @Nell
                   window.external.AddFavorite(location.href,document.title); 
               } else { // webkit - safari/chrome
                   alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
               }
           });
       });
   </script>
   

   Since the above script is written in Jquery you will need to have Jquery enabled on your website or blog and if you haven't then you can
   
   enable Jquery by adding the below code just above your </head> section of blogger template.

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   

   Now it's time to place the bookmark or favorite button to your blog which you can do by adding the below code wherever you want the bookmark button to display on your site like below the title or in footer of the article.

   <a style="{color:white}:link {color: white}:visited {color:white}:hover {color:white}:active{color:white};text-decoration: none;" id="bookmarkme" href="#" rel="sidebar" title="Bookmark this page or Add to Your Favorites"><div style="background:rgba(0,156,255,.8);height:70px;width:235px;padding:1px;"><div style="background:url(http://i.imgur.com/s2lEgSh.png) no-repeat;width:64px;height:64px;float:left;"></div><div style="font-size:25px;padding:4px 0 4px 0;color:white;text-shadow:1px 2px rgba(0,0,0,.6);">Bookmark this Page </div></div></a>
   

   You can customize the "Bookmark text and title" as displayed in green and Red in the above code according your desire. You can see a live demo of the bookmark button below:
   
   

   Bookmark this Page

2. Adding Favorite/Bookmark Button using External Bookmarking Services

   External Social Bookmarking services are great as they come with lots of social bookmarking services like Digg,delicious and more apart from social sharing platforms like Facebook,Google+,Pinterest and Twitter.
   
   These social media bookmarking widgets also consist of a Add to favorites or simple bookmark buttons which do the similar function as that of the method-1. You can try Addthis which has a cool bookmarking button and comes with more than a million customizable social share icons. You can see a demo below:
   Similarly you can try other external Social Sharing Services to include the bookmarking feature within your site but it has a demerit as well which you can read in the ending paragraph of this article.

You might be wondering about the demerit Method-2 has in using external bookmarking services and the demerit is nothing but slowed down pagespeed of your blog due to inclusion of external Javascript file which is very minimal in case of Method-1 but it has a solution as well to avoid slowing down of your webpages.

It's simple defer loading of external Javascript files which will load your external scripts only after whole page has loaded reducing burden of loading external JS while your whole page loads normally.

Usually external social Bookmarking services include several services compiled together as a result they take time to load due to big file size. In either way these buttons help readers to bookmark their favorite pages with ease while it's a win win situation for bloggers and other website developers in terms of returning readers.