FACEBOOK 貼文分析圖

(1)

FACEBOOK 貼文分析圖

第七組吳仁捷吳佳芷陳珮珮

(2)

簡介

貼文時間

 最常在哪些時間發文呢？作息？

貼文類別

 文字動態、連結、照片、影片？

探究自己的 FB 使用習慣

及背後的小故事 (?)

(3)

技術

Facebook API Highcharts

Amazon AWS

(4)

DEMO !

(5)

利用 FACEBOOK API

登入並取得資料

(6)

FACEBOOK GRAPH API 2.0

(7)

建立自己的 FACEBOOK APP

https://developers.facebook.com/

(8)

資料取得流程

使用者 Facebook

確認登入狀態

選擇想分析的項目

已登入查詢資料

GET Request Access Token what you want

資料 JSON Response Response =

‘connected’

(9)

實作細節

載入Facebook SDK for JavaScript 取得登入狀態、AccessToken

 FB.getLoginStatus(<Function>);

登入按鈕

<fb:login-button scope="public_profile,read_stream" siz e="medium" onlogin=<function>> </fb:login-button>

取得貼文資料 $.getJSON( 'https://graph.facebook.com/v2.0/me/p osts', {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

Column chart

Pie chart

(12)

API REFERENCR

(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 // 傳入 arra y}]});

(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 AM AZON EC2

Registration first!

(17)

CREATE AN INSTANCE OF AM AZON EC2

Launch Instance

(18)

CREATE AN INSTANCE OF AM

AZON EC2

(19)

CREATE AN INSTANCE OF AM

AZON EC2

(20)

CREATE AN INSTANCE OF AM

AZON EC2

(21)

CREATE AN INSTANCE OF AM AZON EC2

Download private key(*pem file)

(22)

CREATE AN INSTANCE OF AM

AZON EC2

(23)

CREATE AN INSTANCE OF AM

AZON 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)

FACEBOOK 貼文分析 圖