【Cocoon】Twitter埋め込み方法|ブログに連携させて流入経路を増やそう

「自サイトにツイートを埋め込みたい」

「Twitterをサイドバーに埋め込める?」

「タイムラインの埋め込み方法は?」

この記事では、そんな方に向けて、CocoonでTwitterの埋め込み方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • 記事にTwitterを埋め込む方法
  • サイドバーにTwitterを埋め込む方法
  • タイムラインや特定ツイートの埋め込み方法

が理解できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でプロフィールにTwitterを埋め込みできました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

CocoonでTwitterの埋め込みができる要素

CocoonでTwitterの埋め込みができる要素は、下記3つあります。

  • 特定のツイート
  • タイムライン
  • フォローボタン
  • ツイート…ある1つのつぶやき(=投稿)のこと
  • タイムライン…ツイートが時系列順に並んだホーム画面のこと
  • フォローボタン…Twitterアカウントをフォローできるボタンのこと

です。

私がやっているTwitterを例に、ツイート・タイムライン・フォローボタンを比較した画像を以下に示しました。

ツイート・タイムライン・フォローボタンを比較した画像

他サイトの記事を読んでいると、商品やサービスをレビューしたツイートが埋め込まれているのをよく見かけます。

これは不特定多数の人の「特定のツイート」が埋め込まれているということです。

かめコンパス

タイムラインよりも特定のツイートの方がよく使われてるイメージだね

CocoonでTwitterの埋め込みをする方法

CocoonでTwitterの埋め込みは、下記の手順で行います。

それぞれの手順を詳しく解説します。

手順①TwitterのURLを取得する

まず始めにTwitterのURLを取得していきます。

STEP
  1. Googleなどの検索エンジンでTwitterと検索する
  2. X(Twitter)公式サイトにアクセスする
GoogleでX(Twitter)公式サイトにアクセスしている様子
STEP

自分のアカウントにログインする

自分のアカウントにログインしている様子
STEP
  1. プロフィールをクリック
  2. 埋め込みたいツイートをクリックする
「プロフィールがある場所と、埋め込みたいツイートを選んでいる様子
STEP

ページのURLをコピーする

ページのURLがある場所

これでTwitterのURLを取得できます。

手順②Cocoon記事に埋め込む

次に取得したTwitterのURLをCocoon記事に埋め込みます。

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「Twitter」をクリックする

「Twitter」がある場所
STEP
  1. 表示されたTwitter URLブロックに先ほど取得したURLをペースト
  2. 埋め込みをクリックする
Twitter URLブロックにURLをペーストしている様子と、「埋め込み」がある場所
STEP

これでCocoon記事にTwitterの埋め込みができます

Cocoon記事にTwitterの埋め込みができた様子

「Twitter Publish」でTwitterの埋め込みをする方法

「Twitter Publish」というツールを使って、CocoonでTwitterの埋め込みをする方法を詳しく解説します。

Twitter Publishとは?

Twitter Publish」とは、TwitterのURLを入力するだけでブログに貼りつけるコードを取得できるツールです。

  • 特定のツイート
  • タイムライン
  • フォローボタン

をCocoonに埋め込みができるだけではなく、

  • サイズや色のカスタマイズができる

というメリットもあります。

かめコンパス

URLの取得ではできないタイムラインの埋め込みやサードバーへの設置もできるのが魅力的!

「特定ツイート」の埋め込みをする方法

「Twitter Publish」を使って、Cocoon記事に特定のツイートを埋め込む方法を紹介します。

  • コードを取得する
  • Cocoon記事に埋め込む

手順①コードを取得する

STEP
  1. Twitter Publish」にアクセスする
  2. Cocoon記事に埋め込みたい特定ツイートのURLを入力し、をクリックする
Twitter Publishに特定ツイートのURLを入力している様子と、「→」がある場所
STEP

表示オプションで埋め込みポストを選ぶ

「埋め込みポスト」がある場所
STEP

コードをコピーするをクリックする

「コードをコピーする」、「カスタマイズオプションを設定する」がある場所

埋め込むTwitterをカスタマイズしたい場合は、「カスタマイズオプションを設定する」をクリックします。

  1. 色を「ライト=白」or「暗い=黒」から選ぶ
  2. リプライを表示しない場合は「会話を隠す」に✔する
  3. アップデートをクリックする
  4. コードをコピーするをクリックする
Twitterをカスタマイズしている様子

これで特定ツイートのコードを取得できます。

手順②Cocoon記事に埋め込む

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「カスタムHTML」をクリックする

「カスタムHTML」がある場所
STEP

先ほどコピーした特定ツイートのコードを貼りつける

特定ツイートのコードをカスタムHTMLに貼りつける様子

これでCocoon記事に特定ツイートを埋め込みできます。

かめコンパス

好きなツイートだけを埋め込みたいときに便利だね

「タイムライン」の埋め込みをする方法

「Twitter Publish」を使って、Cocoonにタイムラインを埋め込む方法を紹介します。

  • コードを取得する
  • Cocoon記事に埋め込む

手順①コードを取得する

STEP
  1. Twitter Publish」にアクセスする
  2. Cocoon記事に埋め込みたい特定ツイートのURLを入力し、をクリックする
