【Cocoon】ブログをツイッターと連携する具体的な手順

Cocoonツイッター連携Cocoon

本記事ではブログとツイッターを連携することを次のこととしています。

  1. twitterであなたの記事URLを入力するとアイキャッチ画像のリンクが出てくる
  2. 記事上部や下部のSNSシェアのボタンが有効になる
  3. 記事上部や下部のSNSフォローボタンが有効になる
  4. twitterのプロフィールからあなたのブログに飛べるようになる

※自動で記事更新をつぶやくことは今回含みません。これのやり方については記事後半にてざっくり解説と参考リンクを貼りますのでそちらをご覧ください。

また、ブログ記事やサイドバーにツイートを埋め込む方法は別記事にて説明しています。そちらを求めている方は下のリンクからどうぞ。
参考記事【Cocoon】Twitter(ツイッター)埋め込みは秒でできる

本記事では、WordPressテーマCocoonを使っている方向けにツイッターとブログの連携方法をお伝えしていきます。

画像見ながらマネするだけ、10分もあればできます

お手軽簡単にツイッターとの連携ができますので、ぜひ見ていってください。

WordPressブログとTwitterを連携するためにやること

 ワードプレスブログとツイッターを連携するためにやることはWordPressの画面で4つ、ツイッターの画面で1つです。

合計たったの5ステップです

まずはワードプレスの設定から説明しますので、あなたもワードプレスの編集画面を開きながら読み進めてください。

プロフィール設定

まずはワードプレスのプロフィール設定をします。編集画面からユーザー→プロフィールと進みましょう

そしたらスクロールしていくと、ページの中盤にTwitter URLを入力するところが出てきます。そこにあなたのツイッターのプロフィール画面のURLを貼り付けます。

ちょっと面倒ですがツイッター開きましょう

そしたら一番下までスクロールしてプロフィールを更新を押しましょう。

これで1ステップ終了です。ツイッター以外のSNSも共有したければこのプロフィール画面でそれぞれURLを貼ってください。

Cocoon設定のOGP

続いてコクーン設定に移ります。ワードプレスの編集画面からCocoon設定→OGPと進んでください。

そしたら、

  • OGP設定OGP有効化OGPタグの挿入にチェック
  • Twitterカード設定
    • Twitterカード有効化Twitterカードタグの挿入にチェック
    • Twitterカードタイプのどちらかを選択。おすすめは大きな画像のサマリー
おおきな画像のサマリーはこんな感じです
ふつうのサマリーは画像が正方形で横長にリンクが出ます

さらに下にスクロールして、ホームイメージのところの画像がコクーンの画像だった場合、あなたのブログ用の画像を準備して変えることをおすすめします。

ホームイメージが最初のままだとツイッターでトップページをシェアした時にこの画像になります
あなたのブログ用の画像を準備して選択から画像をアップロードしましょう
最後に変更をまとめて保存を忘れずに
ここを設定しておくとトップページを紹介していただいたときにこんな感じになる

OGP設定終了です。次にいきましょう

Cocoon設定のSNSシェア

続いて、Cocoon設定→SNSシェアを選択ください。

SNSシェアで設定するところ
  1. トップシェアボタン
    • ページの上部に表示するシェアボタンの設定
  2. ボトムシェアボタン
    • ページの下部に表示するシェアボタンの設定
  3. ツイート設定

基本的には「トップシェアボタンの表示」と「ボトムシェアボタンの表示」をチェックすれば、あとはあなたのお好みでの設定になります。

私の設定状況をスクショしてありますので、参考に見てみてください。

トップシェアボタンの設定
ボトムシェアボタンの設定
ツイート設定
最後は変更をまとめて保存

以上でSNSシェア設定は終わりです。続いてSNSフォローの設定をしましょう。

Cocoon設定のSNSフォロー

Cocoon設定→SNSフォローと進みましょう。

フォローボタンの表示のところにチェックを入れたら、あとはお好みでチェックを入れてください。よくわからない場合は下の画像を参考にしてください。

最後に変更をまとめて保存を忘れずに

以上でワードプレス側の設定は終了です。次で最後の手順になります。ツイッターのプロフィールページに行ってください。

ツイッターのプロフィールにブログURLを入力

Twitterのプロフィールページを開いたら、プロフィールを編集をクリックorタップ

ウェブサイトのところにあなたのブログURLを入力して保存

以上でワードプレスブログとツイッターの連携が完了しました。お疲れさまでした

連携後の具体的なツイッター活用方法

ブログの更新をツイッターでお知らせするのが一般的な活用方法になります。

投稿した記事のツイッターシェアボタンを押すと
ツイッターが開いて、
下のようにタイトルとURLとリンクカードがすでに入力されて呟けるようになっている
場合によって、文字やハッシュタグを追記してツイートしましょう

実際に記事更新のツイートをしたのが下になります。

このようにしてブログ×SNSを進めていきましょう!

シェアボタンから行くのが手っ取り速いけど、実は普通に記事URLをコピーしといてツイッター画面で貼り付けたらリンクカード表示されます

記事投稿時にTwitterでも自動投稿する方法

番外編としてブログ記事を公開したら自動でツイッターで記事投稿のお知らせをする方法をざっくり説明します。

個人的には自動ツイートは必要ないためやっていません。手動でツイートし忘れたこともないですしね。

記事投稿時にTwitterでも自動投稿する方法
  1. Jetpackプラグインを使用する
  2. dlvr.it(デリバーイット)を使用する

2通りありまして、1個目のジェットパックはワードプレスのプラグインです。多機能ですが動作が重くなるので、私は入れてません。

参考記事がありますので、そちらをご確認ください。
外部リンクJetpackでWordPressとSNSを連携!FacebookやTwitterに自動投稿する方法

2個目のデリバーイットはSNSの予約投稿サービスです。こちらも詳しく解説してくださっている記事がありますので、そちらをご覧ください。
外部リンク各種SNSへ自動投稿する事が出来るdlvr.itの設定&使い方

ブログ更新をツイッターで気軽に投稿しよう

本記事では、【Cocoon】ブログをツイッターと連携する具体的な手順

ということで、ブログ×ツイッターのやり方を書いてきました。あなたのブログはツイッターと連携できたでしょうか?

記事更新をツイートすることによってフォロワーさんが記事を読みに来てくれますし、最近はtwitterで悩みを検索する人もいます。

Twitter検索にも引っかかるようになるので、しっかりとブログとツイッターを連携して運用していきたいものですね。

ブログ×ツイッターの関連記事として、ブログ記事やサイドバーにツイートを埋め込む方法を説明した記事があります。そちらもご覧になってみてください。

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント