쇼핑몰 상세페이지 bitly v4 api 로 짧게 줄여서 공유하기

 

공유하기를 눌렀을때 링크가 너무 길어서 당황... ;;  그래서 줄이는 방법을 찾아달라고 하심. 

 

 

글제목 바로 아랫부분에 있는 쇼설매체 아이콘을 누르면 공유하기가 가능하도록 url를 주는데 

카테고리 이름이 한글이 가능하다보니 링크가 저렇게 길어짐.. 그래서 이걸 한번에 줄일 수 있도록 bitly api를 사용하기로하였음..

 

 

우선 bitly api를 사용하기 위해서는 

가입시에 쇼설로그인 X 홈페이지 가입을 해야한다. 

혹시 google 아이디로 이미 가입을 한 사람의 경우에는 

setting에서 본인 비밀번호를 재설정 하면 

bitly에서만 사용하는 비밀번호가 설정이 된다. 

 

 

api를 사용하기 위해서는 gmail 등의 호스팅이름이 검증이 된 사이트만 가능한데, 

사내메일의 경우는 bitly서비스는 이용이 가능하지만 api호출을 가능하게 하는 acccess token발행이 불가능하다. 

 

회사용 gmail.com 을 따로 만들어서 작업을 하였다. 

 

 

bitly의 api사이트는 참으로 자세히 나와있으므로 읽어보면되는데 영어다..ㅎㅎ

 

 

그리고 cafe24 관리자 페이지에서 html, css, javascript를 고칠 수 있는데 

jquery의 경우 1.4.4 버전을 공통으로 하고있다. 

 

Ajax로 bitly api를 호출하여 short url을 생성함으로써 해당 부분을 처리하였다. 

 

function fn_bitly(longUrl){
    console.log("longUrl :" + longUrl);
    var shortUrl = "";
    var sBit_APIAuthCD = "{{ 본인권한코드 }}";
    var sBit_LongUrl = longUrl;
    
    if(longUrl != ""){
        
        var jsonData = { "long_url":sBit_LongUrl, "domain":"bit.ly", "group_guid":"{{ guid 따로 발급받아야함 }}" };
        
        $.ajax(
            {
            url : "https://api-ssl.bitly.com/v4/shorten",
            contentType: "application/json",
            type : "POST",
            async: false,
            beforeSend : function(xhr){
                xhr.setRequestHeader("Authorization", "Bearer "+sBit_APIAuthCD);
            },
            data: JSON.stringify(jsonData),
            success : function(data){
                //console.log("success : " + data);
                console.log("success : " + JSON.stringify(data));
                console.log("link : " + JSON.stringify(data.link));
                console.log("data.link : " + data.link);
                shortUrl = data.link;
            },
            error: function(xhr, status, error){
                console.log("xhr : " + xhr);
                console.log("status : " + status);
                console.log("error : " + error);
            }
	    });
    }
    console.log("shortUrl:" + shortUrl);
    return shortUrl;
}

 

group_guid 또 따로 발급을 받아야한다. 

 

 

https://api-ssl.bitly.com/v4/groups을 호출하면서 홈페이지에서 발급받은 access token 을 발급한것을 hearder에 담아 

get으로 호출하면 body에 guid가 나오게된다. 

 

{
    "groups": [
        {
            "created": "2022-03-10T02:34:25+0000",
            "modified": "2022-03-10T02:34:25+0000",
            "bsds": [],
            "guid": "{{ 여기에있는정보를 써워야함 }}",
            "organization_guid": "{{ organization_guid }}",
            "name": "{{ name }}",
            "is_active": true,
            "role": "org-admin",
            "references": {
                "organization": "https://api-ssl.bitly.com/v4/organizations/{{ organization_guid }}"
            }
        }
    ]
}

 

 

이러한 방식으로 POST로 호출을 보내면 답은 이거처럼 온다. 

{
    "created_at": "2022-03-10T04:19:52+0000",
    "id": "bit.ly/3MDVQdS",
    "link": "https://bit.ly/3MDVQdS",
    "custom_bitlinks": [],
    "long_url": "https://goodbuymarket.co.kr/product/어글어글-전북-순창-친환경-딸기-우유껌-50g/796/category/77/display/1/",
    "archived": false,
    "tags": [],
    "deeplinks": [],
    "references": {
        "group": "https://api-ssl.bitly.com/v4/groups/{{ 발급ID }}"
    }
}