【Cocoon】Twitter(ツイッター)ツイートの埋め込みはあなたも簡単にできます

【Cocoon】twitter埋め込みカード Cocoon

本記事はTwitter/ツイッターの投稿をブログ記事やサイドバーに埋め込むやり方を紹介していきます。

ブロックエディターを使用している方向けの記事となっています。ブログ開設ができたあなたなら一瞬でできますので、気楽に見ていってください。

いろいろやり方があるんですけど、基本はツイッターのURLをコピーして、投稿画面で貼り付けるだけです。

いやいや、ちゃんとやってるのにできないんだけど、、

大丈夫です。記事を読み込んでいただければ、きっとあなたもツイートを埋め込むことができるようになります。

画像たっぷりで丁寧に解説していきますので、1つずつこなしていきましょう!

また、Cocoonのブログとツイッターを連携させる方法を知りたい方は、別記事にて説明しています。そちらをご覧ください。
関連記事【Cocoon】ブログをツイッターと連携する具体的な手順

twitterを記事に埋め込む方法

  1. Twitterを開いて、埋め込みたいURLをコピーする
  2. WordPressの投稿画面でコピーしたURLを貼り付ける

なんとたったの2ステップ

Twitterを開いて埋め込みたいURLをコピーする

▼タイムラインとかで埋め込みたいツイートを見つけて左クリック▼
ツイートで左クリック
▼ツイートのURLをコピー▼
ツイートのURLをコピー

WordPressの投稿画面でコピーしたURLを貼り付ける

段落ブロックかまたは、Tweet埋め込みブロックに貼り付けます

段落ブロックにURLを貼り付ける

▼段落ブロックに貼り付けてもOK▼
段落ブロックに貼り付け
▼うまくいくとツイートの形になる▼
ツイートになる

TwitterブロックにURLを貼り付ける

▼ブロックの追加⇒埋め込み⇒Twitterから▼
Twitterブロック
▼Twitterブロックを出してURLを貼り付けてもOK▼
TwitterブロックにURLを埋め込み
▼URL貼り付けたら埋め込みボタンを押す▼
埋め込みボタン
▼うまくいくとツイートの形になる▼
ツイートの形になる
▼中央揃えとかして整える▼
中央揃え
▼実際に埋め込んたツイートがこちら▼

これで記事にTwitter埋め込みできました!

twitterをサイドバーに埋め込む方法

  1. Twitterを開いて埋め込みたいURLをコピーする
  2. コピーしたURLからコードを作成する
  3. WordPressのウィジェット画面でコードを貼り付ける

こちらもたったの3ステップ!

Twitterを開いて埋め込みたいURLをコピーする

▼ツイッターのプロフィール画面からURLをコピー▼
プロフィールURLをコピー

コピーしたURLからコードを作成する

▼自分のツイート(なんでもいい)のⓥボタンを押す▼
Ⓥボタン
▼ツイートを埋め込むをクリック▼
ツイートを埋め込む
開いたページのURLを消してコピーしたURLを貼り付け▼
URLを消してコピーしたURLを貼り付け
ボタンをクリック▼
→ボタンクリック
▼ちょっとスクロールして、左側のEmbedded Timelineをクリック▼
Embedded Timeline
▼set customization optionsをクリック▼
set customization options
▼Heightに600を入力しUpdateをクリック▼
height600 update
▼Copy Codeをクリック▼
copy code

さぁ!もうちょいです!がんばろう

WordPressのウィジェット画面でコードを貼り付ける

▼WordPressの編集画面から外観→ウィジェット▼
外観→ウィジェット
▼利用できるウィジェットからテキストを選択▼
▼サイドバーを選んでウィジェットを追加▼
サイドバー→ウィジェットを追加
▼サイドバーに追加されたテキストウィジェットを選択▼
テキストウィジェット選択
▼タイトルを入力▼
▼テキストを選択しコピーしたコードを貼り付け▼
タイトル入力コード貼り付け
▼テキストウィジェットを好みの位置に移動▼
ウィジェットの位置調整

これでサイドバーにツイッターが埋め込まれました!

実際に確認&微調整

▼実際に埋め込まれたツイートがこちら▼
埋め込まれたツイート
▼ウィジェット画面でタイトルや表示する画面の長さを調整▼
タイトルと画面の長さ調整

ブログ×SNS

本記事では、【Cocoon】Twitter(ツイッター)埋め込みは秒でできる

ということで記事やサイドバーにツイッターを埋め込む方法をご紹介してきました。結構簡単だったんじゃないですかね。

これであなたのブログにはSNSもかけ合わさってより強くなったんじゃないでしょうか?

  • 口コミも引っ張ってこれるし
  • 単純に自分のツイートを乗せてもいいし
  • 権威ある人のツイートを拝借できる

うまく利用してください

Cocoonのブログとツイッターを連携させる方法を知りたい方は次の関連記事からご覧ください。
関連記事【Cocoon】ブログをツイッターと連携する具体的な手順

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

コメント