Custom My Site Social Buttons - I Like It, Tags and Notes

Custom My Site Social Buttons - I Like It, Tags and Notes

Hello Folks,

Ever thought of creating custom image buttons that implements the functionality of I Like It , Tags and Notes on SharePoint 2010?

Came across a requirement where the images used for these have to be custom. I thought of replacing the Social tagging, Social Notes images from the Images folder.

But SharePoint implements this through a delegate control.These delegate controls are referred though a user control called SocialData.ascx from the control templates.

Confused with all these files and the way they are linked, i have to rethink my requriements.

1. I like it , Tags and Notes funtionality need to be implemented.

2. They need to use custom images.

The OOB controls refer the class Microsoft.Sharepoint.Portal.WebControls.SocialNotificationControl and Microsoft.Sharepoint.Portal.WebControls.SocialNotificationBase.

The image that is referred OOB is the Image Map which is a combination of many images. So cant replace the image from the Images folder.-->  "/_layouts/images/mossfgimg.png"

Using the Reflector i could understand that these controls simply call the methods from the SocialData.js.

Here is how a custom I Like it button can be implemented on Any Page.

<script type="text/ecmascript">

function AddCompanyQuickTag() {
SafeRunFunction(function () {
var o = new SocialQuickTag("ClientID");
o.url = document.URL;
o.title = document.title;
o.tagged_text ='Tagged the page as I Like It';//The text can be changed. This will be displayed as a notification when I like it button is clicked and the page is tagged.
o.AddQuickTag(0);
}, 'SocialData.js', 'SocialQuickTag');
}

</script>

<div>

<a onclick="AddCompanyQuickTag()"><img src="/_layouts/images/heart_icon.png"></a>

</div>

And here is how you can implement a custom Tags and Notes feature on any page.

<script type="text/ecmascript">

function GetINFATagsForThePage() {

SafeRunFunction(function () {
var o = new SocialTagsAndNotes('getTags101');
o.url = document.URL;
o.GetSocialNotification();}, 'SocialData.js', 'SocialTagsAndNotes');
}

</script>

<div>

<a title="Tags help you remember links and classify the page. Notes are public comments. Tags and notes post to your news feed and work across different sites." id="getTags101"  onclick="SafeRunFunction(function() { TagDialogOpener.Open(document.url, document.title, '0'); }, 'SocialData.js', 'TagDialogOpener');" onmouseover="GetTagsForThePage()"><img src="/_layouts/images/message_icon.png"></a>
</div>
PS: OnMouseOver of theTags and Notes, the title will be appened with the total number of tags the page has. This is OOB functionality and can be understood from the methods(SocialTagsAndNotes) in the SocialData.js from Layouts folder. But for some strange reasons i couldnt see that on my page. If anyone could know the reason would be of a great help.

Happy coding :)
Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • The concept of creating a custom button is nice but if you just wanted to change the image, that can be done by CSS. Hide the img and add the required image to anchor as a background.

  • There is a big TYPO, it should be "text/ecmascript", not "text\ecmascript", it took me a day to figure it out! the slash!

  • Sorry for the bug Lifeng Duan. Thanks for finding it. Have changed it now.

Page 1 of 1 (3 items)