如何在新的 Google 协作平台中嵌入 Facebook 订阅源（使用 Apps 脚本）？答案

【问题标题】：How do I embed a Facebook Feed in the new Google Sites (using Apps Script)?如何在新的 Google 协作平台中嵌入 Facebook 订阅源（使用 Apps 脚本）？
【发布时间】：2017-06-23 22:42:27
【问题描述】：

我了解到您可以制作一个显示 Facebook 供稿的 Google Apps 脚本，然后将其嵌入到 Google 站点中，但我找不到更多关于如何执行此操作的信息，我也想不通自己搞定。

当我尝试使用 Facebook 提要制作 Apps Script Web 应用程序时，我收到如下错误：

Uncaught DOMException: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes.

这是从 Facebook Developers 复制“Facebook Javascript SDK”和“Page Feed”到 HTML 文件中并将其部署为 Web 应用程序。我认为这与 Apps Script 如何对您的代码进行沙箱处理有关，但我不知道我必须在这里做什么。

就此而言，即使我尝试使用一些静态 HTML 制作更简单的 Apps 脚本，当我尝试将其从云端硬盘嵌入到网站时，我也会收到错误消息“无法嵌入某些选定的项目”。

【问题讨论】：

标签： facebook google-apps-script google-sites google-sites-2016

【解决方案1】：

新版 Google 协作平台不支持 Google Apps 脚本。

【讨论】：

哇。好的。好吧，我想这完全排除了使用它的可能性，对我来说：/

【解决方案2】：

新的 Google 协作平台现在支持嵌入应用脚本（确保将应用脚本部署为网络应用，设置正确的权限，并使用 /exec url 而不是 /dev 嵌入）。

我发现由于沙盒，我无法将 facebook SDK 用于视频。我使用 iframe 解决方案而不是视频，但也许你可以尝试这样的提要（我假设你已经在 fb 中注册了你的应用程序，所以你可以获得生成令牌）：

在应用程序脚本中，创建一个 .gs 文件和一个 html 文件，大致如下所示（我实际上没有处理过返回提要，因此请检查返回的数据结构并进行相应调整）

//**feed.gs**
function doGet(e) {
  return HtmlService
         .createTemplateFromFile('my-html-file')
         .evaluate(); 
}

function getToken() {  //use your fb app info here (and make sure this script is protected / runs as you

    var url = 'https://graph.facebook.com'
    + '/oauth/access_token'
    + '?client_id=0000000000000000'
    + '&client_secret=0x0x0x0x0x0x0x0x0x0x0x0x'
    + '&grant_type=client_credentials';

    var response = UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
  
    var json = response.getContentText();
    var jsondata = JSON.parse(json);
  
    return jsondata.access_token;
  
}

function getFeed() {
  
    var url = 'https://graph.facebook.com'
    + '/your-page/feed'
    + '?access_token=' + encodeURIComponent(getToken());
  
    var response = UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
  
    var json = response.getContentText();
    var jsondata = JSON.parse(json);
    //Logger.log(jsondata);  //check this and adjust following for loop and html showFeed function accordingly
  
    var posts = {};

    for (var i in jsondata) {
        posts[i] = {"post":jsondata[i].message};
    }
  
    return posts;
    
}

<!--**my-html-file.html**-->
<!DOCTYPE html>
<html>
    <head>
        <base target="_top">

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script>
        // The code in this function runs when the page is loaded (asynchronous).
        $(function() {
            google.script.run
            .withSuccessHandler(showFeed)
            .withFailureHandler(onFailure)
            .getFeed();  //this function is back in .gs file and must return an array or object which gets auto-passed to the showFeed function below
        });
    
        function showFeed(posts) {  //parameter name must match array or object returned by getFeed in gs file
            var html = '';
            for (var p in posts) {
                html += '<p>' + posts[p].post + '</p>';  //instead of a string, you can build an array for speed
            }
            $('#feed').empty().append(html);  //if you used an array for the html, you'd split it here
        }
        function onFailure(error) {
            $('#feed').empty().append("Unable to retrieve feed: " + error.message); ;
        }
        </script>

    </head>
    <body>
    
        <div id="feed">
            Loading...
        </div>
   
    </body>
</html>

【讨论】：