그냥 개발자 블로그

bookmark.js - 스마트폰으로 홈페이지 방문시 바탕화면에서 바로가기 아이콘 자동추가 본문

소식/플러그인소식

bookmark.js - 스마트폰으로 홈페이지 방문시 바탕화면에서 바로가기 아이콘 자동추가

마음이파파 2017. 2. 19. 02:12




스마트폰으로 홈페이지(쇼핑몰) 방문시 바탕화면에 바로가기 아이콘이 자동으로 생성되게 도와주는 플러그인 입니다.


bookmark.js 플러그인은 워크식스에서 다운로드 받을수 있으며, 기본 설치 방법은 아래와 같습니다.




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            
url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

3. 원하는 페이지에 플러그인이 실행될 수 있도록 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

4. 홈 화면에 생성된 아이콘을 클릭하였을때 오픈할 페이지 주소를 작성합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

5. 홈 화면에 생성될 아이콘 이미지가 있는 주소를 입력 합니다. 도메인은 4번에서 설정한 url과 같아야 합니다. (다운로드 하시면 아이콘 만들기 PSD 가 있습니다.)

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

6. 홈 화면에 생성된 아이콘의 이름을 설정 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bookmark.js"></script>
<script>
    $(function(){
        $(document).bookmark({
            url : "http://work6.kr",

            icon : "http://work6.kr/img/bookmark.png",

            icon_name : "워크식스",

            key : "work6"
        });
    });
</script>

 

7. 자신의 홈페이지(또는 쇼핑몰)을 상징하는 영문명을 작성 합니다. 특수문자와 띄어쓰기를 포함할 수 없습니다. 




플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.




※ 안드로이드 폰에서 네이버앱을 통해 접속 했을때 동작하며, 폰의 기종에 따라 동작하지 않을수도 있습니다.


2019/02/12 - [IT] - 크롬으로 쉽게 안드로이드 어플 만들기