I have been investigating SharePoint 2010 ribbon lately. While doing so i came across some useful documentation posted on both Microsoft and personal blogs. I have listed some of the more useful resources at one of my earlier post. Based on these resources I have created a social bookmarking ribbon tab similar to the ones found in some blogs and social sites. This post is to share the implementation and some basic findings. Some of these findings are based on experiences in creating the social bookmarking ribbon and might not be the best practice for the final version of SharePoint 2010.

End result … download at the end of the post

See it in action here …
httpv://www.youtube.com/watch?v=trQgdexZC6I

Following list summaries the minimal steps that are required to create a ribbon tab or contextual group

  • Location attribute of CustomAction must be as follows 
    <CustomAction Id="Cecil.Ribbon.Socialize" Title="Socialize" Location="CommandUI.Ribbon">
  • Location attribute of CommandUIDefinition must be either of the following 
    <CommandUIDefinition Location="Ribbon.Tabs._children">
or
<CommandUIDefinition Location="Ribbon.ContextualTabs._children">

    Former is required for Tabs and later is for ContextualGroup

  • Fill in CommandUIDefinition while adhering to the schema which can be found at {14HIVE}\TEMPLATE\GLOBAL\XML\CMDUI.XML
  • Create a custom CUI.Page.PageComponent and place it in the _layouts folder
  • Place all the command names in either getGlobalCommands or getFocusedCommands
  • If your ribbon is in a state when the tab or contextual group should be visible then make sure canHandleCommand returns true
  • If your button or other control is in a state when they can be pressed make sure canHandleCommand returns true
  • Run code specific to each command in handleCommand method based on the commandId
  • Include a reference to Microsoft.Web.CommandUI.dll in your project
  • Include the CUI.Page.PageComponent source file then register it by making it available in a web control. 
     public class SocializeBootstrapper : WebControl
    {
        protected override void OnPreRender(EventArgs e)
        {
            ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Core.js", false, true);
            ScriptLink.RegisterScriptAfterUI(this.Page, "CUI.js", false, true);
            ScriptLink.RegisterScriptAfterUI(this.Page, "core.js", true, false);
            ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Ribbon.js", false, true);
            ScriptLink.RegisterScriptAfterUI(this.Page, "SP.Runtime.js", false, true);
            ScriptLink.RegisterScriptAfterUI(this.Page, "SP.js", false, true);
            ScriptLink.RegisterScriptAfterUI(this.Page,
                        "SPCecil.Socialize/Socialize.UI.js", false, true);

            SPRibbon currentRibbon = SPRibbon.GetCurrent(this.Page);
            currentRibbon.MakeTabAvailable("Cecil.Ribbon.Socialize.Tab");

            base.OnPreRender(e);
        }
    }
  • The load the control using DelegateControl 
    <Control
		Id="AdditionalPageHead"
		Sequence="200"
		ControlClass="$SharePoint.Project.FileNameWithoutExtension$.SocializeBootstrapper"
		ControlAssembly="$SharePoint.Project.AssemblyFullName$">
</Control>

[download id="1" format="1"]
If you want to change the button images around its pretty easy to do so, check out this social image set and replace them in the _layouts folder.
if you find this solution helpful please have a link back to this blog.