【図解】WordPressにツイッターを埋め込む５つのカスタマイズ方法

ブログのこと

WordPressブログでツイッターの投稿を埋め込んでいるサイトを見かけたことはありませんか？

今回はツイッターに埋め込む５種類のカスタマイズ方法をご紹介します！

この記事で解説する内容はこちらです。

  • 記事内にツイートを埋め込む３つの方法
  • サイドバーにツイートのタイムラインを埋め込む方法
  • フォローボタンの設置方法
  • 【HTML挿入カスタム】フォロー数の表示方法
  • メンションボタンの設置方法

目次

記事内にツイートを埋め込む３つの方法

３つの方法がありますが、どの方法でも埋め込むことができます。

３つの方法で埋め込んだツイッター

記事内にそのままコピペして埋め込む

記事内の任意の場所に埋め込みたいURLをコピーしそのまま貼り付けましょう

 

ブロックの追加から選択して埋め込む

記事編集画面の左上から【＋】ボタンを選択してTwitterを選択します。

 

URLを貼り付けし、埋め込みを選択しましょう。

Twitter Publishで埋め込む

こちらはツイッターの公式サービスです。埋め込み用のURLを生成してくれます。

Twitter Publishにアクセスします。

埋め込みたいツイートのURLを入れましょう。

生成されたことを確認し【コードをコピーする】を選択しましょう

【カスタムHTML】からコピーしたコードを貼り付けましょう

表示されたこと確認して作業完了です♪

サイドバーにツイートのタイムラインを埋め込む方法

Twitter Publishを使用してコードを埋め込みます

ツイッターのアカウントのプロフィール画面のURLを入れましょう

埋め込みたいタイムラインのツイッタープロフィール画面のURLをコピーします

URLをコピーします。

Twitter Publishにアクセスしてコードを生成します。

 

【埋め込まれたタイムライン】を選択しましょう。

【カスタマイズオプションを設定する。】を選択しましょう。

プレビュー画面のツイートの文字に若干のバグがありますが、キチンと反映されるので気にせず進めて構いません。

高さと幅のサイズを調整します。

【THE THOR】テーマのサイドバーのサイズだと400px×350pxがちょうどです。

ブログの埋め込みたい場所を確認し調整することをおすすめします。

ウェジットからサイドバーにカスタムHTMLで埋め込みを追加する

【ダッシュボード】→【外観】→【ウェジット】

カスタムHTMLを選択してサイドバーを選びます。

任意のタイトルを入力して【内容】に生成したコードを貼り付けます。

【保存しました】が表示されたことを確認し、完了を選択します。

実際に表示されたことを確認し、作業は完了です。

フォローボタンの設置方法

埋め込みたいプロフィール画面のURLをコピーして

Twitter Publishを使用してコードを埋め込みます

【Twitterボタン】を選択しましょう。

【フォローボタン】を選択しましょう。

プレビューを確認しながら、必要に応じてカスタマイズができます。

  • ユーザー名の非表示　→　アカウント名表示が【フォローする】のみの表示になる
  • 大きなボタン　→　ボタンのサイズが大きくなる

【ウェジットからサイドバーにカスタムHTMLで埋め込みを追加】と同じ手順で追加します。

実際に表示されたことを確認し作業は完了です。

【HTML挿入でカスタマイズ！】フォロー数の表示方法

コードを書き換えることでフォロワー数が表示されます

フォローボタンを設置したHTMLコードを開きます。

 

書き換えるコード

data-show-count=”false”
以下のコードに書き換えましょう。
data-show-count=”true”

コードを書き換えるだけで簡単に表示設定ができました♪

メンションボタンの設置方法

メンションボタンはボタンを押したユーザーが埋め込んだアカウントに簡単にメンションすることができます。

埋め込みたいプロフィール画面のURLをコピーして

Twitter Publishを使用してコードを埋め込みます

【Twitterボタン】を選択しましょう。

【メンションボタン】を選択しましょう。

デフォルトで表示させたい文言があれば任意で入力しておくと

ユーザーに自動表示させることができます。

【ウェジットからサイドバーにカスタムHTMLで埋め込みを追加】と同じ手順で追加します。

際に表示されたことを確認し作業は完了です。

まとめ

ツイッターとブログを連携させる便利な方法は他にもいくつもあります。

連携させることで情報をわかりやすく伝えることができ、ユーザビリティも向上します。

ツイッターの埋め込み方法を活用してブログのパフォーマンスを向上していきましょう！

スポンサーリンク