This library is a JavaScript port of Catharsis Social Web Widgets library.

It provides useful social media widgets to include on web pages of your site.

Web widgets are implemented as JavaScript objects that provide convenient fluent interface to work with. Factory classes for generation of web widgets are also provided for more convenience.

Support

This project needs your support for further developments ! Please consider donating.

Yandex.Money : 41001577953208
WebMoney (WMR) : R399275865890

Project directory structure

/src : Contains all required source code along with .js files.

--/scripts : JavaScript .js files, required by some groups of widgets for rendering.

--/widgets : Source code of widgets, divided by groups. Each subdirectory represents a set of related files for a group of widgets (Cackle, Facebook, YouTube, etc.).

_--/jquery/widgets.jquery.js : Web Widgets JQuery plugin hook. Must be included before catharsis.web.widgets.min.js. Alternatively, you can use catharsis.web.widgets.jquery.min.js file, which is essentially widgets.jquery.js + catharsis.web.widgets.min.js.

_--/jquery/catharsis.web.widgets.jquery.min.js : Combined & minified production version of Web Widgets JQuery plugin.

_--/catharsis.web.widgets.min.js : Combined & minified production version of Web Widgets library (contents of /widgets directory).

Installation and usage

Copy scripts directory along with catharsis.web.widgets.min.js file to any directory under document root of your web server.
If you want to move JavaScript files from former scripts directory to another (for example, a dedicated directory where all JavaScript files in your website reside), please set a new path to it in the Widgets.scripts().SCRIPTS_PATH property.
You are ready to rock. Read on for detailed code usage examples.
If you want to use JQuery plugin, use /jquery/catharsis.web.widgets.jquery.min.js instead of /catharsis.web.widgets.min.js along with JQuery core library and /scripts directory. This plugin includes a helper utility method ($.widgets()) that returns global Widgets object, and can be used as follows : $.widgets().cackle().comments().account("20049").render()

Basic Example

<html>

<head>

</head>

<body>

`<script type="text/javascript" src="catharsis.web.widgets.min.js"></script>`
`<script type="text/javascript">`
  `Widgets.cackle().comments().account("20049").render(); // Render HTML code for Cackle Comments widget.`
  `Widgets.scripts().cackle(); // Include required local Cackle javascript file from /scripts directory. Note : not all widgets require JavaScript files.`
`</script>`

</body>

</html>

JQuery Plugin Example

<html>

<head>

`<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>`

</head>

<body>

`<script type="text/javascript" src="catharsis.web.widgets.jquery.min.js"></script>`
`<script type="text/javascript">`
  `$.widgets().cackle().comments().account("20049").render(); // Render HTML code for Cackle Comments widget.`
  `$.widgets().scripts().cackle(); // Include required local Cackle javascript file from /scripts directory. Note : not all widgets require JavaScript files.`
`</script>`

</body>

</html>

API examples

Cackle

1. Comments

Requirements: Widgets.scripts().cackle() JavaScript bundle

Code:

Widgets.cackle().comments().account("20049").render()

2. Comments count hyperlink

Requirements: Widgets.scripts().cackle() JavaScript bundle

Note: Hyperlinks must have a specific CSS class for this to work, as described in Cackle documentation.

Code:

Widgets.cackle().commentsCount().account("20049").render()

3. Latest comments

Requirements: Widgets.scripts().cackle() JavaScript bundle

Code:

Widgets.cackle().latestComments().account("20049").render()

Widgets.cackle().latestComments().account("20049").max(15).avatarSize(32).titleSize(50).textSize(255).render()

4. OAuth login

Requirements: Widgets.scripts().cackle() JavaScript bundle

Code:

Widgets.cackle().login().account("20049").render()

Disqus

1. Comments

Requirements: Widgets.scripts().disqus() JavaScript bundle

Code:

Widgets.disqus().comments().account("v-svete-snov").render()

Facebook

1. JS API initialization

Requirements: None

Code:

Widgets.facebook().initialize().appId("1437917246425293").render()

2. Activity Feed

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().activityFeed().render()

Widgets.facebook().activityFeed().domain("yandex.ru").render()

Widgets.facebook().activityFeed().domain("yandex.ru").header(false).recommendations(true).colorScheme(Widgets.Facebook().ColorScheme.DARK).render()

3. Recommendations Feed

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().recommendationsFeed().render()

Widgets.facebook().recommendationsFeed().domain("yandex.ru").render()

Widgets.facebook().recommendationsFeed().domain("yandex.ru").header(false).colorScheme(Widgets.Facebook().ColorScheme.DARK).render()

4. Comments

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().comments().render()

Widgets.facebook().comments().url("http://yandex.ru").render()

