「自サイトにツイートを埋め込みたい」
「Twitterをサイドバーに埋め込める？」
「タイムラインの埋め込み方法は？」
この記事では、そんな方に向けて、CocoonでTwitterの埋め込み方法を解説します。
かめコンパスこんにちは、かめコンパスです！
この記事を読めば、あなたも簡単に
- 記事にTwitterを埋め込む方法
- サイドバーにTwitterを埋め込む方法
- タイムラインや特定ツイートの埋め込み方法
が理解できるようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でプロフィールにTwitterを埋め込みできました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
＼もっと早く乗り換えればよかった…／
使い心地バツグン、高機能でオシャレ！
CocoonでTwitterの埋め込みができる要素
CocoonでTwitterの埋め込みができる要素は、下記3つあります。
- 特定のツイート
- タイムライン
- フォローボタン
です。
私がやっているTwitterを例に、ツイート・タイムライン・フォローボタンを比較した画像を以下に示しました。
他サイトの記事を読んでいると、商品やサービスをレビューしたツイートが埋め込まれているのをよく見かけます。
これは不特定多数の人の「特定のツイート」が埋め込まれているということです。
かめコンパスタイムラインよりも特定のツイートの方がよく使われてるイメージだね
CocoonでTwitterの埋め込みをする方法
CocoonでTwitterの埋め込みは、下記の手順で行います。
それぞれの手順を詳しく解説します。
手順①TwitterのURLを取得する
まず始めにTwitterのURLを取得していきます。
- Googleなどの検索エンジンでTwitterと検索する
- X(Twitter)公式サイトにアクセスする
自分のアカウントにログインする
- プロフィールをクリック
- 埋め込みたいツイートをクリックする
ページのURLをコピーする
これでTwitterのURLを取得できます。
手順②Cocoon記事に埋め込む
次に取得したTwitterのURLをCocoon記事に埋め込みます。
記事編集画面で、+をクリックする
「Twitter」をクリックする
- 表示されたTwitter URLブロックに先ほど取得したURLをペースト
- 埋め込みをクリックする
これでCocoon記事にTwitterの埋め込みができます
「Twitter Publish」でTwitterの埋め込みをする方法
「Twitter Publish」というツールを使って、CocoonでTwitterの埋め込みをする方法を詳しく解説します。
Twitter Publishとは？
「Twitter Publish」とは、TwitterのURLを入力するだけでブログに貼りつけるコードを取得できるツールです。
- 特定のツイート
- タイムライン
- フォローボタン
をCocoonに埋め込みができるだけではなく、
- サイズや色のカスタマイズができる
というメリットもあります。
かめコンパスURLの取得ではできないタイムラインの埋め込みやサードバーへの設置もできるのが魅力的！
「特定ツイート」の埋め込みをする方法
「Twitter Publish」を使って、Cocoon記事に特定のツイートを埋め込む方法を紹介します。
- コードを取得する
- Cocoon記事に埋め込む
手順①コードを取得する
- 「Twitter Publish」にアクセスする
- Cocoon記事に埋め込みたい特定ツイートのURLを入力し、→をクリックする
表示オプションで埋め込みポストを選ぶ
コードをコピーするをクリックする
- 色を「ライト=白」or「暗い=黒」から選ぶ
- リプライを表示しない場合は「会話を隠す」に✔する
- アップデートをクリックする
- コードをコピーするをクリックする
これで特定ツイートのコードを取得できます。
手順②Cocoon記事に埋め込む
記事編集画面で、+をクリックする
「カスタムHTML」をクリックする
先ほどコピーした特定ツイートのコードを貼りつける
これでCocoon記事に特定ツイートを埋め込みできます。
かめコンパス好きなツイートだけを埋め込みたいときに便利だね
「タイムライン」の埋め込みをする方法
「Twitter Publish」を使って、Cocoonにタイムラインを埋め込む方法を紹介します。
- コードを取得する
- Cocoon記事に埋め込む
手順①コードを取得する
- 「Twitter Publish」にアクセスする
- Cocoon記事に埋め込みたい特定ツイートのURLを入力し、→をクリックする
表示オプションで埋め込みタイムラインを選ぶ
コードをコピーするをクリックする
- タイムラインの高さと幅を入力する
- 色を「ライト=白」or「暗い=黒」から選ぶ
- アップデートをクリックする
- コードをコピーするをクリックする
これでタイムラインのコードを取得できます。
手順②Cocoon記事に埋め込む
記事編集画面で、+をクリックする
「カスタムHTML」をクリックする
先ほどコピーしたタイムラインのコードを貼りつける
これでCocoon記事にタイムラインを埋め込みできます。
かめコンパス多くのツイートをユーザーに見せることができるよ
「フォローボタン」の埋め込みをする方法
「Twitter Publish」を使って、Cocoonにフォローボタンを埋め込む方法を紹介します。
- コードを取得する
- Cocoon記事に埋め込む
手順①コードを取得する
- 「Twitter Publish」にアクセスする
- TwitterトップページのURLを入力し、→をクリックする
表示オプションでXボタンを選ぶ
使用したいボタンでフォローボタンを選ぶ
コードをコピーするをクリックする
- ユーザー名を表示しない場合は「ユーザー名を隠す」に✔する
- ボタンを大きく表示したい場合は「大きなボタン」に✔する
- アップデートをクリックする
- コードをコピーするをクリックする
これでフォローボタンのコードを取得できます。
手順②Cocoon記事に埋め込む
記事編集画面で、+をクリックする
「カスタムHTML」をクリックする
先ほどコピーしたフォローボタンのコードを貼りつける
これでCocoon記事にフォローボタンを埋め込みできます。
かめコンパスブログを気に入ってくれたらフォローしてもらえるかも
サイドバーにTwitterの埋め込みをする方法
「Twitter Publish」を使えば、サイドバーにTwitterの埋め込みもできます。
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
- 利用できるウィジェット内の「カスタムHTML」をプルダウン
- 「サイドバー」をクリック
- ウィジェットを追加をクリックする
これでサイドバーにTwitterの埋め込みができます。
CocoonでTwitterの埋め込みをするメリット
CocoonでTwitterの埋め込みをすると、ブログ記事のPV数が増える可能性があります。
なぜなら、
- あなたの記事からTwitterにユーザーが流れ、フォローしてもらえる。
- フォロワーの数が増えれば、あなたのツイートを見てもらえるユーザーも増える。
- 記事リンクを貼ったツイートをすれば、あなたの記事を読んでもらう機会が増える。
- 結果、PV数が増加します。
つまり、Twitterの埋め込みをすることでWeb以外からの流入経路ができ、より多くのユーザーにあなたのブログを見てもらえますよ。
かめコンパスフォロワー数が多ければ、GoogleからのSEO評価もよくなるよ
CocoonでTwitterの埋め込みをするデメリット
CocoonでTwitter、とくにタイムラインの埋め込みをするとサイトが重くなります。
なぜなら、とくにタイムラインでは更新されたツイートの情報を取得するための処理が必要になるからです。
かめコンパス私もタイムラインの埋め込みをしてサイトが重くなったので外したよ
サイトが重くなれば記事の表示スピードが遅くなり、ユーザーが待っていられず、離脱されます。
そして平均エンゲージメント時間が下がり、SEO評価が悪くなります。
かめコンパス特定ツイートのみの埋め込みは問題ないけど、埋め込みすぎに注意！
まとめ：Twitter×ブログの連携でファンを増やそう
今回は、CocoonでTwitterの埋め込み方法を紹介しました。
以下の記事では、Twitterの埋め込み以外のカスタマイズ方法も紹介しています。
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
コメント