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

どうも@ちゃっぺです!

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

スポンサーリンク

設定→ウィジェット

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

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

20150513_190206

20150513_121529

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

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

「アカウント」→「設定(歯車マーク)」

20150513_120356

20150513_190812

20150513_190833

20150513_190948

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

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

もしかしてだけどー!もしかしてだけどー!ヽ(゚д゚ヽ)(ノ゚д゚)ノ!!

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

20150514_075214

20150513_120731

20150513_121608

ビンゴ!!

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

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

そういうことなの(。・`з・)ノ

スポンサーリンク

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

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

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

20150513_120931

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

20150513_121114

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

20150513_121243

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

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

20150514_084257

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


こんな感じです!!

検索結果の場合

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

20150513_121432

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

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

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

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

20150514_123134

つわみんが見つからない!!つわはすさんって誰やねん!!)

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

20150513_121359

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

ブログに張り付ける

あとは出力されたコードをすべてコピーして貼り付けるだけです!以下のコードを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>

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


まとめ

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

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

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

だんだん!

この記事が気に入ったら
いいYo!しよう

著者にYoが届いて喜びます(/▽゚\)

→「いいYo!」ってなあに?

Twitterでちゃっぺをフォローしよう!

スポンサーリンク
ad_pc1
ad_pc1

コメント

  1. 初めまして。コメント失礼致します。にわにわとりです。

    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

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>