Embed

To display data from Yammer in your HTML based application, Yammer provides embeddable JavaScript widgets that display a snapshot of a specified feed and function as a scaled-down version of Yammer.

Prerequisites

To use Embed you need a HTML container 400 pixels or larger in your application. See below for a list of supported browsers.

Usage

Using embed, you can display My Feed, a Group Feed, a Topic Feed, a User Feed or an OG object feed. Users will need to log in to view the feed. Additionally, the feed is restricted to users of the network specified (see below).

My Feed

To display My Feed, add the following embed code to your HTML page. Note: Height, Width values are for illustrative purposes only. Please set your own as desired.

<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
    <div id="embedded-feed" style="height:400px;width:500px;"></div> 
    <script>
        yam.connect.embedFeed(
          { container: '#embedded-feed',
            network: 'fourleaf.com'  // network permalink (see below)
        });
    </script>
</body>
</html>

To retrieve the feed ID and network permalink, please navigate to the feed in the Yammer web application and copy it from the URL:

embed-feed

You can also get the HTML for Embed from the “Embed This Feed” link shown above.

Specified Feed

To display a Group Feed, a Topic Feed, a User Feed add the following embed code to your HTML page. Note that you can also generate this code for a specific group feed via the “Embed this feed” quick link in the right sidebar of any group (see the screenshot above). Note: Height, Width values are for illustrative purposes only. Please set your own as desired.

<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
  yam.connect.embedFeed(
      { container: '#embedded-feed',
        network: 'fourleaf.com',
        feedType: 'group',                // can be 'group', 'topic', or 'user'          
        feedId: '123'                     // feed ID from the instructions above
  });    
</script>    
<div id="embedded-feed"></div>

Single Sign-on

The newest version of Yammer Embed (released April 2014) supports Single Sign-on if your organization has enabled it on your Yammer Enterprise account.

To use Yammer Embed with SSO, see the following code sample below, specifically the config section:

yam.connect.embedFeed({
  container: '#embedded-feed'
        , feedType: ''
        , feedId: ''
        , config: {
             use_sso: true // this line enables SSO
             , header: true
             , footer: true
             , showOpenGraphPreview: false

        }
    });

Action Buttons

Yammer action buttons,Like and Follow,enable social interaction with internal systems like blog posts or pages within CRM software. By dropping a Like button on a page in your app, the first user to authenticate will create the Open Graph object in the Yammer network and publish an activity story relating to that action. If this is the Follow button, the user will also be subscribed to the Open Graph object and receive all updates in his or her activity stream.

Like Button

By dropping a Like button on a page in your app, the first user to authenticate will create the Open Graph object (if it doesn’t already exist) in the Yammer network and publish an activity story relating to that action. Format of the story is <user> likes <object>.

yam.connect.actionButton({
 container: "#embedded-like",
 network: "fourleaf.com",
 action: "like"
});

Follow Button

This will identify the page that it is on and create the OG object for the page if it doesn’t already exist. When clicked, it will create a following association between the user and the OG object resulting in the user receiving all updates to the object in his or her activity stream.

yam.connect.actionButton({
 container: "#embedded-follow",
 network: "fourleaf.com",
 action: "follow"
});

Commenting

URLs pasted into Yammer messages create OG objects represented as Pages. These pages display all the OG metadata Yammer knows about that URL, typically information pulled from Embed.ly. When an OG object feed is placed on a page in your application, it will grab the URL and OG metadata from the page. The first user to authenticate will create the OG object for that page in Yammer (or find the existing OG object if one already exists). It will then load the feed for that object. Note that this embed feed is not restricted to a specific network and users from different networks can view this feed (although they will only see the feed for their own network). OG feeds can effectively become a commenting system for internal blogs or any line of business application.

To display an OG Object Feed, add the following embed code to your HTML page.

yam.connect.embedFeed({
 container: "#embedded-feed",
 feedType: "open-graph"
});

