Embedding feeds in google sites

Legacy
This page was about embedding gadgets into Google sites. Google has removed gadgets now but you may want to reuse some of the codes embedded into an iFrame.
If you have a web page already built that you want to include in your site, you simply need to include an Iframe gadget and use the web page url as your iframe src. There are Iframe gadgets available (just use insert/gadget and search for an iframe one), however Sites will automatically build an iframe gadget if you go into HTML edit mode and enter
<iframe src=”the url of your web page to embed”></iframe>
When you back to the editor, you can adjust the gadget properties to get the size and characteristics you want.
Page Content hide
1 Embedding feeds
2 Gadget preferences
3 Setting up a feed from your site
4 Here’s the code for the gadget.

Embedding feeds

Many news sites and blogs generate rss feeds which allow you to embed content from their site in yours. For this you need a special gadget. Again you can probably find one with insert/gadget, but it’s easy to build your own. That allows you to do some fancy things, like only showing the feeds when hovering over an image – and dynamically adjusting the height to accommodate a particular number of posts. I like to do this because I don’t want my site real estate to be dominated by feed links. Hovering over them reveals them.
Below is the feed from my blog using this gadget.
The hosted address for my version this gadget is as below. You can use it or copy and make your own.  To insert, go to insert/..More gadgets and insert by URL. It’s hosted at https://storage.googleapis.com/goinggas.com/public/hosting/sites/xliberation/xml/feed.xml
Here’s how to use the Google Feeds API in a gadget to manage your feed.

Gadget preferences

  1. feed url. This is the URL of the feed you want to display
  2. feed title. This will be shown next to the image and as a heading for the feeds.
  3. max items. This is the maximum number of feed items to show.
  4. Image url. This is a link to an image that will be displayed by the gadget. When hovered over, it will be hidden and replaced by the feeds
  5. remove duplicates. If the feed shows multiple entries to the same link it will remove them

You should set the height of the gadget to a small amount. It will be automatically adjusted to fit your RSS image, and then the number of feed items you want to display.

Setting up a feed from your site

You can even take a feed from your site. Just use the feed – your site/activity.xml. So in my case
https://ramblings.mcpher.com/activity.xml
in the feedurl parameter in the gadget gives me the feed below. It’s not actually a proper feed so it has a bit of hackery built into the gadget to figure out the link and remove duplicates.

