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

昨今のSNSの拡散力はすごいですね。

ブログをもっと知ってもらうためにも、WordPressのサイトにTwitterのフォローボタンを設置してフォローされやすくしましょう。

サイドバーの検索窓の下に設置してみます。

Twitterボタンを作成しよう!

Twitterボタンを作成できるサイトにアクセス。

→ Twitterボタン作成ページを開く

サイトが開きます。

作成できるボタンは、共有、フォロー、ハッシュタグ、ツイートです。

サイトにボタンを設置すると、サイトに訪れユーザーがボタンを押すだけでコンテンツを共有したり、Twitterでつながったりできるようになります。

ボタンを選択 のところで、「フォローする」にチェックを入れます。

ボタンのオプション のユーザー欄には、@の後ろにすでに自分のTwitterアカウントが表示されています。

「ユーザー名を表示」「ボタン(大)」にチェックを入れます。

どちらもチェックを入れなければ、ボタンには「フォローする」とだけ表示され、小さめのサイズになります。

右側のプレビューでチェックしてみてください。

言語設定がAutomaticになっているので、▼ボタンをクリックして「Japanese-日本語」を選択します。

プレビューでサイズ感を確認します。

設置するボタンのコードができました。

作成したTwitterボタンをWordPressに設置しよう!

コードをコピーします。

コードの最初の方しか見えませんが、実際はかなり長いコードです。

WordPressの管理画面を開きます。

「外観」→「テーマの編集」をクリック。

ずっと下にスクロールして、「検索フォーム(searchform.php)」ファイルを選択します。

検索フォームのファイルの内容が表示されます。

この一番下にさきほどコピーしたTwitterフォローボタンのコードを貼り付けます。

貼り付けてから「ファイルを更新」をクリック。

ブラウザで表示を確認しましょう。

サイドバーの検索窓の下にボタンが表示されました。

CSSでTwitterボタンの位置を調整しよう!

検索窓にくっついているので、CSSで位置を調整しましょう。

フォローボタンのコードには、classがふられています。

これにスタイルをあてます。

「外観」→「カスタマイズ」をクリック。

「追加CSS」をクリック。

ここには、WordPressのテーマのCSSとは別に、自分のオリジナルのCSSをあてることができる場所です。

ボタンの上にmarginを10pxあけるとちょうど良さそうです。

スタイルを記述したら、「保存して公開」をクリック。

ブラウザで表示を確認しましょう。

検索窓から10pxはなれて表示されました。

これで見やすく、押しやすくなりましたね。

サイドバーは一覧ページでも個別ページでも表示されるので、上の方にボタンを設置するといつでもフォローしやすくなると思います。

フォロワーが増えるといいなあ。