2

I've read that you can make a Google Apps Script that shows a Facebook Feed, and then embed this in a Google Site, but I can't find any more information on how to do it and I can't figure it out myself.

When I try to make an Apps Script web app with a Facebook feed I get errors like:

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

This is from copying the "Facebook Javascript SDK" and "Page Feed" from Facebook Developers into an HTML file and deploying it as a web app. I gather it has something to do with how Apps Script sandboxes your code but I don't know what I have to do here.

For that matter, even if I try to make a simpler Apps Script with some static HTML, when I try to embed it from Drive into the site I get an error "Some of the selected items could not be embedded".

Rubén
  • 34,714
  • 9
  • 70
  • 166
Kenmore
  • 1,525
  • 3
  • 16
  • 39

2 Answers2

2

The New Google Sites doesn't support Google Apps Script.

Related question: Google App Scripts For New Google Sites Release

Rubén
  • 34,714
  • 9
  • 70
  • 166
0

The new Google Sites does now support embedding apps script (make sure to deploy the apps script as a web app, set the right permissions, and use the /exec url and not your /dev one to embed).

I found I couldn't use the facebook SDK for videos because of the sandboxing. I used an iframe solution instead for videos, but maybe you could try something like this for the feed (I'm assuming you've registered your app in fb so you can get generate tokens):

In apps script, create a .gs file and an html file, roughly along the lines below (I haven't actually worked with returning feeds, so check the returned data structure and adjust accordingly)

//**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>
kiden
  • 496
  • 4
  • 9