Yammer Embed and
Open Graph
Audience and Requirements
Audience:
Yammer Embed and Open Graph API are targeted at web and application
developers. These technologies are also useful for Yammer users that are familiar
with HTML.
Requirements:
To understand the information presented here the reader should have a Yammer
account. In addition, to debug problems with Yammer Embeds, users should have
familiarity with the developer tools included with modern browsers.
2
Topics and Learning Objectives:
This deck covers the following topics about Yammer’s Open Graph API and Embed
technologies:
•
•
•
A basic understanding of the capabilities of each technology.
An understanding of who in your organization can use the technology.
A high-level description of how the Open Graph API and Embed technologies work.
After reviewing this deck you should have the ability to:
•
•
•
•
3
Describe the Yammer Embed integration.
Identify places where Yammer Embed can be utilized.
Describe what the Open Graph API is, and what its benefits are.
Identify the format schema and supported object types of the Open Graph API.
Using Yammer Embed
Feeds for Groups, Topics, and Users
What is a Yammer Embed?
What is a Yammer Embed?
•
•
A Yammer Embed is a JavaScript-based widget that harnesses the power of your enterprise
social platform by making Yammer available to users where they work online.
It provides a way to display content from Yammer in your own HTML-based app.
What Does Embed Code Look Like?
*.JS
</>
5
1.
It has a reference to the
yam.js script file.
2.
It has the initialization script
for your instance of Embed
with a static configuration.



