Adding comments, likes and follow from Yammer into you own SharePoint solutions

With the Yammer Embed API adding comments, likes and follow content is quite easy to achieve. Using this embed API has a great benefit as it is developed and maintained by Yammer, and will require very little effort to integrate. Features beyond the actions (like and follow) and the feed (comments) can be accomplished with either the REST or JavaScript API, but this will require more effort (reference: https://developer.yammer.com/yammer-sdks/). Integrating Yammer requires an external JavaScript file to be referenced, one or more placeholders (HTML div-tags) and local JavaScript function call to the API to initialize the integration.

Example of a news article based on a Page Layout in SharePoint Online with like, follow and comments from Yammer:

yammer-sp2013-onpremises-1

Embed API reference

[code language="html"]</p>
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script></p>
[/code]

Comments Feed

Comments can be made for many types of activities, in this example "page". Yammer can maintain the relationship between the article and the feed either automatic by the URL in the browser, or it can be set explicit to ensure that the ID is unique. The first event on this article will trigger Yammer to create a activity page. This page can be enhanced with further metadata like a description and an image.

Example how this is displayed in SharePoint:

yammer-sp2013-onpremises-2

  Example how this is displayed in the  Yammer feed: yammer-sp2013-onpremises-3

Example on a activity page in Yammer:

yammer-sp2013-onpremises-4

Example code

[code language="html"]

<div id="yammer-page-feed" style="height:400px;width:500px;"></div>

<script>

yam.connect.embedFeed({

container: '#yammer-page-feed'

, network: 'o365.areflyen.no'

, feedType: 'open-graph'

, feedId: ''

, config: {

use_sso: true

, header: false

, footer: false

, showOpenGraphPreview: false

, defaultToCanonical: false

, hideNetworkName: false

, promptText: 'Comment on this article'

}

, objectProperties: {

url: ''

, type: 'page'

}

});

</script>

[/code]

Like button

The practical effect of the "Like" action is limited. The button only shows the state for the current user (Like/Liked) and generates an activity. No total count of likes is available. When a user likes a page, it will also automatically be followed.

yammer-sp2013-onpremises-5

Example code

[code language="html"]

<div id="yammer-like"></div>

<script>

yam.connect.actionButton({

container: "#yammer-like",

network: "o365.areflyen.no",

action: "like"

});

</script>

[/code]

Follow button

When following a page, you will subscribe to the activities on the current page. If you make a comment you will automatically follow the page.

yammer-sp2013-onpremises-6

Example code

[code language="html"]

<div id="yammer-like"></div>

<script>

yam.connect.actionButton({

container: "#yammer-follow",

network: "o365.areflyen.no",

action: "follow"

});

</script>

[/code]

Summary

Yammer gives us easy to use API to make the switch from SharePoint Social to Yammer possible. Even if these examples are demonstrated in SharePoint Online, the same solution can be applied to On-Premises. Gaining the best user experience On-Premises will be by implementing a Single Sign-On (SSO) solution between you local network and Yammer. Disclaimer: Both SharePoint and Yammer is in continuous development, and the API and user interface shown in the screenshots have changed from the time this post was written.