웹사이트나 블로그를 열람하다 보면 트윗 버튼이 설치되어 있는 것을 자주 볼 수 있을 것입니다.
트윗 버튼을 설치하고 있으면, 재미있다·다른 사람도 알았으면 좋겠다고 생각한 독자가 공유해 주는 등 사이트 운영자에게 있어서 메리트가 큽니다.
이 트윗 버튼을 완전 자력으로 설치하려면 HTML 응용 지식이 필요하지만 쉽게 설정할 수 있는 방법도 준비되어 있습니다.
이 기사에서는 간단하게 트윗 버튼을 설치하는 방법과 커스터마이즈에 대해 소개하겠습니다.
공식 사이트에서 작성하다
프로그래밍에 대해 잘 모르는 사람도 쉽게 트윗 버튼을 만드는 기능이 제공됩니다.
잘 모르는 경우 처음에는 이쪽을 사용하도록 합시다.
Twitter Publish 우선 Twitter Publish에 접속합니다.
Twitter Publish
[Twitter Buttons]를 클릭 조금 아래로 스크롤한 후 [Twitter Buttons]를 클릭합니다.
맨 왼쪽의 [Share Button]을 클릭하여 어떤 버튼을 추가할지 선택하는 화면에 표시되므로 맨 왼쪽의 [Share Button]을 클릭하십시오.
Tweet 버튼이 작성되면 Tweet 버튼이 생성됩니다.화면 중앙의 트윗 버튼을 누르면 작성한 트윗 버튼의 동작을 확인할 수 있습니다.
복사 완료 트윗 버튼을 표시하는 코드는 트윗 버튼 위의 텍스트 상자를 클릭하면 복사할 수 있습니다.
복사한 후 HTML로 버튼을 설치하고 싶은 장소에 붙여넣기하여 매립하십시오.
버튼이 제대로 작동하지 않고 붙여놓은 텍스트 그대로 나타난다면 HTML이 아닌 텍스트로 붙여버립니다.
HTML로 붙이는 방법은 사용하는 블로그 서비스에 따라 다르므로 각자 '서비스명 HTML모드', '서비스명 HTML붙이기'와 같이 검색하도록 하십시오.
트윗 버튼을 커스터마이징하다
공식 사이트에서 작성한 트윗 버튼은 최소한의 기능만 탑재되어 있습니다.
하지만 트윗 버튼 작성 페이지에서 커스터마이징이 가능하기 때문에 원하는 대로 트윗 동작을 커스터마이징할 수 있습니다.
트윗 버튼을 작성한 후 [set customization options] 를 클릭 커스터마이징 하려면 트윗 버튼을 작성한 후 [set customization options] 를 클릭합니다.
커스터마이즈 화면 트윗 버튼 작성 페이지에서의 커스터마이즈는 모두 이 화면에서 실시하기 때문에 기억해 둡시다.
변경사항을 저장할 때는 [업데이트]를 클릭.트윗 버튼의 동작을 미리 보려면 [업데이트] 버튼 아래에 있는 트윗 버튼을 클릭하십시오.
프리뷰 자체는 즉시 변경 내용이 적용되므로 변경 내용 체크 시마다 [업데이트]를 누를 필요가 없습니다.
트윗의 기본 텍스트를 설정하다
기본적으로 버튼을 클릭한 페이지의 URL과 페이지 제목만 표시되도록 되어 있습니다.
Do you want to prefill the Tweet text? 편집 이 페이지 제목 부분을 사용자 정의하고 싶다면 Do you want to prefill the Tweet text?를 편집합니다.
트윗 본문에 반영 좋아하는 텍스트를 설정했다면 트윗 본문에 반영되어 있을 것입니다.
트윗 본문에 계정을 추가하여 리플라이 형식으로 만들다
블로그 전용 계정 등 기사가 공유될 때마다 리플 형식으로 통지하고 싶을 때도 있을 것입니다.
"Would you like this Tweet to include your screen name?" 에 계정 ID를 입력 그런 경우 "Would you like this Tweet to include your screen name?" 에 계정 ID를 입력합니다.
트윗 말미에 '@00씨로부터'라는 텍스트가 추가되면 트윗 말미에 '@00씨로부터'라는 텍스트가 추가됩니다.
"@"붙여서 추가하면 둘 이상의 계정 설정 트윗 본문에 추가할 수 있는 계정을 하나까지인 것 같은데, 이렇게 "@"붙여서 추가하면 둘 이상의 계정 설정이 가능합니다.
해시태그를 추가하다
해시태그 추가도 간단합니다.
"Would you like to set a hashtag for the Tweet?" 에 해시태그 텍스트를 입력 "Would you like to set a hashtag for the Tweet?" 에 해시태그 텍스트를 입력합니다.
트윗 버튼 말미에 해시태그가 추가되어 있는 해시태그 텍스트를 추가 후 트윗 버튼을 미리 보면 트윗 버튼 말미에 해시태그가 추가되어 있을 것입니다.
이쪽도 언뜻 보면 하나밖에 해시태그를 설정할 수 없는 것처럼 보이지만, 스페이스로 구분해서 추가하면 2개 이상의 해시태그를 등록할 수 있습니다.
2개 이상 해시태그를 설정 2개 이상 해시태그를 설정하는 경우는 「#」를 붙여 잊지 않도록 합니다.
트윗 후에 표시할 추천 계정을 설정하다
추천 사용자가 표시 트윗 버튼에서 트윗을 하면 추천 사용자가 표시되도록 되어 있습니다.
표시되는 추천 사용자도 커스터마이징 할 수 있습니다.
"Do you want to recommend accounts?" 아래 텍스트 상자에서 계정 ID를 입력 "Do you want to recommend accounts?" 아래 텍스트 상자에서 계정 ID를 입력하면 2 계정까지 추천 표시하는 계정을 제어할 수 있습니다.
추천 계정이 보기 시험삼아 트윗 버튼에서 트윗을 해보세요.이렇게 추천 계정이 뜰 겁니다.
트윗할 계정이 '@00씨로부터'의 '@0000'을 팔로우하지 않은 경우 해당 계정과 첫 번째로 지정한 추천 계정이 표시됩니다.
두 번째로 지정한 추천 계정은 '@00씨로부터'의 '@0000'을 팔로우하고 있는 경우에만 표시되는 구조입니다.
그래서 우선순위가 높은 것을 첫 번째로.@000씨로부터를 팔로우 하고 있는 전제로 표시하는 추천 계정은 두 번째로 설정하도록 합시다.
큰 단추로 변경하다
기본 트윗 버튼은 매우 작은 기본 트윗 버튼은 매우 작으며 사이트에 맞지 않을 수도 있습니다.
'How would you like the button displayed?'의 'Large Button'에 치익을 넣을 때는 'How would you like the button displayed?'의 'Large Button'에 치익을 넣으면 버튼이 조금 커집니다.
커진 단추 커진 단추
CSS 지식이 없어도 크게 할 수 있으므로 버튼을 조금 크게 하고 싶다면 [Large Button]에 체크를 하도록 합시다.
버튼 디자인을 맞춤 제작하다
트윗 버튼의 외형을 오리지널로 하고 싶은 경우는, CSS를 편집하는 것으로 실시할 수 있습니다만, 트윗 버튼의 사양상, 다소 상급자 전용의 방법입니다.
이 방법은 공식 사이트의 트윗 버튼 작성 기능은 사용할 수 없고 직접 HTML을 박아 작성하게 됩니다.
HTML 태그라고 하는 것도 트윗 버튼 작성 페이지에서 작성한 HTML은 단지 a 태그의 하이퍼링크이지만 페이지가 읽힐 때 자동으로 iframe 태그에 둘러싸인 요소로 변환됩니다.
이것이 상당한 쓰레기로, iframe내의 요소는 CSS만으로는 편집할 수 없습니다.
그렇기 때문에, 자기 부담으로 트윗 버튼용 HTML을 작성할 필요가 있는 것입니다.
오리지널 트윗 버튼의 HTML 병아리 모양은 이 코드입니다.
적절하게 페이지 URL이나 텍스트를 설정하는 경우 URL 파라미터에 대한 이해도 필요합니다.「text=」의 뒤에 트윗 본문에 지정하는 텍스트를, 「url=」의 뒤에 트윗할 페이지 URL을 지정합니다.
버튼 디자인을 커스터마이징하기만 하면 간단하지만 실제로 하려면 이전 준비 단계에서 상당히 어려우니 주의하세요.
또, 이 방법의 경우는 페이지 제목이나 URL을 자동 취득해 주지 않기 때문에 자동 취득하는 프로그램을 포함해야 합니다.
안되면 기본 버튼으로 참거나 별도 SNS 버튼을 삽입할 수 있는 애드온 플러그인 등의 도입을 해보는 것이 좋습니다.
트윗 버튼의 실체는 단지 a태그일 뿐이므로 여기까지의 이해가 따라잡히면 자유롭게 커스터마이징 가능합니다.
이처럼 디자인 커스터마이징 자체는 간단하지만 트윗 버튼으로서의 기능을 갖게 하기 어렵기 때문에 잘 모르면 섣불리 만지지 않는 것이 좋습니다.
정리
이번에는 웹사이트나 블로그에 트윗 버튼을 설치하는 방법을 소개했습니다.
트윗 버튼을 설치하는 것 뿐이라면 매우 간단한 것 외에 공유용 쉐어 버튼으로도 활약하기 때문에 SNS 계열의 버튼을 하나도 설치하지 않은 경우에는 시험 삼아 트윗 버튼을 설치해 보는 것이 좋습니다.