Yammer has evolved as one of the top enterprise social networking platforms. Microsoft Office 365 and Yammer integration has helped organizations provide better productivity solutions for users. Along with standard capabilities, there is scope to bring Yammer social features and functionalities directly into line-of-business applications and allow users to collaborate and engage from their main business applications. Yammer Embed provides a way to get Yammer social features into business applications.

In this chapter, we will explain what Yammer Embed is and how to use Yammer Embed in your business applications. We explain with an example how to add Yammer Embed into an online company portal.

Introducing Yammer Embed

Yammer Embed is made up of lightweight JavaScript-based widgets that can be added to web applications to display snapshots of Yammer feeds based on a defined configuration. Yammer Embed provides an easy and simple approach to integrate Yammer in your business applications. Using Yammer Embed, users can view the latest announcements, comments, posts, add new comments, and share information and files directly from the mainstream business applications without having to visit the Yammer. This allows users to engage quickly with others and achieve better results.

There are different types of Yammer Embed feeds that can be added to external applications based on business needs. You can surface Yammer Embed feeds of a current user (My Feed), a specific Yammer group feed, a topic feed, or a Yammer Open Graph object feed. Figure 2-1 shows you an example of Yammer Embed added to a Project Center site. In this example, users can view and share the latest updates with colleagues directly from the Project Center site, which helps them be updated and share views with team members.

This is just one example. In this chapter we will explain different types of Yammer Embed and Yammer action buttons, including Like, Share, and Follow.

First let’s explore the requirements for adding Yammer Embed to your business applications.

Yammer Embed Prerequisites

In order to use Yammer Embed on a web page, you need to satisfy the following:

• An HTML-based and JavaScript-enabled web interface, preferably in a business system (like your company intranet).
• A Yammer network permalink such as: https://www.Yammer.com/spdsuniversity.onmicrosoft.com.
• Editable HTML container that’s 400 pixels or larger.

For less than 400 pixel container, Yammer will show Skinny mode, which will be less feature rich.

As you can see, the requirements to have Yammer Embed on your business application are very simple and you do not need to develop any complex code. Let’s go through the different types of Yammer Embed feed that you can use in your applications.

Different Types of Yammer Embed Feeds

As Yammer offers various social collaboration features, it is possible with Yammer Embed to surface different types of feeds based on your functional needs. For example, you may want to see the Yammer feeds belonging to your Learning and Training department on your Training and Knowledge management site, or perhaps your Sales and Marketing team wants to get the latest Yammer announcements and updates from the R&D Department’s group feeds on the CRM portal.

There are five types of Yammer feeds that can be embedded in HTML-based web applications, as listed in Table 2-1. Most of these feeds are self-explanatory, apart from Object feed, which we will cover more in detail.

Yammer Embed Parameters

Before users can use Yammer feeds from a business application, you need to specify the parameters associated with Yammer Embed. These parameters are listed in Table 2-2.

Let’s now explore how to specify these parameters when adding Yammer Embed to a web page.

Adding Yammer Embed to a Web Page

As mentioned, your application needs to support HTML and JavaScript to add Yammer Embed. Yammer Embed is a JavaScript widget that needs to fit in the HTML <div> element. You need a minimum height of 400 pixels for the Yammer Embed <div> element.

The code snippet shown in Figure 2-2 is an example of Yammer Embed for a Yammer group.

In the example in Figure 2-2, we have specified a Yammer group feed with the following parameters:

• div id: “Embedded feed”. Specify the ID of the <div> where you want to add the feed.
• style: Specify the height and width of the container.
• Source (src): Yammer Embed code is reference to the platform_Embed.js file. This reference is based on existing Yammer and it may change in the future. Refer to http://developer.yammer.com for the latest references.

Here are the Yammer Embed JavaScript method parameters:

• container: The name of the <div> ID that’s specified in HTML in the previous example is “Embedded-feed” as mentioned.
• Network: Specify the network name. In Figure 2-2, spdsonline.onmicrosoft.com is highlighted as “Network Permanent Link”.
• feedType: Specify the feed type. This is the type of feed you want to render on the page. This can be user, group, or topic. For example, in Figure 2-2, we selected group.
• feedID: Based on feed type, specify the value of object ID. In Figure 2-2, the Yammer group ID 4552935 is set to Feed ID.

You can add this code to any HTML and JS-enabled web page, but Yammer also provides an easy way to get the group feed scriptlet auto-generated from the Yammer site.

To get the Yammer Embed feed for a group, browse to your Yammer network, select the specific group feed page, and then select the Embed This Group in Your Site link, as shown in Figure 2-3.

Copy the script for embedding feeds on your HTML web page to view the Yammer group feed rendered on the web page, as shown in Figure 2-1.

There is another way to get Yammer Embed scriptlets: using the Yammer Embed widget.

