iphoneやAndroidでブログにツイッターを埋め込む方法( ・`д・´)

どうも@ちゃっぺです！

最近このブログ用にツイッターを始めて、素敵なサイトのようにツイッターをブログのサイドバーや記事内に埋め込みたいなと思っていろいろググって調べました。かなり前からツイッターを埋め込む機能は提供されていて記事もいろいろあるんですが、スマホでやると意外に手こずりました。自分が手こずった点も踏まえて最新の方法を紹介します！

設定→ウィジェット

まずツイッターの設定で「ウィジェット」を探します。ツイッターのヘルプにも埋め込みの方法の説明がありますが、「ウィジェット」から埋め込みのコードが取得できると書かれています。

さっそくツイッターを起動して設定を開いてみる。

あれ？設定→ウィジェットなんてないやん( ・`д・´)

あーー、アプリだとみれないのね。ブラウザで開いてみよう！

「アカウント」→「設定（歯車マーク）」

やっぱだめやーーん(　ＴДＴ)

いくら調べてもでてこない。。。ググってよくわからん。

もしかしてだけどー！もしかしてだけどー！ヽ(ﾟдﾟヽ)(ﾉﾟдﾟ)ﾉ!!

これってPCでしか使えない機能じゃないの～

ビンゴ！！

スマホからだと、ブラウザの「PC版サイトをみる」ででてきました！

→スマホでPCサイト表示する方法(iphone/android)

そういうことなの(。･`з･)ﾉ

埋め込みコードを取得する

やっとウィジェットがみつかったので、こっからはサクサクいっちゃいます！

ウィジェットを選ぶと右上の方に新規作成ボタンを押します。

すると次の画面がでてきます。ここで埋め込みたいユーザーのIDを入力して下の「ウィジェットを作成」ボタンを押します。

するとプレビューが表示されて、プレビューの下にコードが表示されます！

ユーザIDがわかれば誰のツイッターでもタイムラインのコードを取得できます！

例えば「おんすう　ふらたろう」のツイッターを検索してふらたろうのタイムラインを入れ込んだりもできます！

（おんすう　ふらたろうの下の「@furataro」がユーザーID）

@furataroさんのツイート

こんな感じです！！

検索結果の場合

検索結果を貼り付けたい場合は新規作成→「タイムラインソースの選択」がデフォルトは「ユーザータイムライン」タブが選択されているので「検索」タブに切り替えます。すると以下の画面になります。

「検索クエリ」に検索したい文字列を入力します。ハッシュタグも使えます！（例は世界卓球をハッシュタグで検索した場合）

あとはユーザータイムラインの方法と同様に下の方にある「変更を保存」ボタンを押すとプレビューがでてきてコードもでてきます。

※ここで注意点があります。

検索にした場合に、ふつうに入力すると例のように検索に引っかからなかったり関係ないツイートが入ってきたりすることがあります。

（つわみんが見つからない！！つわはすさんって誰やねん！！）

正確なツイッターの仕様はわからないので理由はわかりませんが、キーワードを””（ダブルクォーテーション）で囲ってあげるとうまくいきました！

検索クエリに”つわみん”といれたら期待したつわみんのツイートが出てきました！

ブログに張り付ける

あとは出力されたコードをすべてコピーして貼り付けるだけです！以下のコードをhtmlに追加すると

<a class="twitter-timeline" href="https://twitter.com/search?q=%E2%80%9D%E3%81%A4%E3%82%8F%E3%81%BF%E3%82%93%E2%80%9D" data-widget-id="597909684884901888">”つわみん”に関するツイート</a>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

下のように表示されます！

”つわみん”に関するツイート

まとめ

いかがでしたでしょうか。ツイッターのタイムラインが埋め込んで表示されたときは結構感動しました。みなさんもぜひばりばりツイッターを埋め込んでみてください！

わたしが初めて記事内にツイッターを埋め込んだ記事はこちら。しまねのゆるキャラ応援よろしくお願いします( ´∀`)

最後まで読んでいただいてありがとうございます！

だんだん！