1 / 27

Facebook 貼文分析圖

Facebook 貼文分析圖. 第七組 吳仁捷 吳佳芷 陳珮珮. 簡介. 貼文 時間  最常在哪些時間發文呢？  作息 ？ 貼文類別  文字動態、連結、照片、影片 ？. 探究自己的 FB 使用習慣 及背後的小故事 (?). 技術. Facebook API Highcharts Amazon AWS. Demo !. 利用 Facebook API 登入並取得資料. Facebook Graph API 2.0. 建立自己的 Facebook APP. https://developers.facebook.com/. 資料取得流程.

tate-dennis
Télécharger la présentation

Facebook 貼文分析圖

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Facebook 貼文分析圖 第七組 吳仁捷 吳佳芷 陳珮珮

  2. 簡介 • 貼文時間  最常在哪些時間發文呢？作息？ • 貼文類別  文字動態、連結、照片、影片？ 探究自己的FB使用習慣及背後的小故事(?)

  3. 技術 • FacebookAPI • Highcharts • Amazon AWS

  4. Demo !

  5. 利用Facebook API登入並取得資料

  6. Facebook Graph API 2.0

  7. 建立自己的Facebook APP • https://developers.facebook.com/

  8. 資料取得流程 Facebook GET RequestAccess Tokenwhat you want Response = ‘connected’ JSONResponse 查詢資料 資料 確認登入狀態 已登入 選擇想分析的項目 使用者

  9. 實作細節 • 載入Facebook SDK for JavaScript • 取得登入狀態、AccessToken  FB.getLoginStatus(<Function>); • 登入按鈕 <fb:login-buttonscope="public_profile,read_stream" size="medium" onlogin=<function>> </fb:login-button> • 取得貼文資料 $.getJSON( 'https://graph.facebook.com/v2.0/me/posts', {fields:'created_time, type', access_token:token,limit:200}, function( res ) { //response Json type[i] = res.data[i].type time[i] = res.data[i]. created_time});

  10. 利用highcharts製作精美圖表

  11. Highcharts Line chart Area chart Pie chart Column chart

  12. Apireferencr

  13. example-pie chart $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: {text: title // “近期N則貼文數” }, tooltip: { pointFormat:'{series.name}:<b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { • allowPointSelect: true, • cursor: 'pointer', dataLabels: { • enabled: false}, showInLegend: true}}, series: [{ type: 'pie', name: name, data: displayArr//傳入array}]});

  14. Create Web server using AWS ec2

  15. Amazon Web Service ‧EC2 – for computation ‧S3(Simple Storage Service) ‧CloudFront – Use CDN to reduce loading time ‧FPS, RDS(relational database) ‧…

  16. Create an Instance of Amazon EC2 • Registration first!

  17. Create an Instance of Amazon EC2 • Launch Instance

  18. Create an Instance of Amazon EC2

  19. Create an Instance of Amazon EC2

  20. Create an Instance of Amazon EC2

  21. Create an Instance of Amazon EC2 • Download private key(*pem file)

  22. Create an Instance of Amazon EC2

  23. Create an Instance of Amazon EC2

  24. 遇到的問題 • Facebook API的改變 • 原本的題目:facebook好友分析圖:分析好友的感情狀態和性別分布 • 由於隱私權的設定,無法拿到friend list • 只好修改題目T_T

  25. Demo • 連結 http://54.254.238.2 • 由於FB APP認證時程要7~14個工作天，只有APP的管理者帳號不受限制，所以目前無法使用非管理者的帳號進行分析。結果可參考附圖。 • 或參考 • http://webcontest.mirlab.org/team/170

  26. Demo

  27. demo

More Related