Integrations with Yammer Embed
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.
Figure 2-1. An example of a Yammer group feed embeded in a company’s Project Center site
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:
For less than 400 pixel container, Yammer will show Skinny mode, which will be less feature rich.
Note Yammer Embed does not support Microsoft Internet Explorer 8 or lower. Note that Yammer keeps updating its feature set, so some of the prerequisites and usage mechanisms may change in future. For the latest, refer to https://developer.Yammer.com.
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.
Table 2-1. Different Types of Yammer Embed Feeds
Note Users have to log in to Yammer to view the feed on a web application unless that application provides single sign-on to Yammer. For example, Microsoft SharePoint Online.
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.
Table 2-2. Yammer Embed Parameters
Embed Parameters Definition | ||
---|---|---|
1 |
Container |
The ID of the HTML <DIV> element in which Yammer Feed is added |
2 |
Network |
Network permalink. To retrieve the network permalink, You can navigate to the feed on the Yammer platform and copy it from the URL. More details are in the section to “How to Add Yammer Embed to a Page” |
3 |
feedType |
Type of feed to be displayed: group, topic, user, or Open Graph object |
4 |
feedID |
ID of the group, topic, or user feed (not applicable for Open Graph or MyFeed) |
5 |
Config |
Currently supports headerless, which removes the title bar from the feed |
6 |
objectProperties |
Open Graph Feeds/Like/Follow buttons supports all the properties available in the Yammer Activity Stream API If you do not specify any object properties, the object will attempt to get the metadata from the web page, using <title> or <meta> tags as per the Open Graph specification (http://ogp.me/) |
7 |
Private |
Open Graph object permissions may be constrained to a list of users, specified by full name and email address |
8 |
Users |
The users who may see the private object |
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.
Figure 2-2. An example of a Yammer Embed feed code snippet
In the example in Figure 2-2, we have specified a Yammer group feed with the following parameters:
Here are the Yammer Embed JavaScript method parameters:
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.
Figure 2-3. Yammer group SPDS University feed page to get the Yammer Embed scriptlet
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.”
Figure 2-4. Yammer Embed widget configuration page
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.
Figure 2-5 illustrates the Yammer Embed script of the default feed of a currently logged in Yammer user.
Figure 2-5. Yammer Embed script for a default feed
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.
In Figure 2-6, you can see that the Yammer feed type is group and is set to the default for a groupid.
Figure 2-6. Yammer Embed script for a group feed in the SPDS University Yammer network
In this script:
When this script is added to your HTML page, it will show the feed displayed in Figure 2-7.
Figure 2-7. Yammer Embed rendered on a web page for a group feed called “Yammer 101”
In Figure 2-8, feedType is set to "topic" and feedId is "topic id".
Figure 2-8. Yammer Embed script for a Yammer topic feed
In the script shown in Figure 2-8, labels 1 and 2 are same as in the Yammer group feed, except:
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.
Figure 2-9. Yammer Embed feed for the “Training” topic
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.
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.
Figure 2-10. Yammer Embed script for a Open Graph commenting section
In this script, you will notice that:
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.
Figure 2-11. Yammer Embed using Open Graph feedtype rendered on a web page
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.
Note Embed.Ly is an external service. For more information, refer to the embed.Ly web site.
Figure 2-12. Open Graph object created from posted messages using Embed.ly
Note Open Graph and its usage in Yammer is covered in Chapter 5.
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.
Figure 2-13. Open Graph object script with config option to hide headers and footers
You can add custom messages in Publisher by using the promptText configuration parameter, as shown in Figure 2-14.
Figure 2-14. Open Graph object script with promptText option to specify custom message
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.
Figure 2-15. Open Graph object feed rendered with custom message
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.
Figure 2-16. Open Graph object feed to show the additional values using the Open Graph Preview parameter
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.
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.
Figure 2-17. Open Graph Object feed script allowing only two users to view the 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.
Figure 2-18. Yammer Embed script with single sign-on
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.
Figure 2-19. Users will be asked to log in before Yammer Embed displays the Yammer feeds
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.
Figure 2-20. Yammer action buttons on a web page
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.
Figure 2-21. Yammer Recent Activity widget showing the user Alex has liked a page
Note The Recent Activity widget displays the most important activities on Yammer. Yammer out-of-the-box features also use the Recent Activity widget to post people’s latest activities. You will read more details on Open Graph in Chapter 5.
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.
Figure 2-22. The Yammer Like button when a user has clicked it once
Users can unlike the page/object by clicking the Unlike button and it will change to Like again, as shown in Figure 2-23.
Figure 2-23. The Yammer Like button, now with the text Unlike
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.
Figure 2-24. A new activity on Yammer is visible when the user clicks the UnLike button
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.
Figure 2-25. Yammer Follow button after a user has clicked it once
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.
Figure 2-26. Yammer Recent Activity widget showing that user Alex has followed a page
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.
Figure 2-27. Yammer Follow button giving the user the option to unfollow the followed object
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.
Note As Yammer keeps updating and upgrading its platform, the previous Yammer action buttons and Embed feed options may change in future. For the latest, refer to https://developer.Yammer.com.
Example: Adding a Yammer Feed to a Microsoft SharePoint Portal Page
In this example, you’ll add Yammer Embed and Yammer action buttons to the case study SPDS University portal, which is based on Microsoft SharePoint. Embedded Yammer feeds allow users to view the Yammer feed of the All Company group and to Like specific pages and share content on Yammer.
Figure 2-28. Yammer group feed page
Figure 2-29. Yammer All Company group feed script
Copy this JS snippet to the SharePoint portal in a Script Editor web part and save the page. Once you’re done, the Yammer Login button will be displayed, as shown in Figure 2-30.
Figure 2-30. The company portal page with Yammer Embed without a logged-in user
Click on the Login button and enter your Yammer credentials in the pop-up window, as shown in Figure 2-31.
Figure 2-31. Yammer Login pop-up window
Once you’re logged on, the pop-up window will close and you will see the Yammer feed for the “All Company” group displayed on the page (Figure 2-32).
Figure 2-32. All Company feed rendered on the page after logging in
<div><div id="Embedded-like" style="display:inline;margin:10px;"></div>
<div id="Embedded-Follow" style="display:inline;margin:10px;"></div>
<div id="yj-share-button" style="display:inline;margin:10px;"></div>
</div>
<script type="text/javascript" src="https://assets.Yammer.com/assets/platform_Embed.js"></script>
<script type="text/javascript" src="https://c64.assets-Yammer.com/assets/platform_social_buttons.min.js">
</script>
<script type="text/javascript">
yam.connect.actionButton({
container: "#Embedded-like",
feedType: 'open-graph',
network: "spdsuniversity.onmicrosoft.com",
action: "like",
object: {
url: "https:/abcsite.sharepoint.com/SitePages/YammerShare.aspx",
"title":"SPDS Scholarship News",
type: "page"
}
});
yam.connect.actionButton({
container: "#Embedded-Follow",
network: "spdsuniversity.onmicrosoft.com",
action: "follow",
object: {
url: "https:// abcsite.sharepoint.com/SitePages/YammerShare.aspx",
"title":" SPDS Scholarship News ",
type: "page"
}
});
yam.platform.yammerShare();
</script>
Figure 2-33. Yammer action buttons on the company portal page
Figure 2-34. Yammer Publisher pop-up window that appears when you click the Yammer Share button
Similarly, you can use the Yammer Like and Follow buttons.
At this point in time, you have implemented the Yammer Embed feed and action buttons into the portal. Congratulations!
Summary
Hopefully, you are now able to use Yammer Embed in your applications. Yammer Embed feeds and Yammer action buttons provide an easy way to integrate Yammer into web applications and allow users to share application-specific updates on Yammer directly from web applications. You simply have to select the right Embed feed and action buttons based on each individual case.