【WordPress】簡単!自分のブログにTwitterを表示させる方法

BLOG

WordPressで作成しているブログに、Twitterのタイムラインを埋め込む方法について解説していきます。

今回はサイドバーに、

タイムライン

フォローボタン

を埋め込む方法です。

スポンサーリンク

設定方法(タイムライン)

まずは、タイムラインを埋め込む方法について解説していきます。

① TwitterのURLをコピーする

まず、自分のTwitterのURLを取得する必要があります。


右上のアイコンをクリックして、『設定とプライバシー』を開きます。

ユーザー情報 > ユーザー名 の下に httpsから始まるURLがあるので、コピーします。

② コードを取得する

タイムラインを埋め込むためのコードを取得するために、Webサイトで

Twitter Publish

と検索して、ページを開きます。

するとこの画面が出てくるはずなので、先ほどコピーしたTwitterのURLを白枠の中に貼り付けます。

貼り付けたら、右側の『』ボタンを押します。

そうすると、

表示オプションを選ぶ画面が出ます。

今回はタイムラインなので、左側の『埋め込みタイムライン』を選択します。

③ デザインを設定する

カスタマイズオプションを設定する』というボタンを押すとカスタマイズ設定が開きます。

カスタマイズできる項目は

  • 表示する大きさ : Height→高さ Width→横幅
  • タイムラインの色 : 白 or 黒
  • タイムライン内のURLの色
  • 言語

僕は、

  • 高さ→500px、横幅→350px
  • タイムラインの色→
  • タイムライン内のURLの色→
  • 言語→Automatic(自動)

こちらのように設定しました。

設定したら、右下の『更新』ボタンを押してください。

④ コードをコピーする

カスタマイズが終わったら、

右側の『コードをコピー』ボタンを押して、コードをコピーします。

コピーが完了すると、次のような↓画面が出てきます。

この画面は開いたままにしておいてください。

⑤ WordPressを開く

続いて、WordPressに移ります。

・外観 > ウィジェット と進みます。

『テキスト』ボックスを右側にドラッグ&ドロップします。

このように、『サイドバー』項目の中に入っていれば大丈夫です。

⑥ コードを貼り付ける

先ほどコピーしたTwitterのURLを貼り付けていきます。

テキスト』ボックスを開き、テキストモードにしたら、URLを貼り付けて右下の『保存』ボタンを押します。

これでタイムラインの埋め込みは完了です。

設定方法(フォローボタン)

続いて、フォローボタンを埋め込んでいきます。

タイムラインを埋め込む方法とほぼ同じなので、スムーズにできると思います。

① コードを取得する

まずは、先ほどの Twitter Publishのサイトに戻ってください。

今度は、表示オプションの『Twitterのボタン』という方を選択します。

すると、

この画面が出てくるので、左のデザインを選択します。

② デザインを設定する

フォローボタンに関しても、デザインをカスタマイズすることができます。

カスタマイズオプションを開きます。

カスタマイズできる項目は

  • フォローボタンにユーザー名を入れる or 入れない
  • フォローボタンの大きさ
  • 言語

僕は、

  • ユーザー名→入れる
  • フォローボタン→大きく
  • 言語→Automatic(自動)

こちらのように設定しました。

設定したら、右下の『更新』ボタンを押してください。

③ コードをコピーする

カスタマイズが終わったら、先ほどと同じようにコードをコピーします。

完了したことを知らせる画面が出てきたらOKです。

④ コードを貼り付ける

WordPressに戻り、先ほどタイムラインのコードを貼り付けたテキストボックスを開きます。

テキストモードを開いて、タイムラインのコードの下に、コピーしたフォローボタンのコードを貼り付けます。

右下の『保存』ボタンを押して、フォローボタンの埋め込みも完了です。

実際のWebサイトを見てみると、、

ちゃんとタイムラインと下にフォローボタンが埋め込まれています。

お疲れ様でした!!

まとめ

以上のように、コードをコピーしてWordPressのウィジェットに貼り付けるだけなので、    簡単にできてしまいます。

もう少しデザインを修正したいので、修正したらそちらの方法も紹介したいと思います。

コメント

タイトルとURLをコピーしました