FACEBOOK 貼文分析圖

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

簡介 貼文時間

最常在哪些時間發文呢？作息？ 貼文類別

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

探究自己的 FB 使用習慣及背後的小故事 (?)

技術

Facebook API

Highcharts

Amazon AWS

DEMO !

利用 FACEBOOK API 登入並取得資料

FACEBOOK GRAPH API 2.0

建立自己的 FACEBOOK APP https://developers.facebook.com/

資料取得流程

使用者

Facebook

確認登入狀態

選擇想分析的項目

已登入 查詢資料

GET RequestAccess Tokenwhat you want

資料

JSON ResponseResponse = ‘connected’

實作細節 載入Facebook SDK for JavaScript

取得登入狀態、AccessToken

FB.getLoginStatus(<Function>);

登入按鈕<fb:login-button scope="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});

利用 HIGHCHARTS製作精美圖表

按一下圖示以新增圖片

HIGHCHARTS

Line chart

Area chart

Column chart

Pie chart

API REFERENCR

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}]});

CREATE WEB SERVER USING

AWS EC2

AMAZON WEB SERVICE

‧EC2 – for computation

‧S3(Simple Storage Service)

‧CloudFront – Use CDN to reduce loading time

‧FPS, RDS(relational database)

‧…

CREATE AN INSTANCE OF AMAZON EC2 Registration first!

CREATE AN INSTANCE OF AMAZON EC2 Launch Instance

CREATE AN INSTANCE OF AMAZON EC2

CREATE AN INSTANCE OF AMAZON EC2

CREATE AN INSTANCE OF AMAZON EC2

CREATE AN INSTANCE OF AMAZON EC2 Download private key(*pem file)

CREATE AN INSTANCE OF AMAZON EC2

CREATE AN INSTANCE OF AMAZON EC2

遇到的問題

Facebook API 的改變 原本的題目 : facebook 好友分析圖 : 分析好友的感情狀態和性別分

布 由於隱私權的設定 , 無法拿到 friend list 只好修改題目 T_T

DEMO

連結 http://54.254.238.2

由於 FB APP 認證時程要 7~14 個工作天，只有 APP 的管理者帳號不受限制，所以目前無法使用非管理者的帳號進行分析。結果可參考附圖。

或參考 http://webcontest.mirlab.org/team/170

DEMO

DEMO