Site Feed is very interesting webpart, when you want some sort of microblogging select Site feed webpart.
where is Site Feed webpart located in SharePoint 2013?
first you need to activate Site Feed feature, to do this go to site settings->Manage Site Features and activate it
when feature is activated, a list(MicroFeed) will be created on site contents section now you will see Site Feed webpart under Social & Collaboration category
Note: we cannot have two instances of Site Feed webpart in one site, you can place site feed webpart on multiple pages, doing so it will load same feeds on all webparts. if you want different feeds for every department or site then you need to activate Site Feed feature on every site where you want different feeds.
Here is the link where you can read site feed functionality in detail
http://www.sharepointanalysthq.com/2012/07/social-in-sharepoint-2013-newsfeed-posting-and-replying/
but my focus will be on how to customize Site Feed webpart look and feel.
my customization includes
1) hide reply, attach image and elispsis button
2) apply custom css styles
3) change webpart title
4) change Post button caption to “Send”
5) Place Site feed webpart on Home Page
first see which css class applies where? here is its structure. one of the blogger has mentioned in very clearly on following url
here is my Site Feed webpart after customization and i’ve placed it on home page
you can see i’ve customize everything mentioned above
There was some issues i’ve faced these are
Issue 1: when user post new feed or click on send button or press enter after writing some feed, the reply, elispis, attach image button gets visible so i’ve wrote script for this to handle as the new post creates new div’s to show new post this is dynamic post i’m using DOMNodeInserted to new node inserted and apply custom script on it.
Issue 2: BIG ISSUE
we’ve some webparts which contains Update Panel so when there is async postback occurs on the page! Site Feed webpart gets clear. but we need to have site feed webpart on home page but we also have to show calendar webpart which contains update panel
Solution: to do this, i’ve made some RnD on the Internet but didn’t find any solution so finally i’m opening Site Feed Webpart in IFRAME, now everything is fine
following is the script which i’m using to hide controls
<script type="text/javascript">
$(document).ready(function() {
hideHeaderFooter();
onPageLoadNewsFeed();
$(document).bind('DOMNodeInserted', function(){
$(".ms-microfeed-mysitemenu-ellipsisImage").hide();
$("a:contains('Reply')").hide();
});
});
function onPageLoadNewsFeed()
{
$('.ms-microfeed-mysitemenu-control').hide();
$("a:contains('Reply')").hide();
$(".ms-microfeed-messageFooter span:Contains('Follow')").hide();
$("#ms-addImageButton").hide();
$("div.ms-microfeed-siteFeedTitleArea").replaceWith("
<div class='generic_heading3'>
<h2>Share your thoughts</h2>
</div>
");
$('#ms-postbutton').html('Send');
}
function hideHeaderFooter()
{
$('.ms-designer-ribbon').hide();
$('.s4-ribbonrow').hide();
$('.logo').hide();
$('.header_row1').hide();
$('.footer').hide();
$('.inner_banner1').hide();
$('.breadcrumbs').hide();
$('.inner_leftcolumn').hide();
$('.inner_rightcolumn').hide();
$('#footer').hide();
$('#suiteBar').hide();
$('.InnerPageTitle').hide();
$('#ms-designer-ribbon').hide();
}
</script>
here is CSS classes which i’m using
</pre>
.ms-microfeed-cancelButton{
background-color: #fcfcfc !important;
border: 1px solid #d4d4d4 !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
color: #00a6d9 !important;
height: 22px !important;
padding-top: 3px !important;
width: 78px !important;
font-family: Arial !important;
font-size: 11px!important;
font-weight: normal !important;
}
.ms-microfeed-siteFeedTitleArea
{
background-color: silver;
padding-left: 20px;
text-transform:uppercase;
padding-bottom: 3px;
padding-top: 2px;
margin-bottom: 5px;
}
.ms-microfeed-siteFeedMicroBlogPart
{
margin-bottom: 2px;
}
.ms-microfeed-siteFeedTitleLabel
{
color: red !important;
}
.ms-microfeed-threadsDiv
{
height: 250px;
overflow-y: auto;
overflow-x: hidden;
}
.ms-microfeed-thread
{
max-width: 435px;
margin-bottom: 10px;
}
.ms-microfeed-replyArea
{
max-width: 375px;
min-width: 300px;
}
.ms-microfeed-attachmentButton
{
padding-top: 2px;
padding-bottom: 2px;
padding-bottom: 2px;
display: block;
}
.ms-microfeed-postButton
{
margin-top: 2px;
}
.ms-microfeed-postButtonSpan
{
position: absolute;
right: 12px;
}
.ms-microfeed-postBox
{
/* height: 53px;*/
min-height:53px;
}
.ms-microfeed-feedPart
{
margin-left: 10px;
max-width: 620px;
min-width: 290px;
padding-top: 10px;
position: relative;
width: 290px;
}
.ms-microfeed-fullMicrofeedDiv
{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
float: left;
margin-bottom: 10px;
width: 310px;
min-width:310px;
background-color:#f3f3f3;
top:0;
left:0px;
position:absolute;
}
.ms-microfeed-microblogpart
{
margin-bottom: 30px !important;
position: relative;
min-width:300px;
}
.ms-postbutton
{
float: right;
text-align: center;
}
.ms-microfeed-focusBoxNoFocus
{
border:1px solid #c6c6c6;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
margin-left:10px;
background-color:white;
width: 290px;
margin-top:10px;
}
.ms-microfeed-focusBox
{
background-color:white;
border: 1px solid #c6c6c6;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
margin-left: 10px;
width: 290px;
margin-top:10px;
}
.input.ms-button-emphasize, button.ms-button-emphasize
{
background-color: #fcfcfc;
border: 1px solid #d4d4d4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #00a6d9;
height: 22px;
padding-top: 3px;
width: 78px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
}
.input.ms-button-emphasize, button.ms-button-emphasize:hover
{
background-color: #008fbb;
border: 1px solid #008fbb;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
height: 22px;
padding-top: 3px;
width: 78px;
font-family: Arial;
font-size: 11px;
font-weight: normal;
}
.generic_heading3_Share {
background-image: url("/Style%20Library/Images/heading_bg2.png");
background-position: center bottom;
background-repeat: repeat-x;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
float: left;
padding: 7px 10px;
width: 290px;
}
h2 {
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: normal;
text-decoration: none;
}
.ms-subtleLink:link, .ms-subtleLink:visited, .ms-atMention:link, .ms-atMention:visited, .ms-hashTag:link, .ms-hashTag:visited
{
color: #444;
font-weight: bold;
}
.ms-microfeed-rootText
{
max-width: 531px;
min-width: 210px;
}
.ms-microfeed-button
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #008fbb;
cursor: pointer;
margin-left: 0;
min-width: 1px;
}
.ms-microfeed-button:hover
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #008fbb;
cursor: pointer;
margin-left: 0;
min-width: 1px;
}
.ms-spimn-presenceWrapper{
display: none !important;
overflow: hidden;
position: relative;
white-space: nowrap;
}
<pre>
Nasir's SharePoint Notes 