How to add an instagram, facebook and twitter logos in sharepoint modern communication site footer?

Question

I am working on a new project where I am setting up communication as hubsite and bunch of team sites. I am looking to add a blue background colored footer to the landing page of the communication site.

There is a blog post: https://dannyjessee.com/blog/index.php/2017/08/custom-modern-page-header-and-footer-using-sharepoint-framework-part-2/ using which I can add textual footer along with desired background color.

But as of my requirement, I have to add a footer like shown below. Also need to link these all logos to the respective social media account of the end client. Is this possible to do, please help if someone has done anything like this.

Thanks in advance.

Answer 1

I have created a reusable SPFx webpart which will allow you to add configurable header and footer via Webpart UI, you can find this solution here. All you need to do.

I have tried and tested below html to footer

<div>
   <div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
      <div style="float: right;padding-right: 135px;"> 
         <a href="https://twitter.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
         <a href="https://facebook.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
         <a href="https://instagram.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a> 
      </div>
   </div>
</div>

Please note that you have to upload you icons in SiteAssets library or refer from appropriate path. Change the background color using in line style to 2nd level of div.

If you have your own SPFx extension like you tried above using blog, you have to add below code in onInit() method

public onInit(): Promise<void> {
  let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom); 
          if (bottomPlaceholder) { 
            bottomPlaceholder.domElement.innerHTML = '<div>
   <div class="ms-bgColor-themeDark ms-fontColor-white" style="height:40px;float: left;line-height:2.5;font-weight:bold;align-items: right;width: 100%;">
      <div style="float: right;padding-right: 135px;"> 
         <a href="https://twitter.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/twitter-16.png" alt="Smiley face"></a>
         <a href="https://facebook.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/facebook-3-16.png" alt="Smiley face"></a>
         <a href="https://instagram.com/batman" style="padding: 5px;">
         <img src="/sites/mysc/SiteAssets/instagram-16.png" alt="Smiley face"></a> 
      </div>
   </div>
</div>';

   return Promise.resolve();
 }

Note - change the path of images and hyperlink as per your requirement.

Screenshot on how it looks using above html

Icons Reference links

https://www.iconsdb.com/icons/download/white/twitter-16.png https://www.iconsdb.com/icons/download/white/facebook-3-16.png https://www.iconsdb.com/icons/download/white/instagram-16.png

If you want to use my resuable solution, below is what you can do

• Download code
• Modify solution to refer solution assets from cdn, azure etc(as per you requirement)
• Package the solution
• Upload to App catalog
• Install app to required site collection
• Create a modern page and add webpart
• Add required html to footer text area
• Click on register custom action, refresh the page and you are good to go
• To modify html, visit page again. you can update html in text area and click update custom action. Refresh the page.

Useful links -

Basic understanding of SPFx Webpart

Deploy SPFx assets to Office 365 CDN

Hope this helps...Happy coding..!!! Please upvote and mark as answer if this helped.