今回の記録は「ブログやサイトにX（Twitter）のフォローボタンを表示する方法」です。X（Twitter）は右往左往していますが今のところは情報検索や情報提供などに多く使われるSNSなのでブログでも使えるころは無いかと調べていたところ辿りつきました。ほんとはタイムラインの埋め込みをしてみたかったのですがこの記録を記載している2023年8月4日現在、度重なるX社の仕様変更の影響でタイムラインの埋め込みは可能ですが表示がされない状態が7月頭から続いているようです。仕様の復帰に期待しつつ手順はほぼ同じだったので今できるフォローボタンを表示してみました。
Twitter Publishを使ってボタンを作っていきます
フォローボタンはTwitter Publishで簡単に作成できます。ページに入りとフォローボタンを作りたいX（Twitter）アカウントのURLを入力します。
X（Twitter）アカウントのURLの調べ方
X（Twitter）のアカウント名やユーザー名はホームに表示されているので確認できますがアカウントのURLはあまり使うことも無くいざ聞かれると「？」ってなると思います。
アカウントのURLは、「https://twitter.com/」の後にユーザー名を入力します。ユーザー名はホーム画面の名前の下に表示されている「＠〜」の「＠」を省いた部分です。
私の場合名前が「まとねっと」がアカウント名で「＠mato_net」がユーザー名になるので「https://twitter.com/mato_net」と入力します。
タイムラインかボタンかを選択
URLを入力するとこのような画面になるのでタイムラインを作るかボタンを作るかを選びます。今回はボタンを作るので右側を選びます。冒頭にも記載しましたが現在タイムラインは作れるけど表示されない状態になっています。
フォローボタンかメンションボタンかを選択する
続いてこの画面、今回はフォローボタン（Follow Button）を作るので左側を選びます。右側のMention Buttonは直接返信ができるボタンが作れます。
あとはコードをコピーしてブログなどに貼り付けるだけでOKです
ボタンの選択を終えるとこの画面になります。ここはコードをコピーする画面なので生成されたコードをコピーしてあとはブログのお好みの箇所に貼り付けるだけです。ちなみにWordPressブログではウェジェットのカスタムURLを使って簡単に表示できます。また、このコードをコピーする画面から簡単なカスタマイズ画面に移動できます。
カスタム画面
画像右上の赤線部分からカスタム画面へ移動できます。
画面上から、
Hide Usename チェックを入れるとボタンからユーザー名が消えて「Follow」のみの表示になります。
Large Button チェックを入れるとボタンが心なしか大きく表示されるようになります。
次の選択欄は言語選択なので「Automatic」のままでOKかと思います。最後の「Opt-out of…」はチェックを入れるとユーザーの行動をTwitterに送信するのを防ぐことができます。
まとめ
今回はブログやサイトにツイッターボタンを作る方法をまとめておきました。これでボタンは作れるようになったので次は実際自分のサイトに表示してみようと思います。SNSを色々使いこなすとブログ以外にも幅が広がっていろんな情報に触れることができるようになりますね。タイムラインも表示できるような仕様に戻るよう祈ってます！
