ライフスタイル

【WordPress】自己紹介の欄にツイッターのボタンを埋め込む方法

2020年6月22日

ブログを運営していると
自分のことをもっと知ってもらいたい、交流したいという人も多いはず。

 

今日はそんな方のために、簡単にTwitterのフォローボタンを作成し
WordPressで作った自己紹介欄に設置する方法を紹介します。

今回目指すのゴールはこんな感じです。

 

それでは、早速作っていきましょう。

 

概要【ツイッターのフォローボタンの作り方】

作り方は大まかにいえば、2ステップの手順で作っていきます。

  • ツイッターのツールで簡単にコードを作る
  • ワードプレスにコピペする
旅アテンダント
たったこれでけ!とっても簡単ですよ

 

では、細かい手順でご紹介していきます。

 

Twitterの「フォロー」ボタンを生成する

まずはフォローボタンの「コード」を作成していきます。
ボタンはTwitter Publishという、ページから作ることができます。

step
1
Twitter Publishにアクセス

Twitter Publishにアクセスして、自分のURLを入力する

Twitter Publishのサイト

 

「あなたは何を埋め込みたいのかしら?」という意味で
あなたのツイッターのURLを枠の中に入力していきます。

ツイッターのURLは@(アットマーク)から後の文字です。

https://twitter.com/あなたのアカウント名

があなたのツイッターのURLになります。
それを枠内に入力してください。

アカウントURLを入力したら、右側の「→」をクリックします。

 

step
2
「Twitter Buttons」を選択

次にこの画面に移ります。
ツイッターボタンを作りたいので、右側の「Twitter Buttons」をクリックします。

旅アテンダント
左側は、自分のツイートのタイムラインをサイトに埋め込みたい時に使います。

 

 

step
3
フォローボタンにするを選択する

 

次にこのような画面が表示されるで、左側の「Follow Button」を選択します。

右側は、「○○さんへツイートする」という意味です。
今回はフォローするボタンを作るので、左側の「Follow Button」を選びます。

 

そうするとこのようにコードが作られます。

 

もう少しボタンに手を加えたいので、ここでは「Copy Code」は押しません。
もう少しだけ作業していきますね。

 

step
4
右上の「set customization options」というボタンをクリック

 

カスタマイズできることは3つ

 

 

  • ①Hide Username:ユーザー名を非表示にする
    ユーザー名を表示にすると「@kaiunjoshibuさんをフォロー」
    非表示すると「フォローする」という表示になります。
  • ②Large Button:ボタンを大きくする
  •  ③言語を選ぶ 日本語でよければ「Japanese」を選択してください。

設定が完了したら、右下の「Update」をクリック

 

旅アテンダント
ちなみに私の設定は、ユーザー名は非表示・ボタンを大きくしています。

 

カスタマイズしたコードが出来たので
右側の「Copy Code」をクリックしてコピー。

 

step
5
WordPressに貼り付けつける

すでにWordPressで作っているプロフィールのウィジェットに貼り付ければ完成です。

ウィジェットを保存したら、実際のページを確認しましょう。
以前作ったプロフィールの下に、ボタンを設置してみました。

 

「フォローする」ボタンをセンタリングする場合は
Instagramの埋め込み|サイズ変更と中央揃えを参考にしてみてください。

 

ボタンをセンタリングにしました。

 

まとめ Wordpressでプロフィール欄にツイッターのボタンを埋め込む方法

ツイッターのフォローボタンを設置する方法をご紹介しました。

コードをコピペすれば、他のサイトやページにも簡単に設置できるので便利ですよ。

ブログはツイッターからの流入も多いですし、読者さんとの交流もできますので
ぜひフォローボタンを埋め込んでみてください。

-ライフスタイル
-

© 2020 おとな開運女子部 Powered by AFFINGER5