내 서비스에 단축 URL 기능 직접 넣기 — 스크립트 한 줄로 임베딩하는 방법

"우리 사이트에서 바로 만들 수 있으면 좋겠는데"

쇼핑몰을 운영하다 보면 이런 순간이 옵니다. 신상품을 등록했는데, 마케터가 카카오톡에 공유하려고 FINGERPUSH.LINK 콘솔을 따로 열어서 URL을 복사해 붙여넣고, 다시 상품 페이지로 돌아오는 과정을 반복합니다.

"어차피 우리 사이트에서 제품 올리는데, 여기서 바로 단축 URL 만들 수 없어?"

가능합니다. 그것도 백엔드 개발 없이.

어떻게 작동하는 건가요?

FINGERPUSH.LINK는 플러그인 SDK라는 기능을 제공합니다. 자바스크립트 파일 하나를 사이트에 심어두면, 그 사이트 안에서 버튼 하나로 단축 URL을 만들 수 있게 됩니다.

Facebook 좋아요 버튼이나 Disqus 댓글 위젯처럼, 스크립트 태그 한 줄이면 됩니다. 우리(FINGERPUSH.LINK) 서버에서 API와 인증을 모두 처리하기 때문에 여러분 서버에는 아무것도 추가할 필요가 없습니다.

<!-- 사이트 </body> 앞에 이것만 추가 -->
<script src="https://fplink.net/sdk/v1/fplink-shorturl-plugin.js"
        data-client-id="YOUR_CLIENT_ID"></script>

실제로 어떻게 쓰이나요?

시나리오 1 — 쇼핑몰 상품 페이지

상품 상세 페이지 오른쪽에 "이 상품 링크 공유하기" 버튼이 있다고 상상해보세요. 클릭하면 그 페이지의 단축 URL이 즉시 클립보드에 복사됩니다. 고객은 카카오톡에 바로 붙여넣을 수 있습니다.

<button data-fplink="copy">이 상품 공유하기</button>

data-fplink="copy" 속성 하나면 됩니다. data-url을 생략하면 현재 페이지 URL을 자동으로 단축합니다.

▲ 공유 버튼 클릭 시 즉시 클립보드에 복사

시나리오 2 — 내부 관리자 페이지

"콘텐츠 등록 시 단축 URL도 같이 저장하고 싶다"는 요구가 생겼을 때, 기존 폼에 data-fplink="form" 속성만 추가하면 됩니다. 폼을 제출하면 URL 필드가 자동으로 단축 URL로 교체됩니다.

<form data-fplink="form" action="/admin/content/save" method="post">
    <input type="url" name="originUrl" placeholder="https://example.com/long-path">
    <button type="submit">저장</button>
</form>

저장 버튼을 누르는 순간 단축 URL이 DB에 들어갑니다. 별도 단계가 없습니다.

▲ 저장 시 originUrl 필드가 자동으로 단축 URL로 교체

시나리오 3 — 뉴스·블로그 기사 공유

기사 하단에 "공유하기" 버튼이 있고, 클릭하면 카카오톡·클립보드·링크복사 옵션이 드롭다운으로 펼쳐지면 어떨까요? data-fplink="dropdown" 하나로 구현됩니다.

▲ 드롭다운 펼쳐진 상태 — 카카오톡 공유는 커스텀 메뉴로 추가

카카오톡 공유 같은 커스텀 메뉴는 JavaScript 한 줄로 추가합니다:

FPLink.addMenu('kakao', '💬 카카오톡 공유', function(shortUrl) {
    Kakao.Share.sendDefault({ objectType: 'feed', content: { webUrl: shortUrl } });
});

시나리오 4 — 마케터가 직접 쓰는 툴 페이지

개발자 없이 마케터가 URL을 직접 단축해야 한다면, 사내 도구 페이지에 인라인 위젯을 붙입니다. URL 입력창과 단축 버튼, 복사 기능까지 한 번에 생성됩니다.

<div data-fplink="inline"
     data-placeholder="캠페인 URL을 입력하세요"
     data-label="단축하기"></div>

이 위젯은 서비스 신청한 도메인에서만 작동하므로, 외부에서 무단으로 사용할 수 없습니다.

▲ 사내 도구에 임베딩된 인라인 단축 위젯

클릭 데이터는 어디서 보나요?

플러그인을 통해 생성된 단축 URL도 FINGERPUSH.LINK 콘솔에 동일하게 기록됩니다. 누가 언제 어디서 클릭했는지, 디바이스는 무엇인지 — 일반 단축 URL과 동일한 통계를 볼 수 있습니다.

Google Analytics와 연동하고 싶다면, SDK가 단축 성공 시 DOM 이벤트를 발행하기 때문에 이벤트를 받아서 gtag()에 넘기면 됩니다.

개발자가 없어도 되나요?

거의 그렇습니다. HTML 파일을 수정할 수 있는 정도면 충분합니다. WordPress 같은 CMS를 쓴다면 테마 편집기에서 </body> 앞에 스크립트를 추가하고, 원하는 버튼에 data-fplink 속성을 붙이면 됩니다.

단, 로그인한 사용자 정보를 SDK에 전달하거나, React·Vue 같은 SPA에서 동적으로 처리해야 한다면 간단한 JavaScript 작업이 필요합니다.