KB's

Social Bookmarks in Sitefinity

Introduction

Social bookmarks are a way of sharing information on one's favourite social network. But first we must know how social bookmarks work in Sitefinity. I would like to point out that modifying basic things with Social Bookmarks in Sitefinity does not require programming skills.

Social Bookmarks in Sitefinity

Social bookarks are available for the following modules:

  • Images & Documents
  • Generic Content
  • Blogs
  • Events
  • News

 If you web site were located locally on your computer at C:\intetpub\wwwroot\dido, and it had a sub-folder C:\intetpub\wwwroot\dido\App_Data, I would refer from now on to the latter as ~/App_Data. Therefore, ~/ would mean the root directory of our web site.

Social bookmarks settings are kept in the module's ControlTemplates directory. For example, for the news module, it would be ~/Sitefinity/ControlTemplates/News.

In that directory, we have a file called socialBookmarkTemplate.xml. Here is a sample file:

<bookmarks> 
  <itemTemplate> 
    <bookmark title="Facebook" name="Facebook"
      <url><![CDATA[http://www.facebook.com/sharer.php?u={0}&t={1}]]></url
    </bookmark>     
    <bookmark title="StumbleUpon" name="StumbleUpon" > 
      <url><![CDATA[http://www.stumbleupon.com/submit?url={0}]]></url
    </bookmark> 
    <bookmark title="Del.icio.us" name="delicious" > 
      <url><![CDATA[http://del.icio.us/post?url={0}&title={1}]]></url
    </bookmark> 
  </itemTemplate> 
  <extendedProperty> 
    <image> 
      <size>24</size> 
      <extension>png</extension> 
    </image> 
  </extendedProperty> 
</bookmarks> 

Important note!

Users with versions prior to 3.7 should upgrade this file, too - for all modules. You should add the CDATA element in the url tag.

 Here, we have an item template and extended properties. Item template is used to list all social bookmarks, and the extended properties are used for naming (more on that later).

 Every bookmark element describes a single social bookmark. It has name, title and url. Name is what identifies this social bookamrks and participates in icon naming. Title is what shows as alternate text of the social bookmark's icon.

 Url is starts with <!CDATA[ and ends with ]]>. These are important, because they allow you to copy-paste the social bookmark url in this file without worrying about escaping special XML characters. In the url, we have two more important elements: {0} and {1}. These are placeholders for

  • {0} => Url of the item that is going to be social-bookmark-ed
  • {1} => Title of the blog post/news item/event/library item or Name of the generic content item.
These values are substituted by Sitefinity with the real values for you, so that when you click on the social bookmark, you will have the actual values.

 

For extended properties, we have image size and image extension. These apply to all social bookmarks.

It is time to explain how images (icons) are mapped to social bookmarks. Right in the directory where socialBookmarkTemplate.xml. resides, there is a folder named SocialBookmark. All social bookmark images are there. Relating a bookmark element to a image in the SocialBookmark folder is guided by this rule:

Final image name = SocialBookmarkName_ImageSize.ImageExtension.

SocialBookmarkName is the name attribute of the bookmark element in socialBookmarkTemplate.xml, and ImageSize and ImageExtension come from the extended properties of the same file. This is done so that you can have two or more sets of icon sizes, and switching between them would be just a matter of editing a single value in the .xml file.

Customizing

If you want to change the icon of a social bookmark, all you have to do is change its image file. Now you know where to look for and what the social bookmark's name will be.

Reordering the social bookmarks is done by reordering the bookmark elements in the xml file for a module.

Removing a social bookmark is accomplished by removing its bookmark element.

Adding a new social bookmark would require you to find out the url for adding a new item to the social network you use. This information would be generally located on the social network's official web site. Then you would add a new bookmark element and a properly named picture.

Conclusion

Social bookmarks in Sitefinity require no programming skills to be modified. They are an easy way to share your favourite pages with your friends.