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