ブログの中にTwitterのツイートを埋め込んでみたいんだけど・・・
ちゃわじぃツイートの埋め込みはシンプルな操作で簡単にできます！
ツイートを埋め込むことで、ビジュアル的に見やすくなること間違いなしなので、早速やっていきましょう！
この記事を読んだらわかること
- SWELLでツイートを記事内に埋め込む方法２つ！
- Twitterのタイムラインを表示・埋め込む方法
- Twitter埋め込みのメリット
SWELLのツイッター埋め込みの2通りの方法
Twitterをブログに埋め込む方法は下記の2通りあります。
- Twittter URL
- カスタムHTML
どちらの方法も簡単にできますが、
- 埋め込んだ画像の大きさ
- ページ表示速度
に違いが出ます
これに関しては後述しますので、お好みの方をご使用ください！
ちゃわじぃどっちでもあっという間にできてしまいますよ！
Twitter URLを用いる方法
主な流れは下の通りです
- 該当tweetのリンクURLをコピー
- 投稿編集画面でTwitterブロックを選択
- TwitterブロックにコピーしたURLを貼り付ける
①該当ツイート右下の共有マークをクリック
②Copy link to Tweet（リンクをコピー）をクリック
①＋ボタンでTwitterと検索したらアイコンが表示されるので選択
②こちらに先ほどコピーしたURLを貼り付ければ完成です！
カスタムHTMLを用いる方法
主な流れは下の通りです
- 該当tweetのコードをコピー
- 投稿編集画面でカスタムHTMLブロックを選択
- カスタムHTMLブロックにコピーしたコードを貼り付ける
①該当ツイート右上の「・・・」をクリック
②でてきたメニューの中から「ツイートを埋め込む」を選択
③Copy Code（コードをコピー）をクリック！
①＋ボタンでHTMLと検索したらカスタムHTMLが表示されるので選択
②こちらに先ほどコピーしたコードを貼り付ければ完成です！
２つの方法の違い
２つの方法の違いを図で示すとこうなります
Twitter URLを用いた場合
カスタムHTMLを用いた場合
ブログ開始約1ヶ月時点の振り返り☀️
— チャイジイ@2ヶ月目ブロガー (@chawajy) October 22, 2022
•1記事書くのに4〜8時間は要す😭
•タイトルとメタディスクリプション大事🤔
•無趣味でも意外と続けられる😳
•結果出してる人のブログは圧倒的に読みやすいし、親切な方多し☺️
•Google先生の心はまだ読めない🤪#ブログ初心者#ブログ仲間と繋がりたい
微々たる違いですが、わずかにカスタムHTMLを用いた場合の方が大きく表示されるようです。
またページ表示速度に関していうと、
URLを用いた場合よりもカスタムHTMLを用いたほうが速くなります。
したがって
Twitterのタイムラインを埋め込む方法
つづいてこんな感じでTwitterのタイムラインをブログに埋め込む方法を解説します
Tweets by pinokio_hat主な流れは下の通りです
- Twitterの該当アカウントのユーザー名をコピー
- Twitter Publishにアクセス
- Enbedded Timelineを選択
- 表示されたコードをカスタムHTMLブロックに貼り付ける
タイムラインに表示したいTwitterアカウントのユーザー名をコピーしましょう
コードが表示されますので、これをコピーして記事編集画面でカスタムHTMLブロックに貼り付ければ完了です（ツイートの埋め込み方法と同様です）
SWELLでTwitterを埋め込むメリット
Twitterの埋め込み機能を利用することで
- 口コミを表示できる
- インフルエンサーのツイートを引用できる
などのメリットがあり、ブログ記事の信ぴょう性を高めることができます！
皆さんもつかってみてくださいね！
コメント