Widgets.facebook().comments().url("http://yandex.ru").order(Widgets.Facebook().CommentsOrder.REVERSE_TIME).posts(1).width("500").render()

5. Facepile

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().facepile().render()

Widgets.facebook().facepile().url("http://yandex.ru").render()

Widgets.facebook().facepile().url("http://yandex.ru").maxRows(5).photoSize(Widgets.Facebook().FacepilePhotoSize.LARGE).height("300").render()

6. Follow Button

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().followButton().url("http://www.facebook.com/zuck").render()

Widgets.facebook().followButton().url("http://www.facebook.com/zuck").kidsMode(true).faces(true).layout(Widgets.Facebook().ButtonLayout.BOX_COUNT).render()

7. Like Box

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().likeBox().url("https://www.facebook.com/pages/Clear-Words/515749945120070").render()

Widgets.facebook().likeBox().url("https://www.facebook.com/pages/Clear-Words/515749945120070").header(false).border(false).faces(false).stream(true).width("500").render()

8. Like Button

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().likeButton().url("http://yandex.ru").render()

Widgets.facebook().likeButton().url("http://yandex.ru").layout(Widgets.Facebook().ButtonLayout.BOX_COUNT).faces(true).verb(Widgets.Facebook().LikeButtonVerb.RECOMMEND).render()

9. Embedded post

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().post().url("https://www.facebook.com/prokhor.ozornin/posts/10203109769053557").width(640).render()

10. Send Button

Requirements: Call to Widgets.facebook().initialize()

Code:

Widgets.facebook().sendButton().render()

Widgets.facebook().sendButton().url("http://yandex.ru").render()

Widgets.facebook().sendButton().url("http://yandex.ru").colorScheme(Widgets.Facebook().ColorScheme.DARK).kidsMode(true).render()

11. Embedded video

Requirements: None

Code:

Widgets.facebook().video().height("480").width("640").id("10203121281421359").render()

Google

1. Analytics

Requirements: None

Code:

Widgets.google().analytics().domain("v-svete-snov.ru").account("UA-27123759-16").render()

2. +1 Button

Requirements: Widgets.scripts().google() JavaScript bundle

Code:

Widgets.google().plusOneButton().render()

Widgets.google().plusOneButton().url("http://yandex.ru").alignment(Widgets.Google().PlusOneButtonAlignment.RIGHT).size(Widgets.Google().PlusOneButtonSize.TALL).annotation(Widgets.Google().PlusOneButtonAnnotation.INLINE).recommendations(false).render()

Gravatar

1. Avatar image URL

Requirements: None

Code:

Widgets.gravatar().imageUrl().hash("61b98d241eaa1ce237c979e7a8181d13").render()

Widgets.gravatar().imageUrl().hash("61b98d241eaa1ce237c979e7a8181d13").extension("jpg").forceDefault(true).size(320).render()

2. User profile URL

Requirements: None

Code:

Widgets.gravatar().profileUrl().hash("61b98d241eaa1ce237c979e7a8181d13").render()

Widgets.gravatar().profileUrl().hash("61b98d241eaa1ce237c979e7a8181d13").xml().render()

IntenseDebate

1. Comments

Requirements: None

Code:

Widgets.intensedebate().comments().account("a639ec3507d53023d4f213666651b6c2").render()

2. Comments count hyperlink

Requirements: None

Code:

Widgets.intensedebate().link().account("a639ec3507d53023d4f213666651b6c2").render()

LiveJournal

1. Like Button

Requirements: None

Code:

Widgets.livejournal().likeButton().render()

2. Repost Button

Requirements: None

Code:

Widgets.livejournal().repostButton().render()

Widgets.livejournal().repostButton().title("title").text("text").render()

Mail.ru

1. ICQ On-Site

Requirements: None

Code:

Widgets.mailru().icq().render()

Widgets.mailru().icq().account("12345678").language("en").render()

2. Embedded video

Requirements: None

Code:

Widgets.mailru().video().id("i.v.sosnin62/3023/3027.html").height("480").width("640").render()

3. Like Button

Requirements: Widgets.scripts().mailru() JavaScript bundle (body section)

Code:

Widgets.mailru().likeButton().render()

Widgets.mailru().likeButton().layout(Widgets.MailRu().LikeButtonLayout.SECOND).text(false).counterPosition(Widgets.MailRu().LikeButtonCounterPosition.UPPER).size(30).render()

4. Faces

Requirements: Widgets.scripts().mailru() JavaScript bundle (body section)

Code:

Widgets.mailru().faces().domain("mail.ru").width(640).height(480).render()

Widgets.mailru().faces().domain("mail.ru").width(640).height(480).font(Widgets.MailRu().FacesFont.TAHOMA).title(false).backgroundColor("aaffaa").hyperlinkColor("ffaaff").borderColor("aaaaaa").render()