Here’s the code for the gadget.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="feed gadget" height="100">
   <Require feature="dynamic-height"/>

 </ModulePrefs>

 <UserPref
 name="feedurl"
 required="true"
 datatype="string"
 display_name="feed url"
 default_value="https://ramblings.mcpher.com/ramblings-blog/default?alt=rss"/>

 <UserPref
 name="feedtitle"
 required="true"
 datatype="string"
 display_name="feed title"
 default_value="Feeds"/>

 <UserPref
 name="feeditems"
 required="true"
 datatype="string"
 display_name="max items to show"
 default_value="10"/>

 <UserPref
 name="imageurl"
 required="true"
 datatype="string"
 display_name="image url for activation"
 default_value="https://storage.googleapis.com/goinggas.com/public/hosting/sites/xliberation/image/feed.png"/>

  <UserPref
 name="removedups"
 required="true"
 datatype="bool"
 display_name="remove duplicate links"
 default_value="true"/>

  <Content type="html"><![CDATA[
        <style> {
            .feedbox {
                width:90%;
                font-size:.8em;
            }
            .feedtitle {
                font-weight:bold;
            }
            .feeditems {
                font-size:.7em;
            }
            .hover {
                display:inline-block;
            }
        }
        </style>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <div id="hover" class="hover">
            <table>
                <tr>
                    <td>
                        <img id="hoverimg" src="https://storage.googleapis.com/goinggas.com/public/hosting/sites/xliberation/image/feed.png">
                    </td>
                    <td id="tdtitle" class="feedtitle">

                    </td>
                </tr>
            </table>
        </div>

        <div class="feedbox" id="feedbox" style="display:none;">
            <div class="feedtitle" id="feedtitle"></div>
            <div class="feeditems" id="feeditems"></div>
        </div>

        <script>
        // register the entry point
        gadgets.util.registerOnLoadHandler(doFeed);

        function setVisiblity (e, value) {
          e.style.display = value ? "inline-block" : "none";
        }

        function getHeight (e) {
          return e.offsetHeight;
        }

        function doFeed() {
          // load the api
          google.load("feeds", "1");

          // this is the image that gets out of the way when hovered over
          var hoverElem = document.getElementById("hover");
          var hoverImg = document.getElementById("hoverimg");

          // get the pref parameters
          var prefs = new gadgets.Prefs();
          var feedUrl = prefs.getString("feedurl");
          var removeDups = prefs.getBool("removedups");
          var maxFeedItems = new Number(prefs.getString("feeditems"));

          // this is where the feeds will be stored
          var feedBox = document.getElementById("feedbox");
          var feedItems = document.getElementById("feeditems");
          var feedTitle = document.getElementById("feedtitle");
          var tdTitle = document.getElementById("tdtitle");
          feedTitle.innerHTML = prefs.getString("feedtitle");
          tdTitle.innerHTML = prefs.getString("feedtitle");

          // set up image events
          hoverImg.src = prefs.getString("imageurl");
     if(!hoverImg.src){
     console.log ("disabled feed display - no image provided");
     }

     hoverElem.addEventListener("mouseover",over , false);
       hoverElem.addEventListener("click",over , false);
     hoverElem.addEventListener ("load", function () {
     // when the image loads, get its height and adjust the gadget height to match
     gadgets.window.adjustHeight(getHeight(hoverElem));
     }, false);

          // happens on mouseover
          function over () {
            hoverElem.removeEventListener("mouseover", over );
            feedItems.addEventListener("mouseleave", out, false);
           setVisiblity(feedBox, true);
           setVisiblity(hoverElem, false);
           gadgets.window.adjustHeight(getHeight(feedBox));
          };

          // happens on mouseout
          function out () {
            hoverElem.addEventListener("mouseover",over , false);
            feedItems.removeEventListener("mouseleave",out);

           setVisiblity(feedBox, false);
           setVisiblity(hoverElem, true);
           gadgets.window.adjustHeight(getHeight(hoverElem));

          };

          function getDomainOb (url) {
            var a = document.createElement('a');
            a.setAttribute('href', url);
            return {
              domain:a.hostname,
              url:url,
              path:a.pathname,
              proto:a.protocol
            };
          }

          // patches up the target url according to the current synonym
          function sitesUrlPatch(currentOb, targetOb) {

            var modUrl = "";

            if (currentOb.domain === targetOb.domain &&
              currentOb.proto === targetOb.proto) {
              // no change needed
              return targetOb.url;
            }

            else {
              // typically this will be https://sites.google.com/a/dom.com/optroot/ .....
              // becoming
              // http://something.dom.com/....

              // find the first path element in the current - in my case it's /Home

              var root = /(\/[^\/]*)/.exec(currentOb.path) ;

              // now find that root in the target and capture the rest
              if (root && root.length > 1) {
                var tail = new RegExp ("(" + root[1].replace("/","\/") + ".*)" ).exec(targetOb.path);
                // construct the modified url
                if(tail && tail.length > 0) modUrl =  tail[1].toString();
              }

              return currentOb.proto + "//" + currentOb.domain + modUrl;
            }
          }

          // where to go when api is loaded
          google.setOnLoadCallback(makeFeeds);

            // generate the feeds rows
          function makeFeeds() {

            // kick off the feed
            var feed = new google.feeds.Feed(feedUrl);

            // if were removing dups, then we'll need to retrieve more
            feed.setNumEntries(maxFeedItems * (removeDups ? 5 : 1));

            // load it
            feed.load(function(content) {
              if(content.error) {
                feedItems.innerHTML = "error getting feed " + feedUrl;
              }
              else {

                // display the feed items.
                content.feed.entries.reduce (function (p,c) {

                  // sites activity feed doesnt have a link, so here's a hack for that
                  if (!c.link && c.content) {
                    var match = /(http[^"\\]*)/.exec(c.content);
                    if(match && match.length ==2) {
                      c.link = match[1];
                    }
                  }

                  // remove dups if necessary
                  if(!removeDups ||
                    (p.length < maxFeedItems && !p.some(function(k) {
                    return k === c.link;}))
                  ) {

                    // we're accepting this one
                    p.push(c.link);

           var current = getDomainOb(document.referrer.toString());
           var target = getDomainOb(c.link);
                    // TODO - replace with sitesUrlPatch ( current, target)
                    // render it
                    var item = document.createElement("div");
                    item.innerHTML = '<a href="' +
                      c.link + '" target="_blank">' +
                      c.title + '</a>';
                    feedItems.appendChild(item);

                  }

                  return p;
                },[]);
              }
            });
          }
      }
   </script>
  ]]>
  </Content>
</Module>

See more like this in Using a canvas in Google sites and Displaying analytics data on site pages

For help and more information join our forum, follow the blog or follow me on Twitter .