One of the use cases for Yammer Embed is to provide a commenting system for SharePoint pages. This can be achieved using the Yammer Embed Open Graph method. It is possible to generate the necessary code for this using the Yammer Widget (which is my preferred way as you can test the options as you go) or code from scratch using the published documentation. An example code snippet is shown below:
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:500px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed'
, network: 'your_network_name.com'
, feedType: 'open-graph'
, config: {
header: false
, footer: false
, showOpenGraphPreview: false
, promptText: "Comment on this page"
, defaultGroupId: 4191007
}
});
</script>
I recommend playing with the Yammer Widget to test the configuration options.
Using Yammer SSO and Yammer DSync?
If you are using Yammer SSO and Yammer DSync in your environment then you will need to adjust your code by adding the use_sso: true element to the configuration section. You will also need to be very aware that Yammer SSO and Yammer DSync are being deprecated and will stop working after December 1st, 2016. You will not be able to set up new configurations with Yammer SSO and DSync after April 1st, 2016. An example code snippet is shown below:
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:500px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed'
, network: 'your_network_name.com'
, feedType: 'open-graph'
, config: {
use_sso: true
, header: false
, footer: false
, showOpenGraphPreview: false
, promptText: "Comment on this page"
, defaultGroupId: 4191007
},
"objectProperties": {
"url": location.href,
"description" : " Comments feed for page ",
"title": document.title + " (captured with document.title)",
"image": "https://mottmac.sharepoint.com/sandpit/Documents/CompassIcon_100.jpg",
"type": "page",
}
});
</script>
Adding the code to SharePoint Online
There are a couple of options for adding the embed code to SharePoint Online and I’ll cover them in detail in another post. If you wish to test out your code, simply paste it into a Script Editor Web Part. The result will look something like this:
Creating a comment using the feed will send details of the page to Yammer which would then create a specific Yammer page to hold the comments. The result in Yammer will be:
In my opinion, the outcome is less than optimal and to understand why we need to go behind the scenes.
What is happening behind the scenes
When you post using Yammer Embed, it attempts to resolve information about the SharePoint page using a behind the scenes Yammer service (which was previously Embed.ly.) It then uses this information to set items like the name of the page in Yammer and the descriptive text. However, this service does not have the ability to resolve metadata from a page that requires authentication to access, is located behind a firewall etc. This inability includes pages in SharePoint Online as they are located behind an exterior ‘Sign in to Office 365’ sign-in page. When the service attempts to resolve information, the ‘Sign in to Office 365’ page gets in the way. The result is the incomplete capture of information and pages in Yammer sharing the Title ‘Sign in to Office 365’ and Descriptive text ‘It looks like you are on a slow connection. We’ve disabled some images to speed things up…’. Each page is unique as it uses the URL from the SharePoint page but the experience is sub-optimal, for example, searching for a particular page will result in many identical search results.
A solution
The solution is to include the information Yammer needs to help the service resolve the page information. This is achieved using objectProperties in the Embed code. Unfortunately, you cannot use the Yammer Widget for this – though I hope in the future they can provide some common examples. In the case of SharePoint, you will also need to know some SharePoint properties so you may need to enlist the help of your friendly developer. The method is to add a section to the Embed code that provides the Open Graph metadata for consumption by Yammer (which in turn it will use to create the page). An example code snippet is shown below:
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:500px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed'
, network: 'your_network_name.com'
, feedType: 'open-graph'
, config: {
header: false
, footer: false
, showOpenGraphPreview: false
, promptText: "Comment on this page"
, defaultGroupId: 4191007
},
"objectProperties": {
"url": location.href,
"description" : " Comments feed for page ",
"title": document.title + " (captured with document.title)",
"image": "https://your_sharepoint.com/sandpit/Documents/CompassIcon_100.jpg",
"type": "page",
}
});
</script>
Note the comma that has been added at the end of Line#16. The code will fail if the comma is omitted. The result in SharePoint will look something like this:
With the corresponding page in Yammer:
What the code is doing
The purpose of each item in the snippet is as follows:
[Line #18] “url”: location.href this sets the URL property used in the Yammer page to that of the Page in SharePoint. (location.href is a SharePoint property)
[Line #19] “description” : ” Comments feed for page “ this sets the description text that will appear on the Yammer page. In this example I have used text but you can use a SharePoint page property, for example if you are using a Byline property in the page or use a combination of property and text (see next item for an example).
[Line #20] “title”: document.title + ” (captured with document.title)” This sets the Yammer page title to that of the SharePoint page and appends an additional snippet of text to the title. A potential gotcha with this is if you change the Title of the SharePoint page after it is created. The Title field will use the original name unless you edit it. (I’ll cover changing this in another post.) As with other items you could use a different SharePoint page property to populate this item. (document.title is a SharePoint property)
[Line #21] “image”: https://your_sharepoint.com/sandpit/Documents/CompassIcon_100.jpg This sets the image shown in the page header of the Yammer page (very much like a Group icon). In this example I have set it to use our Intranet icon.
[Line #22] [ “type”: “page” ] This tells Yammer that the object is a page. If you were using this solution say for Office 365 Video you might set this to “video”.
Wrap up
And there you have it, a way of using Yammer Embed in SharePoint Online. In future posts I’ll cover methods of managing instances of Yammer Embed in SharePoint Online as well as items like renaming of SharePoint pages.
