RSS feed
TwitterCustom Property: ShareIt
You’ve probably seen the addthis/sharethis toolbars on various sites that let you easily share a page on social media sites. I’ve made a custom property that allows editors to create their own, from a predefined list of sites (this list can easily be updated with new ones).
Result
Here are some pictures of the end result, both in view and edit mode.
View mode
Edit mode
To add other sites you simply drag and drop them from Social media sites into Active social media sites.
The number of icons to show textfield is the number of icons to display on the page (the show more link will show the rest). No value here means that all icons will be displayed.
Installation
To add ShareIt to your site download the code (bottom of the page), unzip it, go to the install directory and copy FV.ShareIt.dll file into your sites bin folder, copy the language file into the lang folder and then copy the whole FV.ShareIt folder to your sites root folder.
Example
You can now add the ShareIt property to your Page Type. To display it on your page you just need to add an EPiServer Property control and a link to the css file (located under /FV.ShareIt/Styles/styles.css).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <link href="/FV.ShareIt/Styles/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <EPiServer:Property runat="server" PropertyName="MyShareItPropertyName" /> </form> </body> </html>
Extending
To add more predefined sites you just edit SocialMediaSites.xml (located in the xml folder).
<site> <name>del.icio.us</name> <url><![CDATA[http://delicious.com/post?url={0}&title={1}¬es={2}]]></url> <cssclass>delicious</cssclass> </site>
Where {0} is the url of the page, {1} the title and {2} the introduction (MainIntro).
Download FV.ShareIt from EPiCode, or SVN Checkout the source code.
Related Posts:
- SlideShare Dynamic Content
- Adding CSS and JavaScript files dynamically to your ASP.NET page
- Creating a simple image gallery with EPiServer
- Part 4: Creating the standard page – Create an EPiServer site from scratch
- Part 1: Setting up the development environment – Create an EPiServer site from scratch
Nice work Fredrik!
[...] Custom Property: ShareIt | Frederik Vig – ASP.NET developer [...]
I created a similar Dynamic Content type a while back:
http://world.episerver.com/en/Blogs/Magnus-Paulsson/Dates/2009/2/Social-bookmarking-as-Dynamic-Content/
I imagine editors like to use the same share panels on most pages, so the best way is probably to use your property type on a common settings page and then use the “Property from other page” dynamic content to place the panel on the pages where it should be. That way you administer everything from one place. Your control is prettier too
Smooth, Thanks for sharing!
[...] now use EPiServer CMS 6, and making sure the code still works. I’ve also added the code for ShareIt and SlideShare Dynamic Content to EPiCode, and updated EPiCode.Extensions. They’re all now [...]
I get the following error :
Directory Listing Denied
This Virtual Directory does not allow contents to be listed.
Can you please tell me what step I am missing?
@Abhishek – when did you get this error?
Today I did the following steps
1) copied your Custom property (full code) in root folder and build IT.
2)Added the styles in master page.
3)Created property of type custom property(ShareIT) in admin and added in the code
The link show more is not working . I can see the View mode as in the Image(your blog) but I cant see anything in View mode
and when I click the button show more ,I get the error:-
Directory Listing Denied
This Virtual Directory does not allow contents to be listed.(in IE)
It URL changes and point to rooturl/av.share/units and page cannot be displayed(In firefox)
Thanks a lot for the reply..
Am I missing any steps?
Tried with the files from the Install folder? Also remember that the code is compiled against EPiServer CMS 6, update the references in Visual Studio if you need to target an earlier version.
I have taken your full code (for ShareIT) and pasted in the solution root folder.
No problem while compiling the code as I can see the Images and give count in edit mode .
But in view mode it is not working properly. I can’t see any social sites links and when I click the button show more
I get the error as I mentioned earlier.
I will probably need to debug your code a bit(which I wil do when I get time).
I just wanted to make sure if I am missing any steps?
Hi Frederik!
Just added ShareIt to my project (CMS 6), but I’m getting this error:
Unable to load one or more of the requested types. The following information may be a subset of the Type/LoaderException information present – inspect with debugger for complete view.
Check assemblies [FV.ShareIt, Version=1.0.0.1, Culture=neutral, PublicKeyToken=null] and/or types [FV.ShareIt.Classes.SocialMediaSite,
FV.ShareIt.Util.Helper,
FV.ShareIt.Property.ShareIt,
FV.ShareIt.Util.Helper+c__DisplayClass4]. Information from LoaderExceptions property [Request for the permission of type 'System.Web.AspNetHostingPermission, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.,
Request for the permission of type 'System.Web.AspNetHostingPermission, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.,
Request for the permission of type 'System.Web.AspNetHostingPermission, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.].
Do you got any idea what the problem might be? Am I missing something essential?
anders
Hi Anders
Based on the stack trace I would say that the Network Service user does not have access rights to the xml file: SocialMediaSites.xml. Also try and compile it yourself, I know there are some security restrictions in Windows 7 when downloading .dll files.
Hope this helps!
Frederik