完成品
大好きなあの人を温かく見守るアプリ「お気に入りトレース」がバージョンアップ！
Twitterに加えてFacebookのTLも見守れるようになりました。笑
Twitterで息してなくてもFacebookで息してるかもよ！
企画（と弁明）※ほぼ再掲
はじめに、ネットに落ちている「お気に入り」の最新情報を集約して（できれば１ページで）表示できるアプリを作りたいと考えました。
みんな好きな芸能人、ゲーム、漫画、アニメ、色々あると思うのですが、そういった「お気に入り」の情報を、あちこちに取りに行かなくても、勝手に手元に流れ込んでくるアプリが最終的な目標です。
とはいえ、いきなりそんな素敵なものは作れないので、今回は比較的難易度の低いTwitterの情報取得から着手しました。
どうせなら今役立つものになればと思って仕様を改造しているうちに、知人をストーキングするアプリになってた。翌日調子に乗ってFacebookも追加してた。そういう話です。
ベース
前回の自分の記事をベースにしてます。
最初から追いたい方はリンク先をご確認ください。
修正手順
①バックグラウンド色とフォントを変更。(CSSに「/------bg collor------/」以下を追加)
②３タブ目をFacebook用の枠に変更
③特定IDのFacebookTLを表示するよう変更
こちらを使用➡https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
④縦の長さを少し調整(変え方は↑のリンク先に詳しく書いてくれています。超丁寧！)
⑤雪を降らせてみました。(CSSに「/------snow effect------/」以下を追加。①があんま意味なくなった。)
ソース
プレビューで見る場合は大きいので0.25倍設定でお願いします。
See the Pen
お気に入りトレース2.0 by TAKA (@taka_xedge)
on CodePen.
以下の●●●●●●の部分を任意のIDに変更すれば「大好きなあの人を温かく見守るアプリ」の出来上がりです。。
<div class="col-sm-5 mx-auto">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v12.0" nonce="bpHQ0CoU"></script>
<div class="fb-page" data-href="https://www.facebook.com/●●●●●●" data-tabs="timeline" data-width="250" data-height="8000" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/●●●●●●" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/●●●●●●">●●●●●●</a></blockquote></div>
</div></div>
反省点
特になし。
ですが、ルール的なところはちょっと調べました。Facebookは個人はダメかなって感じですね。
なのでインスタも少し難しそう？
今後もそこらへんは気にしながらやろうと思います。