Yammer has made life simpler for developers by providing an online tool to generate and preview the Yammer Embed feeds. You can browse to the web site https://www.Yammer.com/widget/configure and set the configuration parameters and preview the feed. Figure 2-4 is from the Yammer Embed Widget Configuration web page. As you can see, all the parameters are self-explanatory and described in the section entitled “Yammer Embed Parameters.”

Using this configuration web page, you can get a Yammer Embed script for any type of Yammer feeds. This can be for a user feed, a profile feed, a group feed, a topic feed, or Open Graph object feed. Once you get the Yammer Embed script, just add it to your web page using the HTML <script> element tag as shown in Figure 2-2.

The next section provides information about the different types of Yammer feeds.

Types of Yammer Feeds

Let’s look at various types of Yammer Embed feeds that can be added based on your needs of business process and collaboration.

Yammer User Feed

Figure 2-5 illustrates the Yammer Embed script of the default feed of a currently logged in Yammer user.

In this script, <div id="Embedded-feed"> (label 1) is an important value that needs to specified in the Yammer Embed script method yam.connect.EmbedFeed container parameter.

The second most important parameter is network (label 2) and you must specify your Yammer network there.

Yammer Group Feed

In Figure 2-6, you can see that the Yammer feed type is group and is set to the default for a groupid.

In this script:

• Label 1 shows the ID of the <div> where the feed will be rendered.
• Label 2 is your Yammer network.
• Label 3 shows that the feedType is set to group to display the feed of a Yammer group.
• Label 4 shows the feedId, which is the group ID in this case.
• Label 5 (config:) specifies any other specific values, such as the default group to post to.

When this script is added to your HTML page, it will show the feed displayed in Figure 2-7.

Yammer Topic Feed

In Figure 2-8, feedType is set to "topic" and feedId is "topic id".

In the script shown in Figure 2-8, labels 1 and 2 are same as in the Yammer group feed, except:

• feedType (label 3) is changed to topic to display the feed of a Yammer topic.
• feedId (label 4) is the topic ID in this case.

When this feed is rendered on the page, it will show all the feeds from the Yammer network where posts have the “training” topic specified, as shown in Figure 2-9.

So far we have explained Yammer Embed for user, group, and topic feeds, which are simple options that allow you to view feeds or a specific object or start a conversation related to a specific configured feed.

Next, let’s look at how to use Yammer Embed to provide commenting directly from your business applications.

Yammer Object Feed

Using Yammer Embed, you can comment on your internal communication site, a blog site, or an internal company news portal and then capture the comments or feedback from users directly and surface on Yammer using a Yammer Open Graph object. This is a very effective way to make your company portal more collaborative and get comments from users about specific articles, news, blogs, and so on.

Implementing Commenting Using a Yammer Object Feed

The following script shows Yammer commenting, which can be added to your HTML page.

In this script, you will notice that:

• The feedType parameter value is open-graph.
• The feedId parameter is blank because we are not rendering any existing feeds in this case.
• The objectProperties parameters are important for an open-graph type feed to highlight which type and object allows commenting. In this script, we have used a default page of a portal.

The output of this script will show a free text box that allows users to specify new comments that will appear as posts on Yammer.

The comment box is a Yammer Publisher control and it lets users comment directly from a web site/portal using their Yammer profiles and shows this activity to their colleagues in the Yammer feed.

Using Embed.ly (www.Embed.ly)

As you can see in Figure 2-11, with Open Graph Yammer Embed posts the URL of a page but adds the “Sign in to Office 365” message. Basically, Yammer displays additional properties of the Open Graph object posted on Yammer.

When you use Yammer Embed to post a public URL, Yammer creates an Open Graph object represented as a page object in Yammer, as shown in Figure 2-12. This Open Graph object displays all the open metadata that’s pulled from the Embed.ly service. Embed.ly visits the page in the background and retrieves the Open Graph metadata present on the page. This allows Yammer to display more information about the page on the Yammer feed, making it much more user friendly. Later in this chapter, you will learn how to use the Yammer Share button to create an Open Graph object post on Yammer.

Object Feed Configuration Parameters

For the Open Graph feed, you can specify different parameters to manage the different configurable features. The following sections explore the different parameters you can specify.

Headers and Footers in Object Feeds

Figure 2-13 shows the parameters needed to hide the Yammer header or footer in a Yammer Embed Open Graph object.

Custom Publisher Messages

You can add custom messages in Publisher by using the promptText configuration parameter, as shown in Figure 2-14.

When this script renders on a web page, the Publisher control will display a custom message that reads “Comment on this customer,” as shown in Figure 2-15.

Open Graph Previews

Use the attribute illustrated in Figure 2-16 to display an Open Graph summary preview of the target URL in a new message on Yammer.

When this script is rendered, you will see the preview like you saw in Figure 2-15. If it’s set to false, users will not the Open Graph metadata associated with URL specified in the object properties.

Private Specified Object Feed

When Yammer Embed feed is placed on a page within a page, adding the private parameter option will allow developers to target audiences to restrict the access to only specified users in the specified Yammer network. Figure 2-17 shows you how to specify specific users using the private parameter in a Yammer Embed Feed.

