This library is a .NET port of Catharsis Social Web Widgets library for ASP.NET MVC platform.
It provides useful social media widgets to include on web pages of your site.
Web widgets are implemented as C# POCO objects that implement System.Web.IHtmlString
and provide convenient fluent interface to work with. Extension methods for System.Web.Mvc.HtmlHelper
for easiness of rendering are also provided as well.
Support
This project needs your support for further developments ! Please consider donating.
-
Yandex.Money : 41001577953208
-
WebMoney (WMR) : R399275865890
Installation and usage
-
Make sure ~/Scripts/WebWidgets directory with necessary JavaScript files is copied to the ~/Scripts directory of your ASP.NET MVC project.
-
Register required JavaScript bundles within your web application in
Global.asax.cs
file (Application_Start
method) :
Catharsis.Web.Widgets.WidgetsBundleConfig.RegisterBundles(BundleTable.Bundles);
- Use extension methods for
System.Web.Mvc.HtmlHelper
class to render web widgets where required, using fluent interface syntax :
@Html.YouTube().Video().Id("eYJSlHiXegI").Width("320").Height("240")
You can use lambda delegates as well :
@Html.YouTube().Video(x => x.Id("eYJSlHiXegI").Width("320").Height("240")))
Or create and render widgets directly :
@Html.Raw(new YouTubeVideoWidget().Id("eYJSlHiXegI").Width("320").Height("240"))
Code Example
The simplest .cshtml file (ASP.NET MVC view) that makes use of the library may look like the following :
@using Catharsis.Web.Widgets
<html>
<head></head>
<body>
`@RenderBody()`
`@Html.Cackle().Comments().Account("20049") @* Render HTML code for Cackle Comments widget. *@`
`@WebWidgetsScripts.Render().Cackle() @* Include required local Cackle javascript file from ~/Scripts/WebWidgets directory. Note : not all widgets require JavaScript files.` *@`
</body>
</html>
API examples
Cackle
1. Comments
Requirements: WebWidgetsScripts.Render().Cackle()
JavaScript bundle (head or body section)
Code:
@Html.Cackle().Comments().Account("20049")
2. Comments count hyperlink
Requirements: WebWidgetsScripts.Render().Cackle()
JavaScript bundle (head or body section)
Note: Hyperlinks must have a specific CSS class for this to work, as described in Cackle documentation.
Code:
@Html.Cackle().CommentsCount().Account("20049")
3. Latest comments
Requirements: WebWidgetsScripts.Render().Cackle()
JavaScript bundle (head or body section)
Code:
@Html.Cackle().LatestComments().Account("20049")
@Html.Cackle().LatestComments().Account("20049").Max(15).AvatarSize(32).TitleSize(50).TextSize(255)
4. OAuth login
Requirements: WebWidgetsScripts.Render().Cackle()
JavaScript bundle (head or body section)
Code:
@Html.Cackle().Login().Account("20049")
Disqus
1. Comments
Requirements: WebWidgetsScripts.Render().Disqus()
JavaScript bundle (head or body section)
Code:
@Html.Disqus().Comments().Account("v-svete-snov")
1. JS API initialization
Requirements: None
Code:
@Html.Facebook().Initialize().AppId("1437917246425293")
2. Activity Feed
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().ActivityFeed()
@Html.Facebook().ActivityFeed().Domain("yandex.ru")
@Html.Facebook().ActivityFeed().Domain("yandex.ru").Header(false).Recommendations(true).ColorScheme(FacebookColorScheme.Dark)
3. Recommendations Feed
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().RecommendationsFeed()
@Html.Facebook().RecommendationsFeed().Domain("yandex.ru")
@Html.Facebook().RecommendationsFeed().Domain("yandex.ru").Header(false).ColorScheme(FacebookColorScheme.Dark)
4. Comments
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().Comments()
@Html.Facebook().Comments().Url("http://yandex.ru")
@Html.Facebook().Comments().Url("http://yandex.ru").Order(FacebookCommentsOrder.ReverseTime).Posts(1).Width("500")
5. Facepile
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().Facepile()
@Html.Facebook().Facepile().Url("http://yandex.ru")
@Html.Facebook().Facepile().Url("http://yandex.ru").MaxRows(5).PhotoSize(FacebookFacepilePhotoSize.Large).Height("300")
6. Follow Button
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().FollowButton().Url("http://www.facebook.com/zuck")
@Html.Facebook().FollowButton().Url("http://www.facebook.com/zuck").KidsMode(true).Faces(true).Layout(FacebookButtonLayout.BoxCount)
7. Like Box
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().LikeBox().Url("https://www.facebook.com/pages/Clear-Words/515749945120070")
@Html.Facebook().LikeBox().Url("https://www.facebook.com/pages/Clear-Words/515749945120070").Header(false).Border(false).Faces(false).Stream(true).Width("500")
8. Like Button
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().LikeButton()
@Html.Facebook().LikeButton().Url("http://yandex.ru")
@Html.Facebook().LikeButton().Url("http://yandex.ru").Layout(FacebookLikeButtonLayout.BoxCount).Faces(true).Verb(FacebookLikeButtonVerb.Recommend)
9. Embedded post
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().Post().Url("https://www.facebook.com/prokhor.ozornin/posts/10203109769053557").Width(640)
10. Send Button
Requirements: Call to Html.Facebook().Initialize()
Code:
@Html.Facebook().SendButton()
@Html.Facebook().SendButton().Url("http://yandex.ru")
@Html.Facebook().SendButton().Url("http://yandex.ru").ColorScheme(FacebookColorScheme.Dark).KidsMode(true)
11. Embedded video
Requirements: None
Code:
@Html.Facebook().Video().Height("480").Width("640").Id("10203121281421359")
1. Analytics
Requirements: None
Code:
@Html.Google().Analytics().Domain("v-svete-snov.ru").Account("UA-27123759-16")
2. +1 Button
Requirements: WebWidgetsScripts.Render().Google()
JavaScript bundle (head or body section)
Code:
@Html.Google().PlusOneButton()
@Html.Google().PlusOneButton().Url("http://yandex.ru").Alignment(GooglePlusOneButtonAlignment.Right).Size(GooglePlusOneButtonSize.Tall).Annotation(GooglePlusOneButtonAnnotation.Inline).Recommendations(false)
Gravatar
1. Avatar image URL
Requirements: None
Code:
@Html.Gravatar().ImageUrl().Email("prokhor.ozornin@yandex.ru")
@Html.Gravatar().ImageUrl().Email("prokhor.ozornin@yandex.ru").Extension("jpg").ForceDefault(true).Size(320)
2. User profile URL
Requirements: None
Code:
@Html.Gravatar().ProfileUrl().Email("prokhor.ozornin@yandex.ru")
@Html.Gravatar().ProfileUrl().Email("prokhor.ozornin@yandex.ru").Xml()
IntenseDebate
1. Comments
Requirements: None
Code:
@Html.IntenseDebate().Comments().Account("a639ec3507d53023d4f213666651b6c2")
2. Comments count hyperlink
Requirements: None
Code:
@Html.IntenseDebate().Link().Account("a639ec3507d53023d4f213666651b6c2")
LiveJournal
1. Like Button
Requirements: None
Code:
@Html.LiveJournal().LikeButton()
2. Repost Button
Requirements: None
Code:
@Html.LiveJournal().RepostButton()
@Html.LiveJournal().RepostButton().Title("title").Text("text")
Mail.ru
1. ICQ On-Site
Requirements: None
Code:
@Html.MailRu().Icq()
@Html.MailRu().Icq().Account("12345678").Language("en")
2. Embedded video
Requirements: None
Code:
@Html.MailRu().Video().Id("i.v.sosnin62/3023/3027.html").Height("480").Width("640")
3. Like Button
Requirements: WebWidgetsScripts.Render().MailRu()
JavaScript bundle (body section)
Code:
@Html.MailRu().LikeButton()
@Html.MailRu().LikeButton().Layout(MailRuLikeButtonLayout.Second).Text(false).CounterPosition(MailRuLikeButtonCounterPosition.Upper).Size(30)
4. Faces
Requirements: WebWidgetsScripts.Render().MailRu()
JavaScript bundle (body section)
Code:
@Html.MailRu().Faces().Domain("mail.ru").Width(640).Height(480)
@Html.MailRu().Faces().Domain("mail.ru").Width(640).Height(480).Font(MailRuFacesFont.Tahoma).Title(false).BackgroundColor("aaffaa").HyperlinkColor("ffaaff").BorderColor("aaaaaa")
5. Groups
Requirements: WebWidgetsScripts.Render().MailRu()
JavaScript bundle (body section)
Code:
@Html.MailRu().Groups().Account("mail_ru").Width(640).Height(480)
@Html.MailRu().Groups().Account("mail_ru").Width(640).Height(480).BackgroundColor("aaffaa").ButtonColor("ffaaff").Subscribers(false).TextColor("aaaadd")
1. Follow Button
Requirements: WebWidgetsScripts.Render().Pinterest()
JavaScript bundle (head or body section)
Code:
@Html.Pinterest().FollowButton().Account("pinterest")
@Html.Pinterest().FollowButton().Account("pinterest").Label("Pinterest")
2. Embedded Pin
Requirements: WebWidgetsScripts.Render().Pinterest()
JavaScript bundle (head or body section)
Code:
@Html.Pinterest().Pin().Id("99360735500167749")
3. Board
Requirements: WebWidgetsScripts.Render().Pinterest()
JavaScript bundle (head or body section)
Code:
@Html.Pinterest().Board().Account("pinterest").Id("pin-pets")
@Html.Pinterest().Board().Account("pinterest").Id("pin-pets").Sidebar()
4. Profile
Requirements: WebWidgetsScripts.Render().Pinterest()
JavaScript bundle (head or body section)
Code:
@Html.Pinterest().Profile().Account("pinterest")
@Html.Pinterest().Profile().Account("pinterest").Sidebar()
5. Pin It Button
Requirements: WebWidgetsScripts.Render().Pinterest()
JavaScript bundle (head or body section)
Code:
@Html.Pinterest().PinItButton().Url("http://www.flickr.com/photos/kentbrew/6851755809").Image("http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg").Description("Next stop: Pinterest")
@Html.Pinterest().PinItButton().Url("http://www.flickr.com/photos/kentbrew/6851755809").Image("http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg").Description("Next stop: Pinterest").Counter(PinterestPinItButtonPinCountPosition.None).Size(PinterestPinItButtonSize.Large).Red().Shape(PinterestPinItButtonShape.Rectangular).Language("ja")
RuTube
1. Embedded video
Requirements: None
Code:
@Html.RuTube().Video().Id("6785018").Height("480").Width("640")
SoundCloud
1. User's profile icon
Requirements: None
Code:
@Html.SoundCloud().ProfileIcon().Account("prokhor-ozornin")
@Html.SoundCloud().ProfileIcon().Account("prokhor-ozornin").BlackWhite().Size(SoundCloudProfileIconSize.Size64)
Surfingbird
1. Surf Button
Requirements: WebWidgetsScripts.Render().Surfingbird()
JavaScript bundle (head or body section)
Code:
@Html.Surfingbird().SurfButton()
@Html.Surfingbird().SurfButton().Color(SurfingbirdSurfButtonColor.Blue).Counter(true).Label("Share").Url("http://yandex.ru").Layout(SurfingbirdSurfButtonLayout.Common)
Tumblr
1. Follow Button
Requirements: None
Code:
@Html.Tumblr().FollowButton().Account("clear-words-en")
@Html.Tumblr().FollowButton().Account("clear-words-en").ColorScheme(TumblrFollowButtonColorScheme.Dark).Type(TumblrFollowButtonType.Second)
2. Share Button
Requirements: WebWidgetsScripts.Render().Tumblr()
JavaScript bundle (head or body section)
Code:
@Html.Tumblr().ShareButton()
@Html.Tumblr().ShareButton().ColorScheme(TumblrShareButtonColorScheme.Gray).Type(TumblrShareButtonType.Third)
1. Tweet Button
Requirements: WebWidgetsScripts.Render().Twitter()
JavaScript bundle (head or body section)
Code:
@Html.Twitter().TweetButton()
@Html.Twitter().TweetButton().HashTags("first", "second", "third").Url("http://yandex.ru").Text("Let's share it !").Via("Prokhor").Suggestions(false)
2. Follow Button
Requirements: WebWidgetsScripts.Render().Twitter()
JavaScript bundle (head or body section)
Code:
@Html.Twitter().FollowButton().Account("prokhor_ozornin")
@Html.Twitter().FollowButton().Account("prokhor_ozornin").Suggestions(true).Counter(false).ScreenName(false)
Vimeo
1. Embedded video
Requirements: None
Code:
@Html.Vimeo().Video().Id("55456906").Width("640").Height("480")
Vkontakte
1. Embedded video
Requirements: None
Code:
@Html.Vkontakte().Video().Id("167533148").Hash("7a0cdf6ef7a69e67").User("5707198").Width("607").Height("360").Hd(true)
2. JS API initialization
Requirements: WebWidgetsScripts.Render().Vkontakte()
JavaScript bundle (head section)
Code:
@Html.Vkontakte().Initialize().ApiId("3816272")
3. OAuth Button
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().AuthButton().Standard("http://yandex.ru")
@Html.Vkontakte().AuthButton().Dynamic("onAuth").Width(640)
4. Comments
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Comments()
@Html.Vkontakte().Comments().Attach(VkontakteCommentsAttach.All).Limit(VkontakteCommentsLimit.Limit15).AutoPublish(true).AutoUpdate(true).Mini(true)
5. Community
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Community().Account("44545550")
@Html.Vkontakte().Community().Account("44545550").Mode(VkontakteCommunityMode.News).Height(400).Width(600).BackgroundColor("AABBCC").TextColor("FF0000").ButtonColor("00FF00")
6. Like Button
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().LikeButton()
7. Poll
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Poll().Id("6564504_c2a6ccb7df15aff473")
@Html.Vkontakte().Poll().Id("6564504_c2a6ccb7df15aff473").Width(640)
8. Wall Post
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Post().Id(45616).Owner(1).Hash("Yss6aNhrrQhOL5FfXZeuga8yKA")
@Html.Vkontakte().Post().Id(45616).Owner(1).Hash("Yss6aNhrrQhOL5FfXZeuga8yKA").Width(640)
9. Recommendations Feed
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Recommendations()
@Html.Vkontakte().Recommendations().Limit(VkontakteRecommendationsLimit.Ten).Max(50).Period(VkontakteRecommendationsPeriod.Month).Sorting(VkontakteRecommendationsSorting.Likes).Verb(VkontakteRecommendationsVerb.Like).Target("_blank")
10. Subscription
Requirements: Call to Html.Vkontakte().Initialize()
Code:
@Html.Vkontakte().Subscription().Account("5707198")
@Html.Vkontakte().Subscription().Account("5707198").OnlyButton(true)
Yandex
1. Metrika
Requirements: None
Code:
@Html.Yandex().Analytics().Account("12066574")
2. Like Button
Requirements: None
Code:
@Html.Yandex().LikeButton()
@Html.Yandex().LikeButton().Title("Yandex Main Page").Text("Share").Url("http://yandex.ru").Size(YandexLikeButtonSize.Small)
3. Embedded video
Requirements: None
Code:
@Html.Yandex().Video().Id("6ea0ugstkx.2528").User("leonevskiy").Width("450").Height("253")
4. Yandex.Money payment button
Requirements: None
Code:
@Html.Yandex().MoneyButton().Account("41001577953208").Sum(15.5).Description("Test Payment")
@Html.Yandex().MoneyButton().Account("41001577953208").Sum(15.5).Description("Test Payment").Type(YandexMoneyButtonType.Card).Text(YandexMoneyButtonText.Buy).Size(YandexMoneyButtonSize.Medium).Color(YandexMoneyButtonColor.White).AskPayerAddress(true).AskPayerEmail(true).AskPayerFullName(true).AskPayerPhone(true)
5. Yandex.Money donation form
Requirements: None
Code:
@Html.Yandex().MoneyDonateForm().Account("41001577953208").DescriptionText("Test Donation")
@Html.Yandex().MoneyDonateForm().Account("41001577953208").DescriptionText("Test Donation").Description().Sum(15.5).Cards(true).ProjectName("Yandex").ProjectSite("http://yandex.ru").Text(YandexMoneyDonateFormText.Give).AskPayerPhone(true).AskPayerFullName(true).AskPayerComment(true).AskPayerEmail(true)
6. Yandex.Money payment form
Requirements: None
Code:
@Html.Yandex().MoneyPaymentForm().Account("41001577953208").Description("Test Payment")
@Html.Yandex().MoneyPaymentForm().Account("41001577953208").Description("Test Payment").Sum(15.5).Cards(false).Text(YandexMoneyPaymentFormText.Transfer).PayerComment(true).AskPayerEmail(true).AskPayerFullName(true).AskPayerAddress(true).AskPayerPhone(true).AskPayerPurpose(true)
7. Share Button
Requirements: WebWidgetsScripts.Render().Yandex()
JavaScript bundle (head or body section)
Code:
@Html.Yandex().SharePanel()
@Html.Yandex().SharePanel().Services("facebook").Language("en")
YouTube
1. Embedded video
Requirements: None
Code:
@Html.YouTube().Video().Id("eYJSlHiXegI").Width("100%").Height("480")
VideoJS
1. Media Player
Requirements:
-
WebWidgetsScripts.Render().VideoJS()
JavaScript bundle (head or body section) -
WebWidgetsStyles.Render().VideoJS()
CSS bundle (head section)
Code:
@Html.VideoJS().Player().Width("640").Height("480").Videos(new MediaSource("http://vjs.zencdn.net/v/oceans.mp4", VideoContentTypes.MP4), new MediaSource("http://vjs.zencdn.net/v/oceans.webm", VideoContentTypes.WebM)).HtmlBody(@"<track kind=""captions"" src=""http://www.videojs.com/vtt/captions.vtt"" srclang=""en"" label=""English""></track>")