Monday, July 7, 2014


In last two posts we saw how to use Comments Embed to implement Conversations or Commenting on documents and blogs. In this post we will see how to use group embed. The question will come in your mind that if there is Yammer web part with which group feeds can be integrated or displayed on page then why Embeds? Embed will be helpful in case where farm deployment is not allowed. Also take scenario where you want to display multiple group's feeds on single page. This cannot be done with web part as only one instance of web part is allowed.

In such scenarios embeds can be used. In this post we will take above scenario where feeds of multiple groups needs to be display on page.  The requirement is there will be drop down which shows groups and whenever group is selected in drop down it's feeds should get displayed. Lets see how we can achieve it.


Steps to add multiple Group’s feed on SharePoint page:

      1.    Create a html file with below code.
      <select id="selectGroup">
      <option value="all">All Company </option>
      <option value="feedid1">Development </option>
      <option value="feedid2">Unit Test </option>
      </select>
     <div id="embedded-feed" style="height:800px;width:400px;"></div> 
      <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="https://assets.yammer.com/assets/platform_embed.js"></script> 
      <script>
      yam.connect.embedFeed({
                container: "#embedded-feed",
                network: "network.com",
                feedType: "group",
                feedId: "all"}); 
      $( "#selectGroup" ).change(function() {               
                $( "#embedded-feed" ).html("");
                yam.connect.embedFeed({ 
                container: "#embedded-feed", 
                network: "network.com", 
                feedType: "group", 
                feedId: this.value});
         }); 
     </script>


2.      Upload file to the Site assets library.
      3.   Go to the SharePoint page where you want to implement multiple group’s feed.
      4.   Open page in edit mode.
      5.      Add content editor web part and edit properties.



      6.      Give above html file path in content link of web part.



      7.      Save and close the page. You are ready to use your new component.



You can make it fully dynamic by using Groups REST to load group drop down control. We will see this in coming posts. You can customize Yammer integration as much as you want with various options.


Happy SharePoint coding.

1 comment:

  1. Hello,
    This works great immediately after I configure the web part and hit save to go back to browse mode. However, after that, it no longer loads the Yammer feed if I navigate away or if someone else views it. However, if I navigate directly to the page in SiteAssets or edit the page I added the web part to, the Yammer discussions load.

    Any ideas why the discussions will not appear when browsing the page normally?!

    ReplyDelete