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:

Yammer Integration Options

There are different ways to integrate Yammer with your SharePoint sites, Line of Business Applications & Mobile Apps. Different options require different skill sets and have a different target audience.

Targeted for Developers:
1. REST  API
2. Yammer SDK
3. Open Graph

Targeted for Business Users & Power Users:
4. Yammer Embed
5. Yammer App for SharePoint 2013
6. SharePoint 2010 Web Part

Targeted for IT Pro:
7. SSO
8. Directory Sync(DSync)

I will cover each of the options in more details below.

REST API 
Yammer provides a REST interface to interact with data in  Yammer. A developer has to be involved to use this option. The developer needs to know basics of REST, OAuth 2.0 and a programming language like JavaScript, .Net, etc.

More details about the REST API is available on Yammer Web Site here:
https://developer.yammer.com/restapi

We can use the Yammer REST API to build custom solutions around Yammer. For e.g. leverage OAuth 2.0 flow to authenticate a user and then show the Yammer feeds within a custom Mobile or Windows 8 App. However, before putting your developer hat on and starting a new project, please check if the other freely available options described below meet your needs.

Please note that not every Yammer feature and functionality is exposed publicly via REST API and you have to live with those limitation. There are some undocumented API’s too, but I will recommend to stay away from those (as MS / Yammer can change them at any point of time in future). I believe Microsoft / Yammer team should be working on increasing the available REST API interfaces.

To prevent Denial of Service (DOS) attacks, Yammer applies rate  limits (query throttling). If you fire more than 10 queries of a particular type within a predefined period of time (10-30 seconds) using the same account, Yammer will choose to ignore and  throttle your request. Details about Rate Limits are documented on Yammer web site.
https://developer.yammer.com/restapi/#rest-ratelimits

I will not worry much about REST API Rate Limits for normal scenarios. But I will not use the  REST API for something like querying a Yammer group for messages repeatedly inside a for loop to generate group level analytics.
Note: Developers are overcoming this limitation by putting a pause for x seconds inside their code

Yammer SDK
Working with REST API can be time consuming, and the Yammer SDK provides a wrapper layer hiding the REST implementation details from the developer.  The SDK’s are available for JavaScript, Ruby, Phyton, IOS and Windows Phone 8 and meant to increase developer productivity.
https://developer.yammer.com/yammer-sdks/

Please note that at the time of writing this blog post, there is no official Yammer SDK for .Net (and it’s almost 2 years since Microsoft bought Yammer). There are couple of internet blogs and codeplex projects which try to provide a Yammer SDK for .Net, but they are not officially funded or supported by Microsoft/Yammer.

Yammer Embed
Yammer Embed is the ability to embed Yammer in your browser based applications like SharePoint 2010, SharePoint 2013, ASP.Net, Java, etc. It can be used with any browser based technology.
It is simple to use, and can be used by business users or power user (non-developers).

The data continues to reside in Yammer, and is only displayed within your other applications. Conceptually, it is similar to uploading a video on YouTube and then using  the link or HTML to display it within your  other website.

For example, the following Yammer Embed script, when added to a page shows the feed for a specific Yammer group called Office 365 within your page. It is easy to use use and show Yammer feeds as a widget within your intranet portals and line of business applications.

<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'
        , feedType: 'group'
        , feedId: '3903471'
        , config: {
             use_sso: false
             , header: true
             , footer: true
             , showOpenGraphPreview: false
             , defaultToCanonical: false
             , hideNetworkName: false

        }
    });
</script>



I will cover more details about how to use Yammer Embed in my next blog post.

Open Graph
Yammer Open Graph provides the ability to write data into Yammer from your other applications (e.g. CRM). The same will be displayed into the Yammer Activity Stream.
More details available on Yammer Web site:
https://developer.yammer.com/opengraph/

You can also pull the feed for the Yammer Open graph object using Yammer embed.

For e.g.  the following Yammer Embed Feed for my blog URL will look like the  screenshot below:

yam.connect.embedFeed({
  container: '#embedded-feed'
        , feedType: 'open-graph'
        , feedId: ''
        , config: {
             use_sso: false
             , header: true
             , footer: true
             , showOpenGraphPreview: true
             , defaultToCanonical: false
             , hideNetworkName: false

        }
        , objectProperties: { 
          url: 'http://vinaybhatia.blogspot.in/'
          , type: 'page'
        }
    });


