

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

すっごく簡単にできるよ!
本記事の内容
- ツイートを載せるメリット
- cocoonでツイートを載せる方法
- HTMLコードで載せる方法
こんにちは、リドです。
私は現在、初心者ブロガーで活動しています。
全ての記事ではないですが、自分のツイート記事に入れることがあります。
ツイートと記事を連携することにより双方からユーザーを獲得することを目指しています。
本記事は「cocoonで簡単に埋め込む方法」と「HTMLコードを生成する方法」を解説します。
自分のツイートをブログ記事に埋め込む

多くのブロガーはブログとTwitterを同時に運用しています。
自分のツイート内容から記事を書く場合も出てくるでしょう。
記事にツイートを載せると下記の可能性があります。
- Twitterの宣伝効果
- ツイートをみた人がブログを見る
- ツイートと記事が一致する
など総合的に網羅できます。
では、手順ごとにツイートを記事に埋め込む解説をします。
Cocoonでツイートを埋め込むやり方
Cocoonは15秒でできます。
(*当ブログはブロックエディタでの説明になります)
ワードプレス側で、
埋め込み > Twitterアイコンを選択。

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

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


Cocoonだと簡単だね!
埋め込み用のHTMLコードを生成する
まず、Twitter側で作業します。
載せたいツイートの右上端にある「下矢印」を選択。
ツイートを埋め込むを選択してください。

すると、HTMLコードを生成する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
(翻訳:フォローボタンの設置)
また、検索ボックスに何も入れずにスクロールすると、下記の画面になります。

Or browse your options below
(翻訳:または以下のオプションを参照してください)
Embedded Tweet
(翻訳:埋め込みツイート)
Embedded Timeline
(翻訳:埋め込みタイムライン)
Select the button you’d like to use
(翻訳:使用するボタンを選択します)
いずれかのオプションを選択し、ツイートのURLを検索ボックスに入れるとHTMLコードが生成されます。
多数のカスタマイズもできますのでお好みでどうぞ。
ワードプレス側でHTMLを埋め込めば表示されます。
Twitterとブログを連携しよう

- cocoonで簡単に埋め込む方法
- HTMlコードを生成する方法
今回の記事は上記の内容を解説しました。
Cocoonでは埋め込み用のブロックがあるので、ツイートのURLで簡単に設置することができます。
カスタムしたHTMLで好みのツイートを貼り付けるやり方もポイント。
色々、試してみてください。
コメント