3.
It has a div tag for placement
of the feed on your page.
Feeds Yammer Can Embeds Display
Feed
Description
FeedType
My Feed
My Feeds are where conversations are
delivered for Yammer users.
See My Feed
example
My Site homepage or workspace
site.
User Feed
All the conversations posted by a
specific user in Yammer.
User
Profile pages for users in a system
directory.
Topic Feed
A feed of conversations that have been
tagged with a topic in Yammer.
Topic
An event page on an intranet.
Group Feed
A feed of conversations that have been
posted in a specified group.
Group
A team page on an intranet.
Comment Feed
Uses Yammer’s Open Graph API to
facilitate conversation around an
application object.
Click here for
more
information
An opportunity in a custom CRM
application, or a media detail page in
a digital asset management system.
6
Use Case
When to Use Yammer Embeds
The situations below outline when you should use a Yammer Embed and when you
might want to utilize other options for Yammer integration:
Use a Yammer Embed When:
• You have an HTML-based application
such as a portal, intranet, or business
application.
• You can use it in SharePoint, but
Yammer has packaged integrations
available for this platform that may be
more appropriate for your needs.
7
Don’t Use a Yammer Embed If:
• You need a custom publisher.
• You need to handle very specific
business requirements.
These situations are better handled better
by our REST API or Application Integration.
The Embed User Experience
1.
2.
3.
8
Click the Log in With Yammer button.
The authorization dialog appears.
If this is your first time logging in, a confirmation
dialog will appear asking you to grant access to
the Embed application. Click Allow to do so.
Embed Testing Checklist
We recommend that you test the Yammer Embed you develop before deploying it to
your website live. Here are some tips on Embed testing:
9
•
Test Embed outside of your environment using the
Yammer Embed Widget.
•
Test Embed with multiple web browsers.
•
Review the console in the web developer provided
by your browser.
•
Capture screenshots.
•
Provide a succinct reproduction of the issue.
Troubleshooting Embeds
1.
2.
Check your Internet Explorer settings for zone configuration, and
enable http://www.yammer.com as a Trusted Site Zone.
Check Internet Explorer’s compatibility view. For more information
about turning off Internet Explorer’s compatibility view, visit this
Microsoft community article.
3.
Check the pages for conflicting JavaScript code. Use a test
environment such as JSFiddle to test your embed outside of the
page with the JavaScript code.
4.
Check the pages for conflicting CSS statements. Test the page by
running the embed without a CSS style sheet.
5.
For more information regarding troubleshooting of Yammer
embeds, please visit the Yammer Developer’s site.
10
*.JS, *.CSS
The Open Graph API
Connecting Yammer with the Social Graph
Open Graph API Overview
What’s is Yammer’s Open Graph API?
•
•
Open Graph is a light weight protocol that facilitates integrating data from different social apps
into what we call the social graph.
Yammer's Open Graph API allows developers to write activity from their app into Yammer.
Yammer’s Open Graph API Allows:
•
•
•
Rich metadata around an object identified by a URL.
Discussion mirroring between an application and Yammer through comment feeds.
Aggregation of all conversations around an object in Yammer.
Examples of Uses for Yammer’s Open Graph API
•
•
12
In a customer relationship management (CRM) app, a sales rep updates an opportunity’s
probability of closing to a lower number.
In a scheduling app, an employee creates a lunch meeting.
Open Graph Process Overview
Authenticate
A User
13
Format The
User’s Data
For Open
Graph
Display User
Data in Their
Yammer
Feed
User Authentication
Yammer Embed handles authentication automatically. However, authentication can
also be handled using OAuth. This process is similar to what is shown in Getting
Started with OAuth 2.0 (Ryan Boyd, O’Reilly Media).
The complete authentication flow using OAuth 2.0
is detailed at the Yammer Developers site.
The documentation there provides the detail for
each step of the authentication process.
14
The Open Graph Data Format
An Open Graph activity takes the following format:
<Actor> <Action> <Object> on <App Name>: <Message>
Actor
A Yammer user that performed an action in your app. If the actor exists in the Yammer network, the
story will be delivered to the actor, and possibly others, based on delivery rules.
Action
A verb that describes what happened to the object. For example: created, updated, deleted, followed,
liked, and so forth.
Object
The Open Graph object is the key piece of any activity. It represents an entity instance in your app,
such as an event or a CRM record.
15
An Open Graph Example
Open Graph Format
<Actor> <Action> <Object> on <Action>: <Message>
CRM Example
“Sidd Singh” created “Lunch Meeting” on Sched.do: Hey, let’s get sushi!
User activity displayed in
Yammer’s Activity Stream
<Actor>
16
<Action>
<Object>
<Action>
<Message>
The Open Graph Schema
In the example, Open Graph was used to describe a lunch meeting between coworkers. However, Open Graph’s rich schema makes much more possible.
Supported object types:
•
•
•
•
•
•
•
page (default)
place
person
department
team
project
folder
•
•
•
•
•
•
Supported actions:
file
document
image
audio
video
company
•
•
•
•
•
create
update
delete
follow
like
If the above actions or objects are not sufficient, you can even create custom
actions to better suit your needs. Click here for more information.
17
Ready to Build a Yammer App?
The steps below can help you build an app on the Yammer platform.
1.
Visit the Yammer New App Registration page and Register
Your App to get the API key.
2.
Connect your app to Yammer and authenticate with OAuth 2.
3.
Write data into Yammer using Open Graph
4.
Display data in your application using a Yammer Embed.
Now that you’ve built your app, make it ready for inclusion in
Yammer’s App Directory and deploy it to a global audience!
18
</>
Learning Review and
Additional Resources
Learning Review
In this deck we provided information covering:
•
•
•
A summary of Yammer’s Embed and Open Graph API technologies.
A technical overview of both technologies.
Information on who can use these technologies to deliver better experiences.
With this information you should be able:
•
•
•
•
20
Describe the Yammer Embed integration.
Identify places where Yammer embed can be utilized.
Describe what the Open Graph API is, and what its benefits are.
Identify the format schema and supported object types of the Open Graph API.
Additional Resources
The following resources can provide you with additional information about Embed:
•
•
•
http://success.yammer.com/integrations/yammer-embed/
https://developer.yammer.com/connect/
http://github.yammer.com/
The following resources can provide you with additional information about Open
Graph:
•
•
21
http://ogp.me/
https://developer.yammer.com/opengraph/