본문 바로가기

자료

마스토돈 공유버튼 만들기

추가: 마스토돈에서 web+mastodon:// 프로토콜이 빠질 예정이라는 걸 어디서 본 적이 있습니다. 나중에 안 될 수 있어요.

간단하게 안 돼요?


코드

티스토리 스킨의 게시글 부분 중 원하는 곳에 아래 코드를 붙여넣으세요.



<a href='#' style='padding: 0.5em; background-color: #2b90d9; overflow: hidden; display: inline-block; border-radius: 0.2em;' data-base='web+mastodon://share?text=' data-title='마스토돈 공유버튼 만들기' onclick="(function(e){console.dir(e.target);e.preventDefault(); var myhref = e.target.parentNode.getAttribute('data-base') + encodeURIComponent(e.target.parentNode.getAttribute('data-title') + ' ' + window.location); window.open(myhref, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); console.log(myhref); })(event)"><img style='height: 1em; width: 1em; display: inline-block;' src='data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MS4wNzY5NTRtbSIgaGVpZ2h0PSI2NS40NzgzMW1tIiB2aWV3Qm94PSIwIDAgMjE2LjQxNDQgMjMyLjAwOTc2Ij48cGF0aCBkPSJNMjExLjgwNzM0IDEzOS4wODc1Yy0zLjE4MTI1IDE2LjM2NjI1LTI4LjQ5MjUgMzQuMjc3NS01Ny41NjI1IDM3Ljc0ODc1LTE1LjE1ODc1IDEuODA4NzUtMzAuMDgzNzUgMy40NzEyNS00NS45OTg3NSAyLjc0MTI1LTI2LjAyNzUtMS4xOTI1LTQ2LjU2NS02LjIxMjUtNDYuNTY1LTYuMjEyNSAwIDIuNTMzNzUuMTU2MjUgNC45NDYyNS40Njg3NSA3LjIwMjUgMy4zODM3NSAyNS42ODYyNSAyNS40NyAyNy4yMjUgNDYuMzkxMjUgMjcuOTQyNSAyMS4xMTYyNS43MjI1IDM5LjkxODc1LTUuMjA2MjUgMzkuOTE4NzUtNS4yMDYyNWwuODY3NSAxOS4wOXMtMTQuNzcgNy45MzEyNS00MS4wODEyNSA5LjM5Yy0xNC41MDg3NS43OTc1LTMyLjUyMzc1LS4zNjUtNTMuNTA2MjUtNS45MTg3NUM5LjIzMjM0IDIxMy44MiAxLjQwNjA5IDE2NS4zMTEyNS4yMDg1OSAxMTYuMDkxMjVjLS4zNjUtMTQuNjEzNzUtLjE0LTI4LjM5Mzc1LS4xNC0zOS45MTg3NSAwLTUwLjMzIDMyLjk3NjI1LTY1LjA4MjUgMzIuOTc2MjUtNjUuMDgyNUM0OS42NzIzNCAzLjQ1Mzc1IDc4LjIwMzU5LjI0MjUgMTA3Ljg2NDg0IDBoLjcyODc1YzI5LjY2MTI1LjI0MjUgNTguMjExMjUgMy40NTM3NSA3NC44Mzc1IDExLjA5IDAgMCAzMi45NzUgMTQuNzUyNSAzMi45NzUgNjUuMDgyNSAwIDAgLjQxMzc1IDM3LjEzMzc1LTQuNTk4NzUgNjIuOTE1IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE3Ny41MDk4NCA4MC4wNzd2NjAuOTQxMjVoLTI0LjE0Mzc1di01OS4xNWMwLTEyLjQ2ODc1LTUuMjQ2MjUtMTguNzk3NS0xNS43NC0xOC43OTc1LTExLjYwMjUgMC0xNy40MTc1IDcuNTA3NS0xNy40MTc1IDIyLjM1MjV2MzIuMzc2MjVIOTYuMjA3MzRWODUuNDIzMjVjMC0xNC44NDUtNS44MTYyNS0yMi4zNTI1LTE3LjQxODc1LTIyLjM1MjUtMTAuNDkzNzUgMC0xNS43NCA2LjMyODc1LTE1Ljc0IDE4Ljc5NzV2NTkuMTVIMzguOTA0ODRWODAuMDc3YzAtMTIuNDU1IDMuMTcxMjUtMjIuMzUyNSA5LjU0MTI1LTI5LjY3NSA2LjU2ODc1LTcuMzIyNSAxNS4xNzEyNS0xMS4wNzYyNSAyNS44NS0xMS4wNzYyNSAxMi4zNTUgMCAyMS43MTEyNSA0Ljc0ODc1IDI3Ljg5NzUgMTQuMjQ3NWw2LjAxMzc1IDEwLjA4MTI1IDYuMDE1LTEwLjA4MTI1YzYuMTg1LTkuNDk4NzUgMTUuNTQxMjUtMTQuMjQ3NSAyNy44OTc1LTE0LjI0NzUgMTAuNjc3NSAwIDE5LjI4IDMuNzUzNzUgMjUuODUgMTEuMDc2MjUgNi4zNjg3NSA3LjMyMjUgOS41NCAxNy4yMiA5LjU0IDI5LjY3NSIgZmlsbD0iIzMwODhkNCIvPjwvc3ZnPg==' alt='Mastodon Share'> <span style="color: white; vertical-align: center;">공유하기</span></a>

미리보기


개요

마스토돈은 분산형 SNS입니다 (이 블로그 소개글). 트위터 같은 공유 버튼을 블로그에 달려면 어떻게 해야 할까요?

여러 방법이 있지만 정석인 방법으로는 다음 두 가지 버튼을 만들 수 있습니다.

  • 팔로우
  • 공유

어떻게 만들까요? 프로토콜이 web+mastodon:// 이면 됩니다.

  • 공유: web+mastodon://share?text=URL_인코딩된_공유할_텍스트
  • 팔로우: web+mastodon://follow?uri=계정명@도메인

아래와 같은 링크를 만들면

<a href="web+mastodon://share?text=Share%20button!%20-%20http://blog.sftblw.moe/1054">마스토돈에 공유하기</a>

↓ 이렇게 나옵니다.

마스토돈에 공유하기

클릭하면 이용중인 마스토돈 인스턴스가 있고 프로토콜로서 등록해놨다면 열 수 있습니다.