[Javascript] 즐겨찾기 소스

자바스크립트로 만든 즐겨찾기 추가 소스(javascript bookmark)

블로그나 홈페이지를 만들다 보면 링크를 클릭하면 웹브라우저의 즐겨찾기에 추가할 수 있는 스크립트 소스가 필요할 때가 있어 이렇게 포스팅해 봅니다. 

다른 여러 사이트를 찾아봤지만 일반적으로 모든 브라우저에 적용되지 않아서 모든 브라우저(인터넷익스플로러, 크롬, 파이어폭스, 오페라등)에서 쓸 수 있는 스크립트가 별로 없더라구요. 아래와 같이 하면 대부분의 브라우저에서 즐겨찾기에 추가할 수 있습니다.

소스 보기

오른쪽 상단의 첫번째 버튼을 누르시면 소스를 복사하실 수 있으니 복사해서 사용하세요^^

아래의 파일을 다운로드 하셔도 됩니다.

위의 자바스크립트 소스 부분은 그냥 붙여넣기해서 사용하시면 되구요.


bookmark.html

bookmarksite()함수는 아래와 같이 사용하시면 됩니다.

function bookmarksite(title, url)
title : 추가할 사이트의 이름
        예를 들어 내가 자주 가는 쇼핑몰 .. 이런 형태로 지정해 줄 수 있는거죠.
url : 추가할 사이트의 즐겨찾기 주소
        즐겨찾는 사이트의 주소(URL)을 의미합니다.

<script type="text/javascript"> 

function bookmarksite(title,url) { 
   // Internet Explorer
   if(document.all)
   {
       window.external.AddFavorite(url, title); 
   }
   // Google Chrome
   else if(window.chrome){
      alert("Ctrl+D키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");
   }
   // Firefox
   else if (window.sidebar) // firefox 
   {
       window.sidebar.addPanel(title, url, ""); 
   }
   // Opera
   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(); 
   }
} 
</script>

<a href="javascript:bookmarksite('타이틀', 'http://www.jynote.net')">즐겨찾기 추가하기</a>

실행한 화면

인터넷 익스플로러

인터넷 익스플로러에서 실행한 화면입니다. 

아래의 화면에서 즐겨찾기 추가하기 버튼을 클릭하면 아래와 같은 화면을 보실 수 있습니다. 

추가 버튼을 누르면 즐겨찾기에 추가됩니다.

Google Chrome 실행화면

Google Chrome는 다른 웹브라우저와 다르게 자바스크립트 함수를 통한 즐겨찾기를 지원하지 않습니다.
Google Chrome에서 특정 사이트를 즐겨찾기에 등록하려면 Ctrl + D 키를 이용하여 등록이 가능합니다.

포스팅을 마치며

즐겨찾기 등록을 해야할 일이 있어 스크립트 소스를 찾아보니 인터넷 익스플로러 전용으로 올려놓은 글이 많아서 자료를 정리해서 포스팅을 하게 되었습니다.

하지만 오페라에서 최신 버전은 위의 스크립트 소스로는 안되더라구요. 그래서 오페라 공식 홈페이지에서도 찾아보았지만 제가 까막눈이어서 그런지 찾지는 못했네요.

혹시라도 찾으신 분이 있다면 댓글 부탁드립니다.