Twitter公式のフォローボタンをブログに設置する方法

Twitter公式のフォローボタンをブログに設置する方法

2019.9.15

Twitter公式の「@yosiakatsukiさんをフォロー < xxxx人のフォロワー」みたいなボタンをブログに設置する方法のメモ書きです。

必ずしも公式ボタンを設置しておく必要はないと思いますが、Twitterっぽさを出すためには公式ボタンが一番です(個人的感想)

公式のフォローボタンを作る

それではTwitter公式のフォローボタンを作っていきましょう。

埋め込み用HTMLを作成する

フォローボタンは下記ページから作成できます。

publish.twitter.com
Twitter Publishからコードを作成する

ページの真ん中に表示された入力欄にTwitterのプロフィールページのURLを入力します。

作成するボタン種類を選択

続いて、作成するボタンの種類を選択します。

フォローボタンを作りたい場合は「Twitter Buttons」を選びます。

ボタン種類を選択

更に細かくボタン種類の選択が表示されるのでフォローボタンであれば「Follow Button」を選びます。

埋め込みHTMLコードをコピー

HTMLが生成されるので「Copy Code」ボタンをクリックしてコピーします。

ブログに埋め込む

HTMLコードが作成できたら、ブログの表示したい部分にコピーしたHTMLを貼り付けます。

HTMLを埋め込む

WordPressの記事内に埋め込むのであればカスタムHTMLブロックを使ってコピーしたHTMLを貼り付ければOKです。

フォローボタンが表示された

フォローボタンが表示されました!

フォロワー数の表示

フォロワー数を表示したい場合は、コピーしたHTMLを一部書き換えます。

data-show-countをtrueにする

data-show-countの指定をtrueにすることでフォロワー数を表示できます。

フォロワー数も表示されました!

他にもボタン表示をカスタマイズする方法がありますが、今回はここまでということで…

ではまた。