■増田にtwitterを埋め込む方法: サンプル有り

twitterのツイートを増田に埋め込む方法を丁寧に書きます。

＊さっき一部の半角文字を増田で書けないと書きましたが数値文字参照にすれば書けました。訂正します！教えてくれた人あんがとー！でもスーパーpre記法ではこのやり方通用しなかったのでシンタックスカラーは無し。

twitterから引用する埋め込みHTML要素を持ってくる

twitter.comに行き ツイートの ... ボタンを押す。ツイートをサイトに埋め込むを押す。そうすると以下のHTML要素がコピー出来る。ここではサンプルにしても無害そうなifttt公式アカウントのツイートを引用します。

<blockquote class="twitter-tweet" lang="ja"><p lang="en" dir="ltr">Connect <a href="https://twitter.com/instagram">@Instagram</a> to <a href="https://twitter.com/Dropbox">@Dropbox</a> and automagically save every photo you post for safe keeping <a href="https://t.co/YVrgcSJZAD">https://t.co/YVrgcSJZAD</a> <a href="https://t.co/3vEiFZ3ADW">pic.twitter.com/3vEiFZ3ADW</a></p>&mdash; IFTTT (@IFTTT) <a href="https://twitter.com/IFTTT/status/662023324306837504">2015, 11月 4</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

増田を書く

まあ増田を書く

増田にツイートを埋め込む

先ほどのHTML要素のうち末尾のscript要素は引用する際,埋め込んだtwitter引用からはみ出て表示されるので邪魔です。取りましょう。

末尾のこれを取ります。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

そうするとこうなります。これを増田にそのまま貼り付けてください。

<blockquote class="twitter-tweet" lang="ja"><p lang="en" dir="ltr">Connect <a href="https://twitter.com/instagram">@Instagram</a> to <a href="https://twitter.com/Dropbox">@Dropbox</a> and automagically save every photo you post for safe keeping <a href="https://t.co/YVrgcSJZAD">https://t.co/YVrgcSJZAD</a> <a href="https://t.co/3vEiFZ3ADW">pic.twitter.com/3vEiFZ3ADW</a></p>&mdash; IFTTT (@IFTTT) <a href="https://twitter.com/IFTTT/status/662023324306837504">2015, 11月 4</a></blockquote>

確認する

確認するボタンでツイートが埋め込まれてないのであれ？と思うかもしれませんがそのまま「この内容を登録する」を押してください。

ツイートの埋め込みを確認する

増田のタイムラインでも埋め込みツイートは表示されずたんなる引用として表示されます。あれ？となるけど書いた増田記事の本文URLを開いてください。本文を表示した場合のみツイートが埋め込みで表示されます。

Connect @Instagram to @Dropbox and automagically save every photo you post for safe keeping https://t.co/YVrgcSJZAD pic.twitter.com/3vEiFZ3ADW— IFTTT (@IFTTT) 2015, 11月 4

応用すると以下のようにツイート内にインラインされている動画を増田にインライン出来るなど夢が広がりますね。あと増田はコードサンプルを書くにはクソですね。

気づいてない人も多そうですが、『マッドマックス 怒りのデス・ロード』の主役マックス役は
『ダークナイト　ライジング』でベインを演じたトム・ハーディです
https://t.co/cJ816F5Mpu 
https://t.co/Qh0iuQKFTl— アメコミ大全集（TM） (@amecomic) 2015, 12月 1

参考

増田Twitter引用法まとめ

増田では半角山括弧が使えない？

増田だとスーパーpre記法内で&をそのまま書けない件

はてな記法一覧 - はてなダイアリーのヘルプ

IFTTT(@IFTTT)さん | Twitter

アメコミ大全集（TM）(@amecomic)さん | Twitter

ツイートする

Permalink | トラックバック(1) | 15:41