European Office 365 Connect 2014 Presentation

1. A developer jam with Yammer
Getting started with Yammer integration
March 2014

3. Agenda
Integration Scenarios
Getting Started
App registration and authentication
Working with Embed
Working with REST
What is Open Graph?
Resources
Questions

4. About me
Focus on SharePoint Architecture and
Development
SharePoint Server MVP since 2013
SharePoint MCT, MCTIP, MCPD
CEO of NUBO GmbH – Munich
patrick.nubo-corp.com
patrick.lamber
patrick@nubo-corp.com

5. Integration Scenarios
2. Office 365 feed integration
More integration will follow in the next couple of months (not
handled here)
1. System independent. Access by code
SharePoint, ASP.NET, PHP, …. (handled in this session)

6. Getting started – In a nutshell
Register app Authenticate
Access/Post data
to Yammer
Online
https://www.yammer.com/client_applications
Client-side flow Embed
Server-side flow REST API
Realtime

7. Where are we now?
Register appRegister app Authenticate
Access/Post
data to
Yammer

8. Register your app
Register app
1) Registration under
https://www.yammer.com/client_applications
2) Remember the Client ID
Register app Authenticate
Access/Post
data to Yammer

9. Prepare your app
Register app
Register app Authenticate
Access/Post
data to Yammer
3) Add JavaScript reference to your page
<script type="text/javascript" src="https://assets.yammer.com/platform/yam.js"></script>
4) Associate the Client ID on your page
<script type="text/ecmascript">
yam.config({ appId: "YOUR CLIENT ID" });
</script>

10. Where are we now?
Register appRegister app Authenticate
Access/Post
data to
Yammer

11. Authentication flow (1/2)
Authentication through OAuth2
Server-side flow (“Authorization Code Grant”): Appropriate
when calling Yammer API through server side code
Client-side flow (“Implicit Grant”): Appropriate when calling
Yammer API through client-side code (web browser)
Register app Authenticate
Access/Post
data to Yammer
User
Authentication
App authorization App authentication

12. Authentication flow (2/2)
Register app
Register app Authenticate
Access/Post
data to Yammer

13. Demo
Setup the environment and authenticate with client-side
flow
Register app Authenticate
Access/Post
data to
Yammer

14. Where are we now?
Register appRegister app Authenticate
Access/Post
data to
Yammer

15. Working with Embed
Register app
Feeds
(My Feed, Group Feed, Topic Feed, User Feed, OG
Object Feed)
Action Buttons
Commenting
Events
(Error, Login, Logout, Loading
Competed)
Embed
Register app Authenticate
Access/Post
data to Yammer

16. Feeds
Register app
Register app Authenticate
Access/Post
data to Yammer
<script type="text/javascript">
yam.connect.embedFeed(
{
container: '#myFeed',
network: 'lamber.eu',
config: {
header: true,
footer: false,
promptText: "Comment on the site feed"
}
});
yam.connect.embedFeed({
container: "#groupFeed",
network: "lamber.eu",
feedType: "group",
feedId: "3313365",
config: {
header: false,
footer: false,
promptText: "Comment on the group feed"
}
});
</script>

17. Action buttons and Comments
Register app
Register app Authenticate
Access/Post
data to Yammer
<script type="text/javascript">
yam.connect.actionButton({
container: "#myLike",
network: "lamber.eu",
action: "like"
});
yam.connect.actionButton({
container: "#followMe",
network: "lamber.eu",
action: "follow"
})
</script>
<script type="text/javascript">
yam.connect.embedFeed({
container: "#commenting",
feedType: "open-graph",
config: {
header: false,
footer: false
}
});
</script>
Embed
Yammer

18. Demo
Working with Embed
Register app Authenticate
Access/Post
data to
Yammer

19. Working with REST
User needs to be authenticated to a network
Use “jam.request” function in the JavaScript SDK
Not all CRUD operations are available (e.g., no way to create
groups)
Register app Authenticate
Access/Post
data to Yammer
Users
Messages
Attachments
SuggestionsNetworks
Groups
Likes
Subscriptions
Topics
Relationships
Notifications
Autocomplete
Search

20. Working with REST
Register app Authenticate
Access/Post
data to Yammer
Autocomplete: 10 requests in 10 seconds.
Messages: 10 requests in 30 seconds.
Notifications: 10 requests in 30 seconds.
All Other Resources: 10 requests in 10 seconds.
Notes
Endpoints returning a status code of 429 (Too Many Requests) when exceeding
limits
Rate limits are per user per app
Limits are independent from each other

21. Examples of REST calls
Register app
Register app Authenticate
Access/Post
data to Yammer
Delete
Write messageRead message

22. Demo
Working with REST
Register app Authenticate
Access/Post
data to
Yammer

23. What is Open Graph?
Register app
Register app Authenticate
Access/Post
data to Yammer
Open Graph (OG) is used to define an activity
which is posted to Yammer.
Allow users to see the activities of members and
increase app usage
You can use “out-of-the” box activities or create
your own
The activity takes the format:
<Actor> <Action> <Object> on <App Name>: <Message>

24. Open Graph Parameters
Register app
Register app Authenticate
Access/Post
data to Yammer
Actions
• Create
• Update
• Delete
• Follow
• like
Object types
• Page
• Place
• Person
• Department
• Team
• Project
• Folder
• Etc.
Objects
• url
• Type (defaults to
page)
• Title
• Image
• Description

25. Example for posting an activity
Register app
Register app Authenticate
Access/Post
data to Yammer
var messageObject = {
"activity": {
"actor": { "email": "patrick.lamber@lamber.eu" },
"action": "follow",
"object": {
"url": "http://en.wikipedia.org/wiki/Flower_power",
"title": "The history of Flower Power"
},
"message": "This is a great site to start with"
}
}
yam.request({
url: "/api/v1/activity.json",
method: "POST",
data: messageObject,
success: function (user) {
},
error: function (user) {
$("#results").html('An error has occurred');
}
});

26. Demo
Create out-of-the-box and custom objects with Open Graph
Register app Authenticate
Access/Post
data to
Yammer

27. Tips
Use Yammer SDK to simplify authentication
Subscribe to the Yammer Developer Network on
Yammer
For testing create your own network with test users
An enterprise subscription is not necessary when
starting with the development. For “complex”
impersonation scenarios consider enterprise licenses
Use a combination of REST and Embed to build you
application

28. Key takeaways
Yammer provides feed and REST APIs to access data
Authentication can be solved by using either client
side code oder server side code
Once authentication is solved, accessing Yammer data
is pretty simple
Not all interfaces are available to access or post data

29. Resources
Open Graph Protocol (bit.ly/1gNT7ad)
Developer reference Yammer (http://bit.ly/1p9YDIL)
Yammer Blog (http://bit.ly/Nt1e4l)
Yammer Developers Network (http://bit.ly/1l2EyGU)
Yammer releases (http://bit.ly/1nCRc1o)
Yammer Office 365 support (http://bit.ly/1donbbQ)
Example of Server Side Flow in .NET (http://bit.ly/POn6ZZ)
My Blog (http://bit.ly/Ovv2hI)
All bundled links (http://bitly.com/bundles/o_6pdhih13v3/2)

30. FAQ
Questions?