Adding link next to follow and share links in sharepoint online

Question

I have to add a link next to follow and share links on top bar in sharepoint. So I wanted to ask if it is possible by any out of the box feature.

I have tried it using below jquery code:-

var newLinks = "<li class='ms-cui-topBar2'> \
   <a class='ms-cui-topBar2-a' href='http://extranet.crescent.com'>Extranet</a> \
   </li> \
   <li class='ms-cui-topBar2'> \
   <a class='ms-cui-topBar2-a' href='http://support.crescent.com'>Customer Support</a> \
   </li> ";
$('#RibbonContainer-TabRowRight').prepend(newLinks);

This is adding the new link but it is hiding the previous links follow and share.

Answer 1

I have modified your snippet little bit able to see as needed.

var newLinks = "<a class='ms-cui-topBar2-a' href='http://extranet.crescent.com'><span class='ms-promotedActionButton-text'>Extranet</span></a><a class='ms-cui-topBar2-a' href='http://support.crescent.com'><span class='ms-promotedActionButton-text'>Customer Support</span></a>";
$('#RibbonContainer-TabRowRight').prepend(newLinks);

In your snippet "li" is aligned as a list and you can make some changes to CSS to get worked. Let me know if you need additional assistance.

Thanks, Venkat Konjeti

Answer 2

I have found a working code for it.

var a1 = document.createElement("a");
a1.href= "http://www.google.com";
a1.innerHTML = "Extranet";
var a2 = document.createElement("a");
a2.href= "http://www.google.com";
a2.innerHTML = "CS Support";

$('#RibbonContainer-TabRowRight').prepend(a2).prepend(a1);