Another important aspect to consider when using Yammer Embed is how authentication works. The next section explains how to configure Yammer Embed for authentication on Yammer.

Yammer Embed with Single Sign-On

Your company can benefit from Yammer single sign-on (SSO), which allows users to log in to Yammer without entering seperate credentials. Using SSO with Yammer reduces the complexity and improves the usalibility of Yammer Embed feeds in business applications.

To use Yammer Embed with SSO, see the config section in Figure 2-18.

If single sign-on is not enabled and you add a Yammer Embed script to your web site, users will be asked to log in to Yammer first before they can see the Yammer feeds, as shown in Figure 2-19.

So far we have explained Yammer Embed and explored the different types of Yammer Embed feed options that you can add to your business applications. Later in this chapter, we will work on an example to show all the steps required to add Yammer Embed on a SharePoint-based company portal.

Let’s now look at the Yammer action buttons, which are part of Yammer Embed functionality.

Using the Yammer Action Buttons

Yammer Embed also provides Open Graph action buttons—Follow, Like, and Share—as shown in Figure 2-20. Using these action buttons, you can make it easier for users to engage and share information with others. These action buttons are similar to other social networking tools that provide these kinds of actionable components. This feature can be useful in company intranets, CRM systems, reporting portals, and so on. They allow users to like a new announcement, follow important documents/reports, share newly published company news with colleagues on Yammer, and more. It’s a very quick and easy implementation to see what colleagues have liked, shared, or are following. You can display all three Open Graph buttons next to each other to let people use them as needed.

These buttons are clickable interfaces. Like and Follow directly create an object on Yammer, and the Share button allows you to specify custom messages and select appropriate audiences for sharing the message.

How to Add a Yammer Action Button

Adding a Yammer action button is similar to adding Yammer Embed using JavaScript. There is a JavaScript snippet that you need to add to your HTML page. Let’s look how to add to these buttons to your web applications.

Yammer Like Button

The Yammer Like button is the quickest way for people to share content with colleagues.

A single click on the Yammer Like button will like the content on the web page and share it on Yammer.

When you add the Yammer Like action button to a web page, on initial load users will see the Like button. When this button is clicked, an Open Graph object will be created, which will be visible on Yammer as an activity.

The Yammer Like button code snippet is similar to Yammer Embed and can be added to any HTML page:

yam.connect.actionButton({
container: "#Embedded-like",
network: "spdsuniversity.onmicrosoft.com",
action: "like"
});

When the Like button is clicked, a new Yammer activity is created against the user on Yammer and is visible in the Recent Activity widget, as shown in Figure 2-21. When users mouse over the widget, they can see the full details of the activity, as shown in Figure 2-21. Yammer also creates a dedicated page for this activity that employees can follow and discuss.

Once the Like activity is complete, the Like button will change text and color to Liked, as shown in Figure 2-22. This allows users to Unlike the page/object if they want to.

Users can unlike the page/object by clicking the Unlike button and it will change to Like again, as shown in Figure 2-23.

When users click the Unlike button, the action button will change back to Like, thereby allowing users to like it again if they desire. At the same time a new activity is posted on the Yammer Recent Activity widget—“User….Liked <Object title>,” as highlighted in Figure 2-24.

The Yammer Like button is a very creative way to allow users to update others on information they liked.

Yammer Follow Button

The Yammer Follow button is like the Facebook Follow button. When users click on it, they will automatically be subscribed to an Open Graph object and receive all updates in their activity stream. A new OG object is created on Yammer for the page/object where the Follow button is clicked and an association between the user and the OG object is created.

The following JavaScript script is used to add on web page to display the Yammer Follow button:

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

Once a user has clicked the Yammer Follow button, the button’s text changes to Followed, as shown in Figure 2-25.

Similar to the Like button, when the Follow button is clicked, a new Yammer activity is created against the user on Yammer and is visible in the Recent Activity widget, as shown in Figure 2-26. When users mouse over it, they can see the full details, as shown in Figure 2-26.

Once a user has clicked the Follow button, they can’t follow it again. The only option is to unfollow it by clicking the button again, as shown in Figure 2-27.

Similar to the Like button, all the actions related to the Follow button are posted on the Recent Activity widget on Yammer.

Yammer Share Button

The Yammer Share Button allows users to easily share online content with groups and coworkers on Yammer using a browser pop-up.

To place a Yammer Share button on your page, embed the following code where you want the button to appear. The button will be rendered in the element with the ID yj-share-button.

<div id="yj-share-button"></div>

Then place the following code at the bottom of the page before closing the </body> tag.

<script type="text/javascript" src="https://c64.assets-Yammer.com/assets/platform_social_buttons.min.js">
</script>
<script type="text/javascript">yam.platform.yammerShare();</script>

In the following example, you will see how the Share button will appear on a Microsoft SharePoint site.