どうも@ちゃっぺです!
最近このブログ用にツイッターを始めて、素敵なサイトのようにツイッターをブログのサイドバーや記事内に埋め込みたいなと思っていろいろググって調べました。かなり前からツイッターを埋め込む機能は提供されていて記事もいろいろあるんですが、スマホでやると意外に手こずりました。自分が手こずった点も踏まえて最新の方法を紹介します!
スポンサーリンク
設定→ウィジェット
まずツイッターの設定で「ウィジェット」を探します。ツイッターのヘルプにも埋め込みの方法の説明がありますが、「ウィジェット」から埋め込みのコードが取得できると書かれています。
さっそくツイッターを起動して設定を開いてみる。
あれ?設定→ウィジェットなんてないやん( ・`д・´)
あーー、アプリだとみれないのね。ブラウザで開いてみよう!
「アカウント」→「設定(歯車マーク)」
やっぱだめやーーん( TДT)
いくら調べてもでてこない。。。ググってよくわからん。
もしかしてだけどー!もしかしてだけどー!ヽ(゚д゚ヽ)(ノ゚д゚)ノ!!
これってPCでしか使えない機能じゃないの~
ビンゴ!!
スマホからだと、ブラウザの「PC版サイトをみる」ででてきました!
→スマホでPCサイト表示する方法(iphone/android)
そういうことなの(。・`з・)ノ
スポンサーリンク
埋め込みコードを取得する
やっとウィジェットがみつかったので、こっからはサクサクいっちゃいます!
ウィジェットを選ぶと右上の方に新規作成ボタンを押します。
すると次の画面がでてきます。ここで埋め込みたいユーザーのIDを入力して下の「ウィジェットを作成」ボタンを押します。
するとプレビューが表示されて、プレビューの下にコードが表示されます!
ユーザIDがわかれば誰のツイッターでもタイムラインのコードを取得できます!
例えば「おんすう ふらたろう」のツイッターを検索してふらたろうのタイムラインを入れ込んだりもできます!
(おんすう ふらたろうの下の「@furataro」がユーザーID)
こんな感じです!!
検索結果の場合
検索結果を貼り付けたい場合は新規作成→「タイムラインソースの選択」がデフォルトは「ユーザータイムライン」タブが選択されているので「検索」タブに切り替えます。すると以下の画面になります。
「検索クエリ」に検索したい文字列を入力します。ハッシュタグも使えます!(例は世界卓球をハッシュタグで検索した場合)
あとはユーザータイムラインの方法と同様に下の方にある「変更を保存」ボタンを押すとプレビューがでてきてコードもでてきます。
※ここで注意点があります。
検索にした場合に、ふつうに入力すると例のように検索に引っかからなかったり関係ないツイートが入ってきたりすることがあります。
(つわみんが見つからない!!つわはすさんって誰やねん!!)
正確なツイッターの仕様はわからないので理由はわかりませんが、キーワードを””(ダブルクォーテーション)で囲ってあげるとうまくいきました!
検索クエリに”つわみん”といれたら期待したつわみんのツイートが出てきました!
ブログに張り付ける
あとは出力されたコードをすべてコピーして貼り付けるだけです!以下のコードを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>
下のように表示されます!
まとめ
いかがでしたでしょうか。ツイッターのタイムラインが埋め込んで表示されたときは結構感動しました。みなさんもぜひばりばりツイッターを埋め込んでみてください!
わたしが初めて記事内にツイッターを埋め込んだ記事はこちら。しまねのゆるキャラ応援よろしくお願いします( ´∀`)
最後まで読んでいただいてありがとうございます!
だんだん!
コメント
初めまして。コメント失礼致します。にわにわとりです。
Android&iPhoneからTwitterを埋め込む方法をグーグルから検索してこちらに来させて頂きました。
大変有力な情報を聞けて感謝致します。
私はGoogle ChromeやAndroid既存のブラウザからTwitterへアクセスしてログインし、PC表示にしたのですが、PCブラウザを表示することが出来ませんでした。
もしかしたら、私の用な人もいるのでは無いかと思い、真に勝手ながら補足させて頂きます。
ただ、Androidの方法のみしか分からなかったのでその点は御了承下さい。
AndroidでTwitterをPC表示に出来ない場合は、PCブラウザを閲覧するための専用のアプリが必要なようです。
PCブラウザを開くアプリは様々ありますが、私が選んだのはLightningというアプリでした。
Google PlayよりLightningと検索すると表示されます。
これを使うことにより、AndroidからPCブラウザを表示出来ます。
※アプリのダウンロードは自己責任でお願いします。
あとは、こちらの@ちゃっぺ様の方法で行けます。
参考になれば幸いです。
にわにわとりさん
初めまして@ちゃっぺです!ブログみてくださりありがとうございます。またご返事が遅くなってしまいすみません。。。記事を書いた当時はOS:Androidでブラウザ:ChromeでPC表示できていたのですが、今やってみるとうまくいきませんでした。私の方でも他のブラウザで確認してLightningのようにPC表示ができるブラウザなどを確認して記事を補足したいと思います。コメント頂きありがとうございましたm(_ _)m