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

</p>
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script></p>

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


<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>

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


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

<script>

yam.connect.actionButton({

container: "#yammer-like",

network: "o365.areflyen.no",

action: "like"

});

</script>

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


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

<script>

yam.connect.actionButton({

container: "#yammer-follow",

network: "o365.areflyen.no",

action: "follow"

});

</script>

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.

1 thought on “Adding comments, likes and follow from Yammer into you own SharePoint solutions”

  1. Hello, that looks great. I just added comment code to my sharepoint page but I guess something is missing, as I have to login to Yammer first, even though I’m already logged into 365. Is there something that needs to be changed in the code you presented in order to make this work with single-sign-on based on SharePoint logged user?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s