Wednesday, August 27, 2014

How to use Yammer Embed

What is Yammer Embed?
Yammer Embed is used to display data from Yammer in your HTML based applications (e.g. SharePoint 2010/2013 Intranet and Team Sites, ASP.Net or Java Web Sites, CRM Tools etc.).
The specified Yammer feeds are displayed as Widgets within your existing application.

Prerequisites
  • To use Embed you need a HTML container which is 400 pixels or larger.
  • Supported desktop browsers include IE 8 and above, latest versions of Chrome, Safari and Firefox
Usage
Using embed, you can display My Feed, a Group Feed, a Topic Feed, a User Feed or an Open Graph object feed. Yammer Embed displays a snapshot of a specified feed and functions as a scaled-down version of Yammer.com.
It is simple to use Yammer Embed and any business user with required permissions can use it.

How do I configure Yammer Embed?
Let’s take an example of a Yammer group and try to show the same on a SharePoint 2010 page.

1. In Yammer, Navigate to the group for which you want to embed the feed. On the bottom right hand side, under Access Options, you will find the link “Embed this group in your site”.
clip_image001

2. Clicking on the link will open a popup with the HTML generated for you.
clip_image002

3. Copy and paste the HTML to notepad (or any script editor tool of your choice).
clip_image003

4. Save the notepad file on your local computer (e.g. MyYammerGroupEmbed.html).

5. Navigate to your SharePoint Site, navigate to a document library, and upload the file created in previous step.
I recommended you to choose “Site Assets” library or a library you may have created to store your script and image files. This is only a recommendation and any existing or new document library can be used for this purpose.
Make a note of the document path in the SharePoint library (e.g. /SiteAssets/MyYammerGroupEmbed.html) as it will be required in the next step.

6. Navigate to the SharePoint page where you will like to embed the Yammer feed, and insert a Content Editor Web Part(CEWP) on the SharePoint 2010 page.
CEWP is available in the “Media and Content” category of web parts.

If you have never used a CEWP before, you can refer this link below:
http://office.microsoft.com/en-in/sharepoint-foundation-help/using-the-content-editor-web-part-HA101794745.aspx

7. Edit the Web Part properties and under Content Link, add the path to the .html file uploaded in previous step. Click on Test Link to ensure the path is correct.
clip_image004

8. Optionally, under Appearance, you might want to set the Chrome Type to None in the web part properties.

9. Click on OK to save the web part properties and save/publish the page.

10. If the user is not already logged in, the user may be shown the Yammer Login UI on the SharePoint page:
clip_image005

11. User can click on the Login button and authenticate with Yammer. After login, the Yammer Feed will be displayed on the page as follows.
clip_image007


Singe Sign On:
Yammer Embed supports Single Sign On. To use SSO, modify the previously generated HTML add a config section with use_sso: true and network: 'your_yammer_network.com'

<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script>
yam.connect.embedFeed({
container: '#embedded-feed'
, network: 'vinaybhatia.com'
, feedType: 'group'
, feedId: '3903471'
, config: {
use_sso: true
, header: true
, footer: true
, showOpenGraphPreview: false
, defaultToCanonical: false
, hideNetworkName: false
}
});
</script>

Configuration Widget:

Yammer provides an easy to use configuration tool which can be used to generate and prototype the HTML.
https://www.yammer.com/widget/configure
To find a feed id for a particular Yammer group, navigate to the Yammer group and note the feedID in the URL.
https://www.yammer.com/vinaybhatia.com/#/threads/inGroup?type=in_group&feedId=3903471

Security:
Yammer Embed respects the security settings configured in Yammer. Users will need to be logged in to view the feed. The feed is shown based on users permissions in Yammer. For a private group, user will get to see the messages only if user is a member of that private group.

Troubleshooting:
Internet Explorer needs to have Yammer configured in the IE “Trusted Site Zone”.  In this setting, add https://*.yammer.com

What else is possible using Yammer Embed?
  • Open Graph Feed
Add a social commenting layer to a page by using the following script.
<div id="embedded-feed"></div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script>
yam.connect.embedFeed({
container: "#embedded-feed",
feedType: "open-graph"
});
</script>

It will display UI where users can collaborate and discuss about the page.
clip_image008
Please note that if the URL of the page changes (say while migrating from SharePoint 2010 to Office 365), the previous messages for the page will be lost.
  • Like:
We can use Yammer Embed to drop a Like button to a page. The script for same is as follows
<div id="embedded-like"></div>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script> yam.connect.actionButton({
container: "#embedded-like",
network: "vinaybhatia.com",
action: "like"
});
</script>

clip_image009clip_image010
After user clicks the button, the Like button changes to Liked and it appears in the Yammer Activity Stream as “<UserName> likes <PageURL>”
clip_image011
  • Follow
Similar to Like, there is a Follow action which shows Follow and Followed button on a page.
clip_image012clip_image013
To know more about Yammer Embed, visit the following links:

12 comments:

Rahul Vartak said...

Thanks a lot Vinay for this post !! This will be very useful to many :)

William Hardwick said...

Thanks Rahul, works like a charm. Now I can have my yammer page show on the main companyweb page!

http://humwebmarketing.com

Anonymous said...

how can i style or overwrite the embedded yammer style ?

Vinay Bhatia said...

I don’t know of any way to overwrite the embedded yammer style. It’s rendered within an iFrame from another domain (Yammer domain being external to your site). And due to cross domain restrictions, browser will prevent us from modifying anything within an iframe from another domain. If there is a workaround, let me know.

Miss Capricious said...

Hi Vinay, thanks for this post!
Do you know what defaultToCanonical does?

Vinay Bhatia said...

Hello @Miss Capricious.
Yammer has this concept of Home networks and External Networks. Canonical stands for your Home Network.

defaultToCanonical = true shows feed from the home network.

If you are part of external network, have the external network open in another browser tab, it may show you the feed of the external network. With defaultToCanonical set to true, it always shows you the feed of the home network.

Miss Capricious said...

Thanks for the reply Vinay!

Aamir said...

Awesome! Helped me with the login problem. the use_sso configuration really helped. Thank you!

Bhanu said...

Seems with a update in Yammer embed script, Yammer embed is no more supported with SP 2010 (https://developer.yammer.com/v1.0/docs/requirements). Do we have a work around to make it still work with SP 2010.

Vinay Bhatia said...

Bhanu, You have to remove the meta tag in the default master page of SharePoint 2010.

The issue seems to be caused because the page is rendering in IE8 Standards mode, and not IE9.
This is due to the following tag in the master page.
<meta http-equiv="X-UA-Compatible" content="IE=8" />

You can try to update the SharePoint Master page and replace above line with
<meta http-equiv="X-UA-Compatible" content="IE=edge">

You need to test your SharePoint 2010 site thoroughly for any other impact

Rajesh Sathua said...

Hi Vinay -
Nice explaination.

How can we show only recent activities?

Can we hide comment/Post panel which is there on top most?

Rajesh Sathua said...

Please reply me asap once you get the message.

Thanks !!!!!!!!!!11