SNS

Twitterのフォローボタンを簡単にサイトに設置する方法

Twitterのフォローボタンを簡単にサイトに設置する方法
ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお(@ENOWL_Nao)です。

今回は簡単にTwitterのフォローボタンを作成してページに埋め込む方法をご紹介したいと思います。

↓こんな感じのボタンを設定することができます。
 試しにフォローしてみてください。笑

HTMLとかCSSなど難しいことは分からない…。という方でも
簡単に記事内に埋め込むことができるので、フォロワーを増やしたいと思っている方にオススメです。

では、やっていきましょう!

Twitterのフォローボタンの作成

まずは下のURLからフォローボタンを作成していきたいと思います。

https://publish.twitter.com/#

リンク先に飛ぶと下のようなページにいくと思うので、ちょっと下にスクロールしてください。

すると3つ選択する画面があります。
一番右側の「Twitter Buttions」を選択してください。

どのボタンを作成するかを選択する画面が表示されます。
右から二番目の「Follow Button」を選択してください。

次に赤枠にTwitter URLを入力してください。

Twitter URLは「https://twitter.com/自分のアカウント名」になります。
Twitterの自分のプロフィールページに移動するとURLが分かるかと思います。

入力が完了したら青枠の「Preview」をクリックしてください。

すると画面が切り替わってボタンが作成されました。

これでボタンが作成できました。

ここから記事へ設置する作業に入るのですが、ボタンを少しカスタマイズすることができます。
なので、ここでカスタマイズについて説明してから次の章で記事への設置方法について説明したいと思います。

ボタンのカスタマイズ

では、カスタマイズについてご紹介します。

ちょっと分かりづらいかもしれませんが、赤枠の「set customization options.」クリックしてください。

クリックすると画面が切り替わります。
それぞれ説明したいと思います。

➊ボタンに表示されているアカウント名を非表示にしますか?

チェックを入れるとアカウント名を非表示にできます。

チェックなし
チェックあり
➋ボタンの大きさを変更しますか?

チェックを入れるとボタンを少し大きくできます。
ちなみに記事冒頭のフォローボタンは「チェックあり」です。

チェックなし
チェックあり
❸どの言語で表示しますか?

これは基本的に「Automatic」でいいかと思います。
自動で言語を判断して変更してくれるみたいです。

英語
日本語

カスタマイズが完了したら青矢印の「Update」ボタンをクリックしてください。
先程の画面に戻ります。

ボタンを日本語にしてボタンのサイズも大きくしてみました。

WordPressの記事への設置

ここからは実際に記事へ配置する方法をご紹介します。
「Copy Code」をクリックしてください。

↑こんな画面が出て、コードがコピーされます。

次にWordPressの記事制作画面に移動してください。
ブロックから「カスタムHTML」を選択してください。

赤枠部分(HTMLを入力…)に先程コピーしたコードを貼り付けてください。

貼り付けると下のような感じになります。

記事を保存して確認してみてください。
↓埋め込めたかと思います。

まとめ

Twitterのフォローボタンを記事に埋め込む方法でした。
記事の冒頭の挨拶部分などで入れたりするとフォローしてくれるかもしれませんね。

簡単に埋め込みができますので、ぜひ試してみてください。
ここまで読んでいただきありがとうございました!

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります!
個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか?

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか?

私について
なお
なお
Webデザイナー
ホームページをご覧いただきありがとうございます! なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
記事URLをコピーしました