[HTML/PHP] 트위터 공유 버튼 만들기

HTML 과 PHP 를 이용해 아주 간단하게 자신의 사이트나 블로그 글의 공유 버튼을 만드는 방법을 알아봅시다.

트위터 공유버튼

트위터 디벨로퍼스의 자료를 참고해보면 트위터는 아래와 같은 구성으로 간단히 a 태그를 이용해 공유 버튼을 만들 수 있도록 만들어 두었습니다.

 <a href="https://twitter.com/intent/tweet?text=(트윗 본문 글 내용)&url=(공유할 페이지의 url)&hashtags=(본문에 넣고 싶은 해시태그)&via=(공유할 내용 작성자의 트위터 ID)" target="_blank">Share this on Twitter</a>

위 코드를 공유하고자 하는 어떤 페이지에 배치하면 Share this on Twitter 라는 링크가 생성됩니다. 사이트 방문자는 공유하고 싶은 페이지에서 이 공유버튼을 누르면 트위터로 연결되는 새창이 열리면서 해당 글을 공유 할 수 있게 되는 것이죠.

실전 예제

자, 그러면 위와 같은 링크 구조를 이용해서 실전에서 어떻게 공유하기 버튼을 만드는지 알아봅시다.

PHP 를 이용해 워드프레스 블로그에서 트위터로 공유하기 버튼을 만드는 예제입니다.

<?
    echo '<a href="https://twitter.com/intent/tweet?' 
       . 'text=' . rawurlencode( get_the_title() ) 
       . '&url=' . urlencode( get_permalink() )
       . '" target="_blank">Share this on Twitter</a>';
?>

text 와 url 파라미터만 넣은 예제입니다. hashtags 나 via 파라미터를 넣고 싶다면 얼마든지 추가하면 되겠죠?

text 파라미터의 값은 워드프레스 엔진의 get_the_title 함수를 이용해 특정 포스트의 제목으로 설정합니다. 대신 이 과정에서 포스트의 제목을 url 의 형식과 맞춰줘야 하기 때문에 PHP 함수인 rawurlencode 함수를 이용해 형식을 변환해줍니다. 그래야 공백이나 한글이 url 형식으로 잘 변환됩니다.

url 파라미터는 워드프레스 함수인 get_permalink 함수를 이용해 설정합니다. 여기서도 마찬가지로 적절한 url 형식으로의 변환을 위해 urlencode 함수를 이용합니다. 만약 형식을 변환해주지 않는다면 한글이 그대로 url 주소로 들어가 트위터가 제대로 인식하지 못하는 상황이 벌어질 수 있습니다.

Share this on Twitter 에는 본인 환경에 맞게 적절히 아이콘을 넣든 텍스트를 넣든 하면됩니다.

hashtags 파라미터에는 띄어쓰기 없이 각 해시태그 앞에 # 만 넣어주면 트위터에서 알아서 해시태그로 잘 전환해줍니다.

via 파라미터에는 트위터 ID를 @ 기호 없이 넣어주면 역시 트위터가 알아서 본문에 잘 표시해줍니다.

아주 간단하죠?

참고자료

• Tweet button, Twitter Developers