Custom Property: ShareIt
Posted on September 7, 2009 by Frederik Vig in EPiServerYou’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.
Tom Stenius says:
Post Author September 7, 2009 at 21:03Nice work Fredrik!
Magnus Paulsson says:
Post Author September 8, 2009 at 09:00I 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/
Magnus Paulsson says:
Post Author September 8, 2009 at 09:03I 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 🙂
Marcus Lindblom says:
Post Author September 16, 2009 at 08:56Smooth, Thanks for sharing!
Abhishek says:
Post Author April 26, 2010 at 11:55I 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?
Frederik Vig says:
Post Author April 26, 2010 at 12:00@Abhishek – when did you get this error?
Abhishek says:
Post Author April 26, 2010 at 15:42Today 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?
Frederik Vig says:
Post Author April 27, 2010 at 21:42Tried 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.
Abhishek says:
Post Author April 28, 2010 at 13:14I 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?
Anders says:
Post Author June 23, 2010 at 07:49Hi 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
Frederik Vig says:
Post Author June 23, 2010 at 13:18Hi 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
Jan Montano says:
Post Author August 17, 2011 at 07:44Awesome! Just tried it now and it rocks! I was also able to add the ping.fm site.
Thank you very much.
One question though, is there a facility to add an icon for the new site?
Or should we do it via css?
Frederik Vig says:
Post Author August 17, 2011 at 09:35@Jan glad you liked it. Yes, the icons get added with CSS.
Frederik
Jan Montano says:
Post Author September 1, 2011 at 06:38Thanks.
By the way, Planning to integrate the property via pagetypebuilder.
Which page type – data type mapping would I use?
Jan Montano says:
Post Author September 1, 2011 at 07:53Also, I tested it on a page with query string:
http://mydomain.local/en/more/Video/?videoId=9
However the page Url it’s getting is:
http://mydomain.local/Templates/Masterpet/Pages/VideoPlayerPage.aspx?id=7001
which will result in an error because it’s not the proper page.
Any thoughts?
Frederik Vig says:
Post Author September 2, 2011 at 14:14@Jan return type would be string. But it’s much easier just using the EPiServer Property control for now. I’ll have a look at the bug you reported.
Frederik
Jan Montano says:
Post Author December 15, 2011 at 01:48Hi Frederik,
Hope everything’s well. Had any luck with the bug? I just can’t get the actual URL displayed on the toolbar. I’m not sure what property I need to use.
One more thing…
The way it works right now is that you add a property on a pagetype and you modify the property on each page. This is really good if I only have a few pages but if I have for example 20 existing blog pages, I need to manually edit each page and configure the ShareIt icons.
Is there a way to set it up just one time and all references will be pointing to it instead?
Cheers,
Jan
Frederik Vig says:
Post Author December 15, 2011 at 22:59Hi Jan PageLink property to it, you can also set is as a dynamic property and inherit, or set the default value of the property.
Sorry, I haven’t looked any closer at the querystring bug. Hopefully I can do it this weekend. When it comes to having to set the value of the property, I usually put it on the start page or a container page and then use PageReference.StartPage and set the
Cheers
Frederik
Frederik Vig says:
Post Author December 18, 2011 at 20:40Hi Jan
I’ve updated the code so it will work with query strings as well. Thanks for letting me know! You can either download the code from EPiCode or install it from nuget.episerver.com (version 1.2).
Frederik
Jan Montano says:
Post Author December 20, 2011 at 06:55You’re the Man! I didn’t know how to use the PageLink. But now I know, thanks to you!
About version 1.2, how can I actually get it from nuget.episerver.com?
I have no experience with nuget and there’s no download link from this page http://nuget.episerver.com/en/OtherPages/Package/?packageId=FV.ShareIt (even when logged-in)
I’m assuming I need to download it by installing nuget and I just did. By not sure what to put in the source so it will detect the packages from nuget.episerver.com. Tried http://nuget.episerver.com and http://nuget.episerver.com/en/OtherPages/Package/?packageId=FV.ShareIt but it just resulted in an error.
Jan Montano says:
Post Author December 20, 2011 at 07:48Hi Frederik,
I retrieved the latest from EPiCode but still having issues.
1.) http://solutionsharepoint.local/en/Blogs/Dates/2011/4/test-page/
will share:
2.) http://solutionsharepoint.local/Templates/AlloyTech/Blog/Pages/Item.aspx?id=273
It should still be sharing url#1
I was able to fix it by using HttpContext.Current.Request.RawUrl instead of pageData.LinkURL from Helper.cs:GetExternalUrl()
Thanks again.
Frederik Vig says:
Post Author December 23, 2011 at 11:57@Jan Sounds very strange, could you try by installing through NuGet? For NuGet you need a client as well, you can download it from nuget.org.
Cheers
Frederik
Mark van Dijk says:
Post Author January 11, 2012 at 23:48Hi Frederik,
Nice property, really like it!
Allthough we have experienced something strange:
When you go to edit mode for a page with a ShareIt property, after approx 1 minute you get a popup message “Error: Object doesn’t support property or method ‘ajaxSubmit'”.
This has something to do with EPiServer autosaving a draft version of the page.
Apperently the ShareIt property breaks the autosaving of the page. Removing the property also removes the message in edit mode.
Any ideas on this?
Thanks!
Nicklas says:
Post Author March 28, 2012 at 14:42I love this custom property but it seems like i cant change from 16×16 icons to bigger icons? when changing in the css it cant find it
/Cheers
Nicklas says:
Post Author March 28, 2012 at 15:05nvm Found it: doooh! as a good yellow, beer drinking cartoon friend of mine would put it!
Just remember to scroll down int the css file next time ;P