Google Data StudioをつかってFacebookページのいいね数を表示してみた

Relux Facebookページの「いいね！」の数を
社内の一番目立つところに置いてあるディスプレイに表示しました。
いいね数はリアルタイムに更新されるので
出社時と退社時で数値が増えているのが嬉しいです。

簡単にできるのでやり方をご紹介したいと思います。
サーバなどを用意する必要はありません！

つかったもの

• Facebook Graph API
• Google Apps Script
• Google Spread Sheet
• Google Data Studio
• Google Chrome Extension

手順

1. Google Spread Sheetを新規に作成

このシートはGoogle Data Studioのデータソースとして使用します。

2. Google Apps ScriptでFacebook GraphAPIを使用していいね数を取得

function myFunction() {
  var response = UrlFetchApp.fetch('https://graph.facebook.com/?id=rlx.jp&access_token=アクセストークン’);  
  var result = JSON.parse(response.getContentText());
  var range = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(1,1);
  range.setValue(result.likes);
}

Facebook Graph APIで取得した「いいね」の数をA1セルにセットしています。
プロジェクトのトリガーでmyFunction を定期的に実行するように設定します。

3. Google Data Studio で新しいレポートを作成

データソースに先程作成したGoogle Spread Sheetを指定します。

データの表示はスコアカードを使用しています。
データソースにはGoogleAnalyticsを指定することもできるので
PV数なども簡単にダッシュボードに表示することができます。

4. Google Chrome Extension の作成

Google Data Studioのデータは自動的に更新されず、
画面に表示される更新ボタンを押す必要があります。

ブラウザをリフレッシュするプラグインでは値が更新されなかったので

更新ボタンを一定間隔で押すだけのChrome拡張機能をつくりました。

manifest.json

{
  "content_scripts" : [
    {
      "matches" : [
        "https:\/\/datastudio.google.com\/*"
      ],
      "js" : [
        "content_scripts.js"
      ]
    }
  ],
  "manifest_version" : 2,
  "name" : "Google Data Studio Auto Refresh",
  "version" : "0.1"
}

content_scripts.js

function action() {
    var elements = document.getElementsByClassName("control-icon icon ng-scope");
    elements[0].click();
}

setInterval("action()", 60000);

これをChromeで読み込んで完成です。

---

社内でも好評です！工数をあまりかけずに簡単にできるので試してみてはいかがでしょうか？