Embedding a Yammer Feed into SharePoint pages can be done using Script Editor Web parts, and in this article, we will show you how to do it, and what are the best practices to get the best possible user experience.
Step 1: Generate the Yammer Feed Embed Script
There are two ways to get the Yammer code that can be embedded into your SharePoint & Office 365 pages, and they are:
- Following instructions from Yammer Developer Network
- Or by clicking on the "Embed this feed in your site" link that can be found on your Yammer feeds ( see next image )
For the purpose of this article, we will go with the second way.
Click on the "Embed this feed in your site" link, and it will open a dialog with an auto-generated code, but before copy this text, it is recommended that you will remove the width value from the embedded feed div ( regardless of what the value is ), as shown in the next image
Now select all the text, and Copy
Note: you have the option to keep the width value from the auto-generated HTML, but then your feed will always have a fixed width, and will not be responsive ( it will have the same width on all mobile, tablets and desktop monitors ), and that's why we recommend to remove it, so you will have the best user experience
Step 2: Add a Script Editor Web Part to your page
Edit the page, click on the Insert ribbon tab > then click on Web Part
Once the list of available Web Parts appear, from the Categories navigate to Media and Content, then choose the Script Editor Web Part and click on Add
Step 3: Add the Generated Feed code to your Script Editor Web Part
Activate the Script Editor Web Part by clicking on it, once it is active, you will see a WEB PART tab will appear on the ribbon, click on it and then click on the Web Part Properties ribbon button ( see next image )
Now the page will refresh, after that, you will see an EDIT SNIPPET link inside the Script Editor Web Part
Click on the EDIT SNIPPET, and paste your generated code in the dialog, and click on Insert
Finally Save your page, and you are done!