You can programmatically form the URL, and include the script in your master page so that each page has its unique Yammer feed. You need to ensure your URL’s remain same (even during migration from SharePoint 2010 to 2013) to retain the posts and comments.

[Update 1 27 Mar 2013]: For dynamic page URL and title,  use following in your JavaScript.
var pageUrl = document.URL;
var pageTitle = document.title;

objectProperties: { 
  url: pageUrl
, type: 'page'
, title: pageTitle
}

[Update 2 27 Mar 2013]: Microsoft is now recommending use of Yammer Embed over Yammer App and Yammer Web part. Please refer https://www.yammer.com/itpronetwork/#/Threads/show?threadId=510047230 for details.  


Yammer App for SharePoint 2013
SharePoint 2013 and Yammer are two different products now owned by the same company, Microsoft.  The SharePoint 2013 App tries to integrate the two products together, and helps in displaying the Yammer news feed within your SharePoint 2013 web sites. If your organization has embraced Yammer as the enterprise social network, you will most likely (manually or programmatically) replace the default SharePoint 2013 social newsfeed with Yammer newsfeed using this App.



 The App is freely available in the Office 365 App store.
http://office.microsoft.com/en-us/store/yammer-app-for-sharepoint-WA104090116.aspx

Work with your SharePoint Admin team to acquire the latest version of the app and make it available within your SharePoint 2013 environment.

Apart from the official Yammer App from Microsoft, there are few other Yammer Apps available in the Office 365 App store. I haven’t tried them yet, but since this blog is about available options, thought I should mention it.

SharePoint 2010 Web Part
The Yammer Web Part for SharePoint 2010 provide the ability to display user or group feeds, show Yammer Search results (besides SharePoint  or FAST Search Results), easily share a document link (from Document Library ECB Drop Down Menu) to Yammer, show  Yammer feeds for unsigned user, etc.

All the functionality is available within the same web part which offers lot of easy to use configuration UI.




The SharePoint 2010 Web Part and its related documentation  are available for free download on the Yammer Web Site:
https://about.yammer.com/success/activate/integrations/

While the web part is functionally rich, you need to consider the following:

  • Based on SharePoint Web Parts model, and not compatible with Office 365/SharePoint 2013 App Model. It’s a red flag if you have plans to migrate to Office 365 or SharePoint 2013 App Model in near future.
  • Needs a Service Account which is Yammer Verified Admin
  • Complex Installation and Activation process to be performed by SharePoint Farm Admin: Yammer provides an MSI installation package and documentation to make things easier, but a lot seems to be happening behind the scenes.
  • Performance: The Web Part seems to be designed in such a way that all requests go from page to Web Services on the SharePoint Server (deployed during installation of the SharePoint WSP solution) and then to Yammer. I found this by using Fiddler and reverse engineering the flow. I could not find any documentation around same. While on my development machine, there was no significant performance impact for a single user scenario, I will perform a Load Testing before using it in production. The way it is implemented, it has the potential to impact the performance of the entire SharePoint 2010 farm under any of the following scenarios:
    • If it is inserted on a heavily used intranet home page
    • The internet connection between SharePoint server and Yammer is slow
    • Yammer is facing any service disruptions or delays.
  • Legacy: Haven’t seen an update from Yammer since last one year.
Yammer Embed provides most (but not all) of the functionality offered by the Web Parts.
Use the Web Part only if you badly need the additional functionality (not available in Yammer Embed) and don’t have the time or expertise to custom develop the same using REST API.

SSO and Directory Sync(DSync)
IT department can integrate Yammer by configuring Single Sign On (SSO) and Directory Sync. SSO enables users to use their organization Active Directory credentials (or whatever LDAP your organization uses) to sign in to Yammer. Yammer DSync synchronizes your organization AD profiles and Yammer profiles, providing the ability to Add, Update and Suspend Yammer Accounts when they are updated in AD.

SSO and DSync are topics for another blog post, and I will try to cover them in more details some other day.

So what should we use for integrating Yammer?
It depends on what you are trying to achieve. I usually start with Yammer Embed, since it is the simplest and faster way to implement. Only if Yammer Embed is not sufficient to meet the needs, I consider the other options.