Headers and Footers in Object Feeds

You can also configure whether to show the Yammer header or footer in your embed.  The sample below displays a basic Open Graph feed, but without the standard Yammer header or footer.

yam.connect.embedFeed({
 container: "#embedded-feed",
 feedType: "open-graph",
 config: {
   header: false,
   footer: false
 }
});

Custom Publisher Messages

The publisher lets users start new conversations related to your Open Graph objects.  You can encourage your users to post more by providing custom publisher watermark text.

yam.connect.embedFeed({
 container: "#embedded-feed",
 feedType: "open-graph",
 config: {
   promptText: "Comment on this customer"
 }
});

Open Graph Previews

Another option is to display an Open Graph preview of the target URL beneath the new message publisher, which provides users with a preview of the Open Graph summary they will see in the conversation they are starting.

yam.connect.embedFeed({
 container: "#embedded-feed",
 feedType: "open-graph",
 config: {
   showOpenGraphPreview: true 
 }
});

Private Specified Object Feed

Once placed on a page in your app, this will check the page URL and utilize the provided metadata details. It will also only authenticate users in the network specified and restrict access to those users specified in private parameter. This can be helpful if you want to display a feed for a page that is different than the one you are placing Embed on. Note that the private parameter and objectProperties parameters are optional.

yam.connect.embedFeed({
 container: "#embedded-feed",
 network: "fourleaf.com",
 feedType: "open-graph",
 objectProperties: {
   url: "https://box.com/file/abc123",
   type:  "file",
   title: "Yammer ROI.pdf",
   image: "https://dox.com/file/abc123.png"
 },
 private: true,
 users: [
   {name : "Drew Dillon", "email" : "adillon@fourleaf.com"},
   {name : "Ryan Kennedy", "email" : "rkennedy@fourleaf.com"}
 ]
});

Please note that OG Object Feeds support all of the properties available in the Activity Stream API. Not specifying any properties means that the object will attempt to gather the information from the page, either through <title> tags or <meta> tags per the Open Graph specification http://ogp.me/

 

Embed Feed Events

The Yammer Embed component also features a simple eventing system that developers can take advantage of to handle various events in the system.

 

To listen to an event, use:

   yam.on(eventId, callbackFunction, [context]);

 

To stop listening to an event, use:

   yam.off(eventId, callbackFunction, [context]);

 

Arguments:

  • eventId – Identifier of the event (see list below)
  • callbackFunction – JavaScript function that handles the event.
  • context – An optional object that contains state that is passed to your function handler.

 

Events

Event Name Event Id Description
Error error An error has occurred while loading the embed component.
Logged In /embed/loggedIn The user has logged in to Yammer via the embed component.
Logged Out /embed/loggedOut The user has logged out from Yammer via the embed component.
Loading Completed /embed/feed/loadingCompleted The embed component has completed loading and is ready to display.
(All) all Captures all events listed above as they are triggered from the embed component.

 

Skinny Mode (Beta)

If you configure any embedded feed to be less than 400px wide, the embedded feed will switch to skinny mode. The user experience for feeds in skinny mode is much less feature-rich. Most clickable UI elements will take users to the appropriate place in the full Yammer.com site.

Browser Configurations & Troubleshooting

Supported Browsers

Browser Name Version(s)
Internet Explorer 12+
11
10
9 (until approx. 12/31/2015)
8 (until approx. 12/31/2014)
Chrome Newest version
Firefox Newest version
Safari Newest version

 

Configurations for Internet Explorer

Internet Explorer (all versions) needs to have Yammer configured in the IE “Trusted Site Zone”.
In this setting, add *.yammer.com over SSL.

Proxy Whitelisting

If required, here are the entries you can add to your Proxy/Firewall to whitelist.

  • *.yammer.com or 204.152.18.0/23
  • *.cloudfront.net
  • *.amazonaws.com
  • *.cotssl.net
  • *.edgekey.net