Yammer Widget

Embedding a Yammer feed into an interact homepage is a fairly common request, so let's look at that.

Instructions

Looking at the developer documentation for Yammer, the embed code for the widget is available here. The offered code looks something like this.

<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
    <div id="embedded-feed" style="height:400px;width:500px;"></div> 
    <script>
        yam.connect.embedFeed({
            container: '#embedded-feed',
            network: 'fourleaf.com'  // network permalink (see below)
        });
    </script>
</body>
</html>

This fairly simple javascript is loading some code from an external site (https://c64.assets-yammer.com/assets/platform_embed.js) and then referencing it in the script section below using the global variable 'yam'

If you were to copy this straight into an HTML widget the page would work and the widget would display when you first save the page, but subsequent loads of the page would appear blank. Taking a look at the console in the Chrome developer tools will yield an error similar to this.

This is caused because the script references an object called 'yam', but this is being called before the object has been created, therefore the script will fail and the widget will appear blank.

How to fix it

In order to get around this some additional code needs adding to test whether or not the browser knows what 'yam' is yet. If it does, then great! Carry on! If it doesn't, then wait a little while and try again.

This is shown below

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:1000px;width:600px;">&nbsp;</div>
<script>
function loadYammer(){
if(window.yam){
     yam.connect.embedFeed({
            container: '#embedded-feed',
            network: 'interactgo.com'  // network permalink (see below)
        });
}else{
  setTimeout(loadYammer,500);
}
}
loadYammer();
    </script>

In the modified script above, the relevant yammer code is abstracted into a function. Line 5 in the sample above checks to see if yam is a known variable. If it is, then we can carry on as normal. If not then the else branch is executed which tells the browser to call the function again in 500 ms.

Next time it runs (500ms later), there's a good chance the script has now loaded and the browser knows about window.yam so it can continue, but again, if not then simply repeat the process by waiting 500ms and trying again.