Yammer's embed code works fine with the Confluence HTML macro, but it doesn't work in the cloud version and it's a security risk to give every user on your server permission to insert HTML/JavaScript code into your pages. For example, it opens you up to cross-site scripting attacks. So instead, I wanted to write a user macro that would allow users to embed their own Yammer newsfeeds on demand.
The issue is related to the way that Confluence handles scripting in user macros. Unfortunately, Confluence seems to assume that you're using XHTML 1.x in your macros and so the native Yammer integration doesn't work. You get an error because Confluence wraps <![CDATA[]]> tags around your JavaScript code which breaks Yammer's JavaScript. This is leftover legacy from the days of the browser wars when everyone had their own standard and you had to hide incompatible code from older browsers.
So, without further ado, here is the macro:
Parameters:
- Macro Name: yammer-group-newsfeed
- Visibility: Visible to all users in Macro Browser (optional)
- Macro Title: Yammer Group Newsfeed
- Categories: External Content
- Icon URL: http://a2.mzstatic.com/us/r30/Purple6/v4/15/8a/92/158a924e-72fa-e678-2afe-284f6ea1b39f/icon175x175.jpeg
- Documentation: https://developer.yammer.com/docs/embed
- Macro Body Processing: Rendered
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## Macro title: Borderless Table | |
## Macro has a body: Y | |
## Body processing: Selected body processing option | |
## Output: Selected output option | |
## Developed by: Ismael Carlo | |
## Date created: 03/17/2016 | |
## Installed by: Ismael Carlo | |
## Yammer Group Newsfeed | |
## @param FeedId:title=FeedId|type=string|required=true|desc=Enter the Feed ID. You get this from the Group URL in Yammer. For more information look at the documentation. | |
## @param Height:title=Height|required=true|desc=The height of your Yammer window in the following format: ###px (Example: 400px) | |
## @param Width:title=Width|required=true|desc=The width of your Yammer window in the following format: ###px (Example: 400px) | |
<script type="text/javascript"> | |
loadScript('https://assets.yammer.com/assets/platform_embed.js'); | |
function loadScript(src) { | |
newjs= document.createElement( "script" ); | |
newjs.src = src; | |
newjs.type='text/javascript'; | |
head = document.getElementsByTagName( "head" )[0]; | |
head.appendChild(newjs); | |
} | |
if(window.attachEvent) { | |
window.attachEvent('onload', loadYam); | |
} else { | |
if(window.onload) { | |
var curronload = window.onload; | |
var newonload = function(evt) { | |
curronload(evt); | |
loadYam(evt); | |
}; | |
window.onload = newonload; | |
} else { | |
window.onload = loadYam; | |
} | |
} | |
function loadYam () { | |
yam.connect.embedFeed({ | |
"header": false, | |
"footer": false, | |
"hideNetworkName": true, | |
"container": "#embedded-feed", | |
"network": "fugro.com", | |
"feedType": "group", | |
"feedId": "$paramFeedId"}); | |
}; | |
</script> | |
<div id="embedded-feed" style="height:$paramHeight;width:$paramWidth;"> | |
</div> |