5. Groups

Requirements: Widgets.scripts().mailru() JavaScript bundle (body section)

Code:

Widgets.mailru().groups().account("mail_ru").width(640).height(480).render()

Widgets.mailru().groups().account("mail_ru").width(640).height(480).backgroundColor("aaffaa").buttonColor("ffaaff").subscribers(false).textColor("aaaadd").render()

Pinterest

1. Follow Button

Requirements: Widgets.scripts().pinterest() JavaScript bundle

Code:

Widgets.pinterest().followButton().account("pinterest").render()

Widgets.pinterest().followButton().account("pinterest").label("Pinterest").render()

2. Embedded Pin

Requirements: Widgets.scripts().pinterest() JavaScript bundle

Code:

Widgets.pinterest().pin().id("99360735500167749").render()

3. Board

Requirements: Widgets.scripts().pinterest() JavaScript bundle

Code:

Widgets.pinterest().board().account("pinterest").id("pin-pets").render()

Widgets.pinterest().board().account("pinterest").id("pin-pets").sidebar().render()

4. Profile

Requirements: Widgets.scripts().pinterest() JavaScript bundle

Code:

Widgets.pinterest().profile().account("pinterest").render()

Widgets.pinterest().profile().account("pinterest").sidebar().render()

5. Pin It Button

Requirements: Widgets.scripts().pinterest() JavaScript bundle

Code:

Widgets.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(Widgets.Pinterest().PinItButtonPinCountPosition.NONE).size(Widgets.Pinterest().PinItButtonSize.LARGE).red().shape(Widgets.Pinterest().PinItButtonShape.RECTANGULAR).language("ja").render()

RuTube

1. Embedded video

Requirements: None

Code:

Widgets.rutube().video().id("6785018").height("480").width("640").render()

SoundCloud

1. User's profile icon

Requirements: None

Code:

Widgets.soundcloud().profileIcon().account("prokhor-ozornin").render()

Widgets.soundcloud().profileIcon().account("prokhor-ozornin").blackWhite().size(Widgets.SoundCloud().ProfileIconSize.SIZE_64).render()

Surfingbird

1. Surf Button

Requirements: Widgets.scripts().surfingbird() JavaScript bundle

Code:

Widgets.surfingbird().surfButton().render()

Widgets.surfingbird().surfButton().color(Widgets.Surfingbird().SurfButtonColor.BLUE).counter(true).label("Share").url("http://yandex.ru").layout(Widgets.Surfingbird().SurfButtonLayout.COMMON).render()

Tumblr

1. Follow Button

Requirements: None

Code:

Widgets.tumblr().followButton().account("clear-words-en").render()

Widgets.tumblr().followButton().account("clear-words-en").colorScheme(Widgets.Tumblr().FollowButtonColorScheme.DARK).type(Widgets.Tumblr().FollowButtonType.SECOND).render()

2. Share Button

Requirements: Widgets.scripts().tumblr() JavaScript bundle

Code:

Widgets.tumblr().shareButton().render()

Widgets.tumblr().shareButton().colorScheme(Widgets.Tumblr().ShareButtonColorScheme.GRAY).type(Widgets.Tumblr().ShareButtonType.THIRD).render()

Twitter

1. Tweet Button

Requirements: Widgets.scripts().twitter() JavaScript bundle

Code:

Widgets.twitter().tweetButton().render()

Widgets.twitter().tweetButton().hashTags(["first", "second", "third"]).url("http://yandex.ru").text("Let's share it !").via("Prokhor").suggestions(false).render()

2. Follow Button

Requirements: Widgets.scripts().twitter() JavaScript bundle

Code:

Widgets.twitter().followButton().account("prokhor_ozornin").render()

Widgets.twitter().followButton().account("prokhor_ozornin").suggestions(true).counter(false).screenName(false).render()

Vimeo

1. Embedded video

Requirements: None

Code:

Widgets.vimeo().video().id("55456906").width("640").height("480").render()

Vkontakte

1. Embedded video

Requirements: None

Code:

Widgets.vkontakte().video().id("167533148").hash("7a0cdf6ef7a69e67").user("5707198").width("607").height("360").hd(true).render()

2. JS API initialization

Requirements: Widgets.scripts().vkontakte() JavaScript bundle (head section).

Code:

Widgets.vkontakte().initialize().apiId("3816272").render()

3. OAuth Button

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().authButton().standard("http://yandex.ru").render()

Widgets.vkontakte().authButton().dynamic("onAuth").width(640).render()

4. Comments

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().comments().render()

