Thursday, May 28, 2015

How to use Yammer Embed: Part 2

Yammer Embed JavaScript library and Yammer Open-Graph are very powerful combination. With simple JavaScript, we can achieve a lot.

While the Yammer team has provided API documentation, there are little examples published on internet today which explain its simplicity and potential. I will try to fill the gap in this blog post by taking an example of how it can be used.

If you have never used Yammer Embed before, you may want to read my previous post.
http://vinaybhatia.blogspot.com/2014/08/how-to-use-yammer-embed_27.html


For Yammer Open Graph commenting and Open Graph buttons, I will recommend to first read documentation on Yammer Website.
https://developer.yammer.com/v1.0/docs/commenting
https://developer.yammer.com/v1.0/docs/open-graph-buttons

What you may not realize at first is that you can pass page url's to opengraph.
And if you change the query string parameter for same page url, it is treated as another open graph object in Yammer.

Now lets put 2 and 2 together and make it 5 (actually 10).

I will use a simple example of a SharePoint Online blog site. However, the same concepts can be extended to any web based platform like SalesForce or ASP.Net.

In SharePoint Online blog site, there are only 2 pages, Home page and details page. The blog post id is passed in the querysting and associated blog post displayed. Example Page URL's:
Summary Home Page:
https://wipromspractice.sharepoint.com/sites/YammerDemo1/CEOBlog/default.aspx

Details Post Page: Note that only ID in query string changes.
https://wipromspractice.sharepoint.com/sites/YammerDemo1/CEOBlog/Lists/Posts/Post.aspx?ID=1
https://wipromspractice.sharepoint.com/sites/YammerDemo1/CEOBlog/Lists/Posts/Post.aspx?ID=2

Now we want to delete or hide the SharePoint social features and use Yammer embed instead.

For home page, I need to show summary of feeds from all different blog posts. I created a Yammer Group (using Yammer UI) and then used the Yammer Group ID in my code to display the Yammer Group feed.

Below is the embed script on Home Page and how the UI looks.

<div id="embedded-feed" style="height: 800px; width: 400px;">
</div>
<script src="https://assets.yammer.com/assets/platform_embed.js" type="text/javascript"></script>
<script type="text/javascript"> 
yam.connect.embedFeed({
  container: '#embedded-feed'
          , network: 'vinaybhatia.com'
        , feedType: 'group'
        , feedId: '5515127'
        , config: {
             use_sso: true
             , header: false
             , footer: true
             , showOpenGraphPreview: false
             , defaultToCanonical: false
             , hideNetworkName: false

        }
    });
</script>

Yammer Embed Screenshot on home page displaying latest comments for different blog posts:
(Click on the image to enlarge the image)


On the details blog post page, I use the following script. Note that I capture the page URL and page title  and pass to object properties. This ensures that different feed is shown for different blog posts, though my page and script remains the same. I have also thrown in a like button to illustrate how Yammer buttons can be embedded and use same concept.

<div id="embedded-like"></div>
<div id="embedded-feed" style="height:800px;width:600px;"></div>
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript"> 
var pageUrl = document.URL;
var pageTitle = document.title;

yam.connect.actionButton({
 container: "#embedded-like",
 network: "vinaybhatia.com",
 action: "like",
 objectProperties: { 
          url: pageUrl
          , type: 'page'
   , title: pageTitle
        }
});

yam.connect.embedFeed({
  container: '#embedded-feed'
          , network: 'vinaybhatia.com'
        , feedType: 'open-graph'
        , feedId: ''
        , config: {
             use_sso: true
             , header: false
             , footer: false
             , showOpenGraphPreview: false
             , defaultToCanonical: false
             , hideNetworkName: false
             , defaultGroupId: '5515127'
             , promptText: 'Comment on this blog'
        }
        , objectProperties: { 
          url: pageUrl
          , type: 'page'
   , title: pageTitle
        }
    });
</script>

Yammer Embed screenshots displaying different comments for different blog posts:
(Click on the images to enlarge the image)

Image for a different blog post on same page:




Instead of SharePoint blog site using post id to form unique URL's, this could have been CRM system with customer ID passed in query string, or pass the DepartmentID in an ASP.Net or Java website.