Twitter公式の「@yosiakatsukiさんをフォロー < xxxx人のフォロワー」みたいなボタンをブログに設置する方法のメモ書きです。
必ずしも公式ボタンを設置しておく必要はないと思いますが、Twitterっぽさを出すためには公式ボタンが一番です(個人的感想)
公式のフォローボタンを作る
それではTwitter公式のフォローボタンを作っていきましょう。
埋め込み用HTMLを作成する
フォローボタンは下記ページから作成できます。
![Twitter Publishからコードを作成する](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-01.png)
ページの真ん中に表示された入力欄にTwitterのプロフィールページのURLを入力します。
![作成するボタン種類を選択](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-02.png)
続いて、作成するボタンの種類を選択します。
フォローボタンを作りたい場合は「Twitter Buttons」を選びます。
![ボタン種類を選択](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-03.png)
更に細かくボタン種類の選択が表示されるのでフォローボタンであれば「Follow Button」を選びます。
![埋め込みHTMLコードをコピー](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-04.png)
HTMLが生成されるので「Copy Code」ボタンをクリックしてコピーします。
ブログに埋め込む
HTMLコードが作成できたら、ブログの表示したい部分にコピーしたHTMLを貼り付けます。
![HTMLを埋め込む](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-05.png)
WordPressの記事内に埋め込むのであればカスタムHTMLブロックを使ってコピーしたHTMLを貼り付ければOKです。
![フォローボタンが表示された](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-06.png)
フォローボタンが表示されました!
フォロワー数の表示
フォロワー数を表示したい場合は、コピーしたHTMLを一部書き換えます。
![data-show-countをtrueにする](https://yosiakatsuki.net/blog/wp-content/uploads/2019/09/twitter-follow-btn-07.png)
data-show-count
の指定をtrue
にすることでフォロワー数を表示できます。
フォロワー数も表示されました!
他にもボタン表示をカスタマイズする方法がありますが、今回はここまでということで…
ではまた。