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

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

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

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

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

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

埋め込み用HTMLを作成する

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

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にすることでフォロワー数を表示できます。

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

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

ではまた。

WordPressカスタマイズ入門に最適な書籍を執筆しました!

WordPress 5.x 対応!Gutenbergを使った投稿の作成方法からWordPressブログをかっこよくカスタマイズするためのポイントを紹介した書籍を執筆しました!

詳しく見る