【秒でできる】自分のツイートをブログ記事に埋め込む方法【Cocoon】

【秒でできる】自分のツイートをブログ記事に埋め込む方法【Cocoon】
まめ丸
まめ丸

有名なブロガーさんみたいに自分のツイートを記事に載せたい!

LiDo
LiDo

すっごく簡単にできるよ!

本記事の内容

  • ツイートを載せるメリット
  • cocoonでツイートを載せる方法
  • HTMLコードで載せる方法

こんにちは、リドです。
私は現在、初心者ブロガーで活動しています。

全ての記事ではないですが、自分のツイート記事に入れることがあります。
ツイートと記事を連携することにより双方からユーザーを獲得することを目指しています。

本記事は「cocoonで簡単に埋め込む方法」と「HTMLコードを生成する方法」を解説します。

自分のツイートをブログ記事に埋め込む

自分のツイートをブログ記事に埋め込む

多くのブロガーはブログとTwitterを同時に運用しています。
自分のツイート内容から記事を書く場合も出てくるでしょう。

記事にツイートを載せると下記の可能性があります。

  • Twitterの宣伝効果
  • ツイートをみた人がブログを見る
  • ツイートと記事が一致する

など総合的に網羅できます。

では、手順ごとにツイートを記事に埋め込む解説をします。

Cocoonでツイートを埋め込むやり方

Cocoonは15秒でできます。

(*当ブログはブロックエディタでの説明になります)

ワードプレス側で、
埋め込み > Twitterアイコンを選択。

埋め込み > Twitterアイコンを選択。

ツイッター側でツイートのURLを取得。

ツイッター側でツイートのURLを取得。

ワードプレス側で検索ボックスにURLをコピペすれば完成。

ワードプレス側で検索ボックスにURLコピペすれば完成!
LiDo
LiDo

Cocoonだと簡単だね!

埋め込み用のHTMLコードを生成する

まず、Twitter側で作業します。
載せたいツイートの右上端にある「下矢印」を選択。
ツイートを埋め込むを選択してください。

ツイートを埋め込むを選択してください。

すると、HTMLコードを生成するTwitter公式のサイトに飛びます。

Twitter公式のサイト

自動でコードが生成されているのでクリックすればコピー完了。

「What would you like to embed?」の検索ボックスにTwitterのURLを貼り、HTMLコードを生成するやり方もあります。

他にもオプション機能もあります。
「set customization options.」をクリックする。

How would you like this to look?
(翻訳:ツイートの背景を白か黒か選択)

What language would you like to display this in?
(翻訳:言語の変更)

Hide Conversation
(翻訳:リプを隠す)

Opt-out of tailoring Twitter
(翻訳:フォローボタンの設置)

また、検索ボックスに何も入れずにスクロールすると、下記の画面になります。

browse your options below

Or browse your options below
(翻訳:または以下のオプションを参照してください)

Embedded Tweet
(翻訳:埋め込みツイート)

Embedded Timeline
(翻訳:埋め込みタイムライン)

Select the button you’d like to use
(翻訳:使用するボタンを選択します)

いずれかのオプションを選択し、ツイートのURLを検索ボックスに入れるとHTMLコードが生成されます。

多数のカスタマイズもできますのでお好みでどうぞ。
ワードプレス側でHTMLを埋め込めば表示されます。

Twitterとブログを連携しよう

Twitterとブログを連携しよう
  • cocoonで簡単に埋め込む方法
  • HTMlコードを生成する方法

今回の記事は上記の内容を解説しました。

Cocoonでは埋め込み用のブロックがあるので、ツイートのURLで簡単に設置することができます。

カスタムしたHTMLで好みのツイートを貼り付けるやり方もポイント。

色々、試してみてください。

コメント

タイトルとURLをコピーしました