Gatsby에 Twitter 멘션 버튼 포함

Twitter 공유 버튼에 대해서는 잘 나오지만, 멘션 버튼의 경우의 방법이 좀처럼 발견되지 않는다. 팔로워 수를 표시하고 싶었을 뿐이므로 우선 팔로우 버튼으로 어떻게 든 비망록.

멘션 버튼↓

먼저 플러그인 설치

$ npm install --save gatsby-plugin-twitter

gatsby-config.js

gatsby-config.js에 다음과 같이 설명.

・・・略・・・
    plugins: [
      `gatsby-plugin-twitter`,   // ← 追記
      `gatsby-plugin-react-helmet`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images`,
        },
      },
・・・略・・・

Twitter 사이트에서 내장 코드 생성

htps : // 푸bぃsh. 라고 r. 이 m/# 에 간다.


Enter your Twitter URL에 트위터 계정의 URL을 입력하여 엔터


Twitter 버튼을 클릭


Mention Button 클릭


Copy Code를 클릭하여 포함 코드를 복사합니다.

코드 편집

복사한 코드는 다음과 같지만.

<a href="https://twitter.com/intent/tweet?screen_name=xxxxxxjapan&ref_src=twxxxxxxfw" class="twitter-mention-button" data-show-count="false">
Tweet to @xxxxxxxapan</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

다음과 같이 편집한다.

<div class="twitter">
 <a href="https://twitter.com/xxxxxxapan?ref_src=twxxxxxfw" class="twitter-follow-button" data-show-count="true" data-lang="ja"></a>
　{<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>}
</div>

div 태그는 span이나 p일 수 있다.
href URL은 보시다시피.
class="twitter-mention-button"이라고 왠지 표시되지 않는다. class="twitter-follow-button"으로 변경.
팔로워 수를 표시하고 싶기 때문에 data-show-count를 "true"로.
일본어화를 위해 data-lang="ko"를 추가.
스크립트 부분은 {}로 둘러싸고 그대로 copipe.

index.js 등에 복사

포함하려는 페이지의 HTML을 작성하는 경우, 예를 들어 index.js이면

const IndexPage = () => (
  <Layout>
　　ここ
  </Layout>
)

여기, 어디에나 좋기 때문에 사본.

이렇게 된 ↓

홍보

microCMS는 제외하고, Gatsby의 기본과 node API의 취급에 대해서 밟아 해설·핸즈온 한 전자 서적을 상급했으므로, 좋으면 손에 들여 보세요.

JAMStack을 배우자 Gatsby, React bootstrap, Netlify로 만드는 기업 사이트: 더 이상 렌탈 서버 필요 없음 Gatsby와 microCMS를 조합한 기업 사이트 작성 절차를 해설 핸즈온한 속편을 상처했습니다. 아무쪼록 손에 들여보세요.
JAMStack을 배우자 Gatsby와 microCMS로 만드는 기업 사이트 ~WordPress는 이미 오래된~