【超簡単】Twitterフォローしてもらうボタンをブログに設置する方法

2020年2月6日ブログ・コンテンツ作成,Twitter,フォローボタン

色んな人のブログやウェブサイトでツイッターをフォローしてもらえるボタンを見かけませんか?

コレ。

↓ ↓ ↓

あ、これいいな!と思っていても、どうやって作るのか分からない…。そんな時でも最近はネットで検索すると色んな情報を得る事ができますね。

オフィシャルサイトへ設置するために作ってみたのですが、パッと見てTwitterあるんだ!と伝わるのがとてもいいなと思います。手順はすごく簡単だったのでご紹介しますね。

活動をブログやウェブサイトを運営していると、多くの人に情報が伝わったらいいな、Twitterのフォロワーが増えたらいいな!と思いますよね。

フォローボタンを設置したい!と思われる方は、以下にボタンの造り方~設置までをご紹介します。是非参考にしてくださいね。

スポンサーリンク

Twitterフォローしてもらうボタンの設置方法

Twitter

フォローしてもらうボタンの

設置方法

ワードプレスのテーマやプラグインでもツイッターをフォローするのボタンはありますが、このボタンは記事内にも設置できるので、より読者にTwitterあるよ!って情報を伝えるためには有効かなと思います。

では以下、手順とカスタマイズ方法を解説します。

フォローしてもらうボタン設置の手順

まずは Twitter Publish にアクセスします。英語のサイトですがシンプルなのでビビる必要はありません。

①自分のツイッターURLを入力する

アクセスしたらこのような画面に。ここに自分のツイッターのURLを入力します。

ツイッターボタン

上の図は、かずねぇのツイッターURLです。①で示した https://twitter.com/●●●←この部分に自分のアカウントを入力します。

②Twitter Buttons

次の画面では②で示した Twitter Buttons の方を選択します。

ツイッターボタン

③Follow Button

その次は Follow Button の方を選択します。

ツイッターボタン

ここまでが最初の設定です。選ぶだけなので簡単ですね。

ここまでの設定で出来るのがこのボタンです。

↓ ↓ ↓

このボタン、ちょっと細くて指がカサカサしてたりするとタップし難いんですよねぇ…。

すこし大きくしたり表示を変えたりすることもできます。

では次はボタンをカスタマイズしていきます。

④set customization options

ここからは、ボタンの見た目をどうするかを設定するところです。

画面右上の set customization options をクリックします。

ツイッターボタン

⑤名前を表示しない場合

名前を表示したくない場合は Hide Username のチェックボックスに✔マークを入れます。

ツイッターボタン

↓ ↓ ↓

シンプルなボタンになりましたね。

⑥ボタンを少し大きく表示したい場合

ボタンを少し大きく表示したい場合は、Large Button にチェック✔を入れます。

ツイッターボタン

↓ ↓ ↓

少し縦幅が広りました!タップしやすくなりますね。

⑦表示言語を指定する

環境でAutomaticでは日本語で表示されない場合は Japaneseを選択します。

ツイッターボタン

⑧表示言語

基本的には表示されている言語が自動で選択されるようです。日本語に表示されない環境の場合は、Japanese に指定します。写真では英語のボタンですが、サイトに貼るとこのように日本語に変換されるのでAutomaticで大丈夫です。

ツイッターボタン

⑨コードをコピーします

矢印で示したCopy Codeをクリックします。

ツイッターボタン

⑩画面を閉じます

×をクリックして画面を閉じます。

ツイッターボタン

自分のサイトにコードを貼る

コピーしたコードをサイトに貼ったら出来上がり!

色々作ってみました。

↓ ↓ ↓




押すなよ…絶対押すなよ!

…ほんとは押してほしい(笑)最近はすっかりツイッター民です。このブログの事や色々つぶやいています。良かったらフォローしてね♪

ツイッターのフォローしてもらうボタンの造り方と設置方法をご紹介しました。


関連書籍

これからSNSを活用したい大人の方に。