[Telegram] 텔레그램 공유하기 버튼 만들기

문제

워드프레스 테마를 만들면서 포스트의 [[공유하기 버튼]]도 직접 만들어 사용해보자라는 욕심이 생겼고, 제가 최근에 카카오톡과 함께 가장 많이 사용하고 있는 [[텔레그램]] 메신저도 공유하기 버튼을 만들수 있을까라는 의문이 생겼습니다.

그런데 의외로 문제는 쉽게 해결 되었습니다. 텔레그램이 아주 간편하게 [[공유하기]] 기능을 [[url]] 하나로 제공하고 있었네요.

솔루션

아래와 같이 앵커 태그 하나로 텔레그램 공유하기 버튼은 완성됩니다.

<a href="https://telegram.me/share/url?url=(포스트 url)&text=(메시지 내용)">
    Share on Telegram
</a>

샘플로 보여드리기 위해서 위와 같이 가상의 코드를 만들어 보았습니다.

사용자가 위 코드로 만들어진 링크를 클릭하면 자동으로 텔레그램 공유하기 페이지로 연결 되면서 텔레그램 웹 또는 앱에서 공유할 수 있습니다.

포스트 url

[[url]] 의 파라미터 중 포스트 url 부분은 공유하려고 하는 웹페이지의 주소를 넣어줍니다. 워드프레스 기준으로는 [[get_permalink]] 함수가 반환하는 값을 넣어주면 됩니다.

포스트 제목

url 의 파라미터 중 메시지 내용은 실제로 공유하는 메시지에 들어갈 내용을 넣으면 됩니다. 제 경우는 포스트의 제목을 넣기 위해 [[get_the_title]] 함수의 반환 값으로 설정하였습니다.

포스트 제목이 아니라 내용 중 일부를 넣고 싶다면 [[get_the_excerpt]] 함수를 사용해도 되겠네요.

링크 텍스트

위 예시에서는 “Share on Telegram” 이라는 이름으로 링크를 만들었는데요. 여기에 원하는 텍스트를 넣거나 img 태그를 사용해 그림으로 대체해도 되겠네요.

완성형 코드

위 내용을 반영한 실전 예제는 아래와 같습니다.

<a href="https://telegram.me/share/url?url=<? echo get_permalink(); ?>&text=<? echo get_the_title(); ?>">
    Share on Telegram
</a>

무겁고 불필요한 스크립트를 연결한다거나 그런 작업이 필요 없기에 아주 간단하게 텔레그램 공유하기 버튼을 만들 수 있어서 좋네요.