Widgets.vkontakte().comments().attach(Widgets.Vkontakte().CommentsAttach.ALL).limit(Widgets.Vkontakte().CommentsLimit.LIMIT_15).autoPublish(true).autoUpdate(true).mini(true).render()

5. Community

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().community().account("44545550").render()

Widgets.vkontakte().community().account("44545550").mode(Widgets.Vkontakte().CommunityMode.NEWS).height(400).width(600).backgroundColor("AABBCC").textColor("FF0000").buttonColor("00FF00").render()

6. Like Button

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().likeButton().render()

7. Poll

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().poll().id("6564504_c2a6ccb7df15aff473").render()

Widgets.vkontakte().poll().id("6564504_c2a6ccb7df15aff473").width(640).render()

8. Wall Post

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().post().id(45616).owner(1).hash("Yss6aNhrrQhOL5FfXZeuga8yKA").render()

Widgets.vkontakte().post().id(45616).owner(1).hash("Yss6aNhrrQhOL5FfXZeuga8yKA").width(640).render()

9. Recommendations Feed

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().recommendations().render()

Widgets.vkontakte().recommendations().limit(Widgets.Vkontakte().RecommendationsLimit.TEN).max(50).period(Widgets.Vkontakte().RecommendationsPeriod.MONTH).sorting(Widgets.Vkontakte().RecommendationsSorting.LIKES).verb(Widgets.Vkontakte().RecommendationsVerb.LIKE).target("_blank").render()

10. Subscription

Requirements: Call to Widgets.vkontakte().initialize()

Code:

Widgets.vkontakte().subscription().account("5707198").render()

Widgets.vkontakte().subscription().account("5707198").onlyButton(true).render()

Yandex

1. Metrika

Requirements: None

Code:

Widgets.yandex().analytics().account("12066574").render()

2. Like Button

Requirements: None

Code:

Widgets.yandex().likeButton().render()

Widgets.yandex().likeButton().title("Yandex Main Page").text("Share").url("http://yandex.ru").size(Widgets.Yandex().LikeButtonSize.SMALL).render()

3. Embedded video

Requirements: None

Code:

Widgets.yandex().video().id("6ea0ugstkx.2528").user("leonevskiy").width("450").height("253").render()

4. Yandex.Money payment button

Requirements: None

Code:

Widgets.yandex().moneyButton().account("41001577953208").sum(15.5).description("Test Payment").render()

Widgets.yandex().moneyButton().account("41001577953208").sum(15.5).description("Test Payment").type(Widgets.Yandex().MoneyButtonType.CARD).text(Widgets.Yandex().MoneyButtonText.BUY).size(Widgets.Yandex().MoneyButtonSize.MEDIUM).color(Widgets.Yandex().MoneyButtonColor.WHITE).askPayerAddress(true).askPayerEmail(true).askPayerFullName(true).askPayerPhone(true).render()

5. Yandex.Money donation form

Requirements: None

Code:

Widgets.yandex().moneyDonateForm().account("41001577953208").descriptionText("Test Donation").render()

Widgets.yandex().moneyDonateForm().account("41001577953208").descriptionText("Test Donation").description().sum(15.5).cards(true).projectName("Yandex").projectSite("http://yandex.ru").text(Widgets.Yandex().MoneyDonateFormText.GIVE).askPayerPhone(true).askPayerFullName(true).askPayerComment(true).askPayerEmail(true).render()

6. Yandex.Money payment form

Requirements: None

Code:

Widgets.yandex().moneyPaymentForm().account("41001577953208").description("Test Payment").render()

Widgets.yandex().moneyPaymentForm().account("41001577953208").description("Test Payment").sum(15.5).cards(false).text(Widgets.Yandex().MoneyPaymentFormText.TRANSFER).askPayerComment(true).askPayerEmail(true).askPayerFullName(true).askPayerAddress(true).askPayerPhone(true).askPayerPurpose(true).render()

7. Share Button

Requirements: Widgets.scripts().yandex() JavaScript bundle

Code:

Widgets.yandex().sharePanel().render()

Widgets.yandex().sharePanel().services(["facebook"]).language("en").render()

YouTube

1. Embedded video

Requirements: None

Code:

Widgets.youtube().video().id("eYJSlHiXegI").width("100%").height("480").render()

VideoJS

1. Media Player

Requirements:

Widgets.scripts().videojs() JavaScript bundle
Widgets.styles().videojs() CSS bundle (head section)

Code:

Widgets.videojs().player().width("640").height("480").videos({"http://vjs.zencdn.net/v/oceans.mp4" : Widgets.VideoContentTypes.MP4, "http://vjs.zencdn.net/v/oceans.webm" : Widgets.VideoContentTypes.WEBM}).extra('<track kind="captions" src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English"/>').render()