Twitterの発言をBloggerの投稿に埋め込む方法

イントロダクション

いろいろなブログを見ていると、Twitterで発言した自分のコメントや他者のコメントを記事内に埋め込んで、コンテンツの一部としていることがあります。

このTwitterコメントの埋め込みですが、Bloggerの投稿に埋め込む場合にはどういう手順を踏めばできるのか試してみました。

Twitterコメントの埋め込みコード取得は一般的な方法で行います

Bloggerの投稿に埋め込みたいツイートの選択は、Twitterのタイムラインで行います。

埋め込みたいツイートを見つけたら、ツイートの右下のその他（「・・・」と表示されている部分）をクリックします。

ツイートのその他をクリック

表示されたメニューの中から、「ツイートをサイトに埋め込む」をクリックします。

「ツイートをサイトに埋め込む」をクリック

すると、ツイートを埋め込むためのコードが表示されます。
そのコードをクリップボードへコピーします。

ツイートの埋め込みコードのコピー

埋め込みコードをHTML編集モードで貼り付け

ツイートを埋め込みたい Blogger の投稿を編集状態で開きます。

通常の編集モードではツイートの埋め込みコードを張り付けることができないので、HTML編集モードに切り替えます。

HTML編集モードに切り替える

その後、ツイートを埋め込みたい場所に、先ほどコピーしたツイートの埋め込みコードを貼り付けます。

これで、ツイートの埋め込みは完成です。


その後、通常の編集モードに戻すと、次のようなテキストがツイートの埋め込み位置に表示されます。

Blogger に埋め込んだツイート
編集時はテキストのみだが、プレビューや公開をするとよく見るツイートのデザインになる

ここで表示されるものはよく見る埋め込みツイートのデザインではありませんが、プレビューや投稿を公開するとよく見る埋め込みツイートのデザインとなるので心配する必要はありません。

なお、HTMLの編集に慣れていないと、どこに埋め込みツイートのコードを張り付ければ、目的の場所に貼れるのかわからないことがあります。

その場合には、通常の編集モードにて、埋め込みツイートを張り付けたい場所に目印となる文章を入力しておきます。

その後、HTML編集モードで、その目印となる文章を上書きする形で埋め込みツイートのコードを張り付ければ、目的の場所に埋め込みツイートを表示することができます。

結果

次のように、Twitter のツイートを Blogger の投稿へ埋め込むことが出来ました。

パソコン作業中に音楽を聴くなら別デバイスで再生するのが安定性で最強！ - Dr.ウーパのコンピュータ備忘録 http://t.co/uwMZK30JFW #Zenback @zenbackさんから
— module_hiyoko_xp (@hiyokoXP) 2014, 11月 10

Twitter のツイートを Blogger の投稿へ埋め込めるようになると、自分のツイートをまとめたり、自分と知り合いの会話をまとめたりと、いろいろと表現の幅が広がります。


Twitter の埋め込みツイートを活用して、より Blogger を楽しく・便利に使っていきましょう！