JS 없는 가벼운 트위터 공유 버튼

트위터, 페이스북 공유 버튼이 많은 곳에 달려 있다.

그런데 만약 트위터와 페이스북이 제공하는 위젯을 사용해 이 버튼들을 달게 되면 사이트가 느려진다. 이런 공식 위젯은 트위터와 페이스북 도메인에 있는 복잡한 스크립트를 다운로드한다. 트위터와 페이스북에 방문자 정보를 넘겨 주는 역할도 하기 때문이다.

즉, 이런 공식 위젯은 제공하는 편의성에 비해 웹사이트 측이 손해다. 사이트도 느려지고 방문자 정보도 넘겨 주는 것이다.

그럼 어떻게 하는 게 좋을까? 해법은 간단하다. 그냥 링크로 처리하면 된다. target="_blank" 속성을 줘서 링크를 새 창에서 열리게 할 수도 있다. 새 창이 싫으면 JS 코드를 이용해서 window.open()으로 새 창에서 열면 된다.

우선 트위터 공유 버튼 만들기부터 살펴 본다.

트위터 공유 버튼 만들기

트위터 공유 버튼 만드는 게 신경쓸 게 제일 많다. 첫째, 문장을 URL에 넣어야 하기 때문이다. 둘째, 옵션을 줄 수 있는 게 많다.

트위터 공유 버튼은 기본적으로 다음과 같은 URL 형식을 가진다.

https://twitter.com/intent/tweet?original_referer={URL}&text={text}&url={URL}&via={twitter-ID}&related={twitter-ID}

2013년 12월 15일 현재 내 블로그의 트위터 공유 URL은 모두 저런 식으로 생겼다. 이 글의 트위터 공유 링크도 마찬가지다. 아래 링크를 클릭하면 내 블로그가 공유된다.

트위터로 ‘웹으로 말하기’ 공유

위 링크는 이렇게 생겼다.

https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fmytory.net&text=%EC%9B%B9%EC%9C%BC%EB%A1%9C%20%EB%A7%90%ED%95%98%EA%B8%B0&url=https%3A%2F%2Fmytory.net&via=mytory&related=mytory

%3A 같은 문자는 URL 인코딩이다. URL에서 특수문자와 한글 같은 비영문 문자를 깨지지 않고 처리할 수 있도록 변환한 것이다. PHP의 경우 urlencode() 함수를 사용해서 만든다. JS에서는 encodeURIComponent() 함수를 사용한다.

위 URL을 하나씩 분석해 보자.

일단 호출할 주소는 https://twitter.com/intent/tweet이다. 나머지는 매개변수다.

original_referer : 실제로 이 트윗을 하게 된 페이지를 말한다. 내 블로그의 글 같은 경우는 공유할 URL과 referer가 같지만, 글 목록에서 특정 글을 바로 트윗하는 경우엔 referer는 글 목록 페이지가 되고, 공유할 URL은 실제 글의 URL이 될 거다.
text : 트윗에 넣을 메시지
url : 공유 대상 URL
via : 이 URL 소유자의 트위터 아이디
related : 트윗하고 나서 팔로우하라고 추천할 트위터 아이디

더 자세한 내용은 Web Intents에서 보면 된다.

PHP에서 `http_build_query` 함수를 사용하면 편리하다

PHP를 사용한다면 http_build_query() 함수를 이용하자. urlencode()까지 알아서 처리해 주고, 코드가 배열로 깔끔하게 정리되니까 좋다. 아래처럼 사용한다.

<?php
$tweet_share_url_query_string = http_build_query(
    array(
        'text' => '웹으로 말하기',
        'url' => 'https://mytory.net',
        'via' => 'mytory',
        'related' => 'mytory',
    );
);
$tweet_share_url = "https://twitter.com/intent/tweet?" . $tweet_share_url_query_string;
?>
<a href="<?php echo $tweet_share_url ?>" target="_blank">트위터 공유</a>

그리 복잡하지 않다.

이 글은 ‘마법 나무’로 블로그 스킨을 갈면서 한 경험을 공유하는 글이다.