If you are trying to add a Yammer Design Element to your SharePoint page, and you found that some functions are not working (Hide header, Hide footer) then this article is for you. We are going to show you another way of adding the Yammer feed using the Code Design Element to your page with some added customizations that you will surely like.
Information: Yammer has released a newer version of their API which is used to embed Yammer feeds. Since ShortPoint is using Yammer classic (an older version of Yammer API), with this change, some of the customization options (Hide Header, Hide Footer and Hide Network Name) are not working as we are not able to fetch data.
While we work on rebuilding our Yammer Design Element, you may use this workaround to embed a Yammer feed to your page.
TABLE OF CONTENTS
- Before we begin
- Step. 1: Prepare Yammer embed code
- Step 2: Add the Yammer widget to your SharePoint page
- Result
Before we begin
- To learn how to use the Code, you may check our article: Introducing ShortPoint Code Design Element.
- The Code Design Element is available since the ShortPoint SPFx version 6.9.35.x. Visit our Download ShortPoint page to check and get the latest version.
Step. 1: Prepare Yammer embed code
To get the Yammer embed code, please go to Yammer Widget.
Once you are in the Yammer widget site, you will be presented with options on how you want the feed to look like on your page and a preview on the right side.
1.1 Select the type of feed
Select the type of feed you want to present to your site. On the left-hand side, you will have the option to show other types of information for your Yammer feed. In this example, we will be using the Home feed.
Information: To know more about the differences of the Yammer feed options, you may read Add a yammer feed to a SharePoint page.
1.2 Customize Yammer widget's appearance
On the bottom left side of the page, you will also have an option to hide/show some information to your Yammer widget. In this example, we will be hiding the header and the footer of our widget.
1.3 Get the embed code
Once you are satisfied with how your widget look, you can click the Get code button.
After clicking, a pop-up window will show that will give you the embed code to your SharePoint page.
Please copy this code and save/paste it to a Notepad or any other text editor.
Step 2: Add the Yammer widget to your SharePoint page
2.1 Insert the Code Design Element
The Code Design Element can be easily added to your pages using ShortPoint Page Builder.
You can start with adding a ShortPoint web part to your page by clicking the big blue Insert button and selecting ShortPoint from the list of the web parts:
Then, delete the default Info Design Element (1) and click the blue Insert button to open the ShortPoint Page Builder (2):
Select the Code Design Element from the grid:
2.2 Update the Code with the Yammer embed code
Paste the code obtained in the step 1.3 to the HTML field of Code Design Element:
Note: If you have the Preview option enabled, you will immediately see the Yammer widget in the preview window, just like on the screenshot above. If the Yammer widget is not showing up, double-check that you paste the embed code correctly.
Click Insert and save the page:
Result
That's it! This is how it may look like on your page:
Related articles:
- How to embed a Modern SharePoint List Calendar (Month) View Using ShortPoint Code Design Element
- Example Use Cases for ShortPoint Code Design Element: Part 1
- How to Execute JavaScript Inside the Code Design Element that Depends on Loading External JavaScript Assets
- Introducing Shortpoint Yammer Design Element
- Introducing ShortPoint Code Design Element