How to add a web part zone in a SharePoint custom page layout?

Create a custom page layout using SharePoint designer.

Select the content type for the page layout as shown below:

Then, create the web part zones like this:

<WebPartPages:WebPartZone runat="server"
      AllowPersonalization="true"
      ID="SomeID"
      FrameType="TitleBarOnly"
      Title="SomeTitle"
      Orientation="Horizontal">
</WebPartPages:WebPartZone>

How to hide SharePoint top bar (header) and left navigation from SharePoint custom master page using CSS?

You can either create a blank master page using SharePoint designer or

use the following styles:

#s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle,
.s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow,
#s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content,#sideNavBox
{
    display:none !important;
}

.s4-ca
{
    margin-left:0px !important; margin-right:0px !important;
}

#contentBox
{
    margin-left:0px;
    margin-right:0px;
    min-width:auto;
}

#contentRow
{
padding-top:0px !important;
}

#s4-workspace
{
 width:auto !important;
}

#s4-bodyContainer
{
 padding:0px;
}

How to create SharePoint App (App-Part or Client WebPart) to embed Yammer feed in SharePoint 2013/Online?

Step 1. Create an App for SharePoint 2013 in Visual Studio.

Step 2. Add an App-Part or Client Web-Part in your App.

Step 3. Go to the Element.xml of your App Part (Client Web Part) and prepare it like this:

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ClientWebPart Name="YammerFeed" Title="Yammer Feed by CompanyName" Description="Yammer Feed is an app-part by CompanyName to display yammer feeds. This app-part can be used to embed group, topic and user feeds." DefaultWidth="500" DefaultHeight="500">

    <!-- Content element identifies the location of the page that will render inside the client web part

         Properties are referenced on the query string using the pattern _propertyName_
         Example: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->

    <Content Type="html" Src="~appWebUrl/Pages/YammerFeed.aspx?network=_network_&amp;feedId=_feedId_&amp;feedType=_feedType_&amp;header=_header_&amp;footer=_footer_&amp;hideNetworkName=_hideNetworkName_&amp;{StandardTokens}" />

    <!-- Define properties in the Properties element.

         Remember to put Property Name on the Src attribute of the Content element above. -->

    <Properties>

      <Property
        Type="string"
        Name="network"
        WebBrowsable="true"
        WebDisplayName="Network"
        WebCategory="Yammer Settings"
        RequiresDesignerPermission="true"
        DefaultValue="CompanyName.com">
     </Property>

     <Property

        Type="string"
        Name="feedId"
        WebBrowsable="true"
        WebDisplayName="Feed ID"
        WebCategory="Yammer Settings"
        RequiresDesignerPermission="true"
        DefaultValue="5512843">
      </Property>

     <Property

        Name="feedType"
        Type="enum"
        RequiresDesignerPermission="true"
        DefaultValue="group"
        WebCategory="Yammer Settings"
        WebDisplayName="Feed Type">
        <EnumItems>
        <EnumItem WebDisplayName="Group" Value="group"/>
         <EnumItem WebDisplayName="Topic" Value="topic"/>
         <EnumItem WebDisplayName="User" Value="user"/>
        </EnumItems>
      </Property>

     <Property

        Name="header"
        Type="boolean"
        RequiresDesignerPermission="true"
        DefaultValue="false"
        WebCategory="Yammer Settings"
        WebDisplayName="Header">
      </Property>
 

      <Property

        Name="footer"
        Type="boolean"
        RequiresDesignerPermission="true"
        DefaultValue="true"
        WebCategory="Yammer Settings"
        WebDisplayName="Footer">
      </Property>

         <Property

            Name="hideNetworkName"
            Type="boolean"
            RequiresDesignerPermission="true"
            DefaultValue="false"
            WebCategory="Yammer Settings"
            WebDisplayName="Hide Network Name">
            </Property>

    </Properties>

  </ClientWebPart>

</Elements>
 



Step 4. Add an ASPX page under 'Pages' module and add the following HTML

<!DOCTYPE html>

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<html>
<head>
    <title></title>
    <link href="../Content/App.css" rel="stylesheet" />
    <script src="../Scripts/App.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" data-app-id="xxxxxxxxxxxxxxxxxxxxx" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
    <script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
    <script src="../Scripts/Yammer/YammerFeed.js"></script>
    <script type="text/javascript">
        yamLogin();
    </script>

