Embedding feeds in google sites - Desktop Liberation

Random blog posts

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

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

feed url. This is the URL of the feed you want to display
feed title. This will be shown next to the image and as a heading for the feeds.
max items. This is the maximum number of feed items to show.
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
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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

<?xml version="1.0" encoding="UTF-8" ?>

</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>

<table>

<tr>

<td>

</td>

</td>

</tr>

</table>

</div>

</div>

// 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 .

All formats are available from O'Reilly, Amazon and all good bookshops. You can also read a preview on O'Reilly

A video course over about 8 hours and 70 lessons taking you through the basics of Apps Script and JavaScript. Available at O'Reilly, Amazon, Infinite Skills & all good media outlets

Google Apps Script for Beginners: A video course over about 8 hours and 70 lessons taking you through the basics of Apps Script and JavaScript. Available from O'Reilly, Infinite Skills and all good media outlets

bruce mcpherson is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.mcpher.com. Permissions beyond the scope of this license may be available at code use guidelines