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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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" ?> <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> |
For help and more information join our forum, follow the blog or follow me on Twitter .