</head>

<body style="border:solid;border-width:1px;border-color:#8f8c8c;">
    <table id="tblWait" class="fullWidth" style="display: none">
        <tr>
            <td align="center">
                <br /><br /><br />

                <img src="../Images/wait_SP.gif" />
                <img src="../Images/workingonItTextSmall.png" />

                <br /><br /><br /><br />

            </td>

        </tr>
    </table>

    <table class="loginStyle" id="tblBeforeLogin">

       <tr>
            <td align="center">
                <br /><br />

                <img id="imgSmallLogo" src="../Images/yammer-logo-final.png" />

               <br /><br />

               <input id="yammer-login" value="Login" type="button" class="loginButtonYam" />

                <br /> <br /><br /><br />

           </td>

       </tr>

    </table>  

    <div id="embedded-feed" style="height:480px;width:100%;display: none;"></div>
          
<%--Script to adjust Height and Width of the App Part--%>

    <script type="text/javascript">

        "use strict";
        window.Communica = window.Communica || {};
 
        $(document).ready(function () {
            Communica.Part.init();

        });

        Communica.Part = {

            senderId: '',

            init: function () {

               var params = document.URL.split("?")[1].split("&");

                for (var i = 0; i < params.length; i = i + 1) {

                    var param = params[i].split("=");

                    if (param[0].toLowerCase() == "senderid")

                        this.senderId = decodeURIComponent(param[1]);

                }

                this.adjustSize();

            },

            adjustSize: function () {

                var step = 30,

                newHeight,

                    contentHeight = $('#userDataContent').height(),

                    resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

               resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
                resizeMessage = resizeMessage.replace("{Height}", "500px");
                resizeMessage = resizeMessage.replace("{Width}", "100%");
                window.parent.postMessage(resizeMessage, "*");          
            }
        };
</script>

</body>

</html>



Step 5. YammerFeed.js

// Login to yammer

function yamLogin() {
    try {
        yam.getLoginStatus(
      function (response) {
          if (response.authResponse) {
              yamGroupFeeed();
          }
          else {
              yam.connect.loginButton('#yammer-login', function (resp) {
                  if (resp.authResponse) {
                      yamGroupFeeed();

                 }

             });
          }
      }

    );

    }
   catch (err) {
        //alert(err.message);
    }
 
}

//Fetch yammer feed

function yamGroupFeeed() {
    try {
        //fetch app configurations
        var yamNetwork = decodeURIComponent(getQueryStringParameter('network'));
        var yamFeedId = decodeURIComponent(getQueryStringParameter('feedId'));
        var yamFeedType = decodeURIComponent(getQueryStringParameter('feedType'));
        var yamHeader = decodeURIComponent(getQueryStringParameter('header'));
        var yamFooter = decodeURIComponent(getQueryStringParameter('footer'));
        var yamHideNetworkName = decodeURIComponent(getQueryStringParameter('hideNetworkName'));

        //request feed
        yam.connect.embedFeed(
            {
                container: '#embedded-feed',
                network: yamNetwork,
                feedType: yamFeedType,                // can be 'group', 'topic', or 'user'         
                feedId: yamFeedId,                 // feed ID from the instructions above
                config: {
                use_sso: true
                //defaultGroupId: XXXXXXX      // specify default group id to post to

                    , header: yamHeader

                    , footer: yamFooter
                    ////, showOpenGraphPreview: false
                    ////, defaultToCanonical: false
                    , hideNetworkName: yamHideNetworkName
                }
            });
   
       document.getElementById('tblBeforeLogin').style.display = "none";
       document.getElementById('embedded-feed').style.display = "block";
    }
    catch (err) {
        //alert(err.message);
    }
}

How to link a custom CSS file from SharePoint custom master page?

A custom style sheet can be referred like this from a custom SharePoint master page :

<SharePoint:CssRegistration ID="CSSRegistration1"
Name="/sites/customteamsite/Style%20Library"/folderName/customStyles.css"
After="Theameable/corev15.css" runat="server" EnableCssTheaing="false" />