Twitter Publishに特定ツイートのURLを入力している様子と、「→」がある場所
STEP

表示オプションで埋め込みタイムラインを選ぶ

「埋め込みタイムライン」がある場所
STEP

コードをコピーするをクリックする

「コードをコピーする」、「カスタマイズオプションを設定する」がある場所

埋め込むTwitterをカスタマイズしたい場合は、「カスタマイズオプションを設定する」をクリックします。

  1. タイムラインの高さと幅を入力する
  2. 色を「ライト=白」or「暗い=黒」から選ぶ
  3. アップデートをクリックする
  4. コードをコピーするをクリックする
Twitterをカスタマイズする様子

これでタイムラインのコードを取得できます。

手順②Cocoon記事に埋め込む

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「カスタムHTML」をクリックする

「カスタムHTML」がある場所
STEP

先ほどコピーしたタイムラインのコードを貼りつける

特定ツイートのコードをカスタムHTMLに貼りつける様子

これでCocoon記事にタイムラインを埋め込みできます。

かめコンパス

多くのツイートをユーザーに見せることができるよ

「フォローボタン」の埋め込みをする方法

「Twitter Publish」を使って、Cocoonにフォローボタンを埋め込む方法を紹介します。

  • コードを取得する
  • Cocoon記事に埋め込む

手順①コードを取得する

STEP
  1. Twitter Publish」にアクセスする
  2. TwitterトップページのURLを入力し、をクリックする
Twitter Publishに特定ツイートのURLを入力している様子と、「→」がある場所
STEP

表示オプションでXボタンを選ぶ

「Xボタン」がある場所
STEP

使用したいボタンでフォローボタンを選ぶ

「フォローボタン」がある場所
STEP

コードをコピーするをクリックする

「コードをコピーする」、「カスタマイズオプションを設定する」がある場所

埋め込むTwitterをカスタマイズしたい場合は、「カスタマイズオプションを設定する」をクリックします。

  1. ユーザー名を表示しない場合は「ユーザー名を隠す」に✔する
  2. ボタンを大きく表示したい場合は「大きなボタン」に✔する
  3. アップデートをクリックする
  4. コードをコピーするをクリックする
Twitterをカスタマイズする様子

これでフォローボタンのコードを取得できます。

手順②Cocoon記事に埋め込む

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「カスタムHTML」をクリックする

「カスタムHTML」がある場所
STEP

先ほどコピーしたフォローボタンのコードを貼りつける

特定ツイートのコードをカスタムHTMLに貼りつける様子

これでCocoon記事にフォローボタンを埋め込みできます。

かめコンパス

ブログを気に入ってくれたらフォローしてもらえるかも

サイドバーにTwitterの埋め込みをする方法

「Twitter Publish」を使えば、サイドバーにTwitterの埋め込みもできます。

STEP

WordPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. 利用できるウィジェット内の「カスタムHTML」をプルダウン
  2. 「サイドバー」をクリック
  3. ウィジェットを追加をクリックする
「カスタムHTML」をプルダウンする様子と、「サイドバー」、「ウィジェットを追加」がある場所
STEP
  1. タイトルにTwitterと入力
  2. 内容にTwitterコードを貼りつけ
  3. 保存をクリックする
「タイトル」、「内容」、「保存」がある場所

 特定ツイートのコードを取得する方法はこちら
 タイムラインのコードを取得する方法はこちら

STEP

これでサイドバーにTwitterの埋め込みができます。

サイドバーにTwitterの埋め込みができた様子

CocoonでTwitterの埋め込みをするメリット

CocoonでTwitterの埋め込みをすると、ブログ記事のPV数が増える可能性があります。

なぜなら、

  • あなたの記事からTwitterにユーザーが流れ、フォローしてもらえる。
  • フォロワーの数が増えれば、あなたのツイートを見てもらえるユーザーも増える。
  • 記事リンクを貼ったツイートをすれば、あなたの記事を読んでもらう機会が増える。
  • 結果、PV数が増加します。

つまり、Twitterの埋め込みをすることでWeb以外からの流入経路ができ、より多くのユーザーにあなたのブログを見てもらえますよ。

かめコンパス

フォロワー数が多ければ、GoogleからのSEO評価もよくなるよ

CocoonでTwitterの埋め込みをするデメリット

CocoonでTwitter、とくにタイムラインの埋め込みをするとサイトが重くなります。

なぜなら、とくにタイムラインでは更新されたツイートの情報を取得するための処理が必要になるからです。

かめコンパス

私もタイムラインの埋め込みをしてサイトが重くなったので外したよ

サイトが重くなれば記事の表示スピードが遅くなり、ユーザーが待っていられず、離脱されます。

そして平均エンゲージメント時間が下がり、SEO評価が悪くなります。

かめコンパス

特定ツイートのみの埋め込みは問題ないけど、埋め込みすぎに注意!

まとめ:Twitter×ブログの連携でファンを増やそう

今回は、CocoonでTwitterの埋め込み方法を紹介しました。

以下の記事では、Twitterの埋め込み以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

CocoonでTwitterの埋め込みをする方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次