Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Widgets’ Category

While developers may love diving under the hood, those are usually marketing people who end up using content management systems and paying money for web design agencies. And so great content management systems must be built with the actual content managers in mind first. One of such systems is ImpressPages.

Read the rest of this entry »

SoundCloud is an awesome application with a huge music library and it has multiple ways for integrating any selected tracks to websites.

Stratus, a free-to-use and jQuery-powered widget, offers an alternative and tight integration with a player that can sit in the bottom or top of web pages.

The widget accepts any number of tracks, sets, users or groups to play, can be set to auto-play and has an optional animation on initial load.

Stratus SoundCloud Player

There are controls for volume, sharing, commenting/favoriting and a pop-up player link exists so that users changing pages won’t lose the tracks.

Besides mentioning the tracks/sets as a list, adding a custom class to any SoundCloud link also works (handy for websites with lots of SoundCloud links) and the player can be skinned with CSS.

Most of the websites include social networking widgets like Facebook “Like” or Twitter’s “tweet” buttons that ease sharing of the content.

The major drawback with the widgets is the performance loss due to the multiple requests made and files loaded.

SocialCount, a jQuery plugin, with only ~3kb in size (minified-gzipped) and provides a much lighter solution for them.

SocialCount jQuery Plugin

It has support for Facebook, Twitter and Google+, doesn’t auto-load the widgets and only loads them when user hovers the related widget which ends up in lots of performance and speed gain.

In total, the plugin makes 1 JS request, 1 CSS request, 1 optional request for icons and 1 optional AJAX request for counts (compared to 25 total requests for Facebook, Twitter, and Google Plus widgets)

SocialCount works with mouse, touchscreen or keyboard and comes in multiple sizes.

Literally Canvas is an open source HTML5 widget, which can be integrated into any page, for enabling users to draw online.

It comes with a simple set of tools including draw, erase, color-picker, undo, redo, pan and zoom.

Literally Canvas

The widget is built with jQuery + Underscore.js and has an API to define the background color, tools and dimensions.

Also, an export function exists for easily pulling the drawn canvas as an image file.

shareNice is an open source social sharing widget -similar to AddThis or ShareThis- for adding sharing features to any website easily.

It focuses on the privacy of users, doesn't place any cookies or share any information with 3rd party services.

There is built-in support for most of the popular social websites (Twitter, Facebook, Delicious, etc.) and, considering the source is available, new ones can be added (or removed).

shareNice

It is possible to customize the services to be displayed, color-scheme, icon sizes and the label ("share" by default).

P.S. shareNice is also available as a free-to-use service.

Sharrre is a jQuery plugin that eases creating social sharing widgets for Facebook,Twitter, Google Plus, Digg and Delicious.

The plugin calls the social buttons on demand which is great for minimizing the number of initial requests and improving loading speeds.

Sharrre jQuery Plugin

Any type of custom designs can be created for the widgets (no need to use the default buttons provided by the social networks) and events(like, +1, tweet, etc.) can be fired up with the plugin's API calls.

P.S. Google Plus widget requires PHP to work (the PHP file is already included in the package).

A website toolbar is something that can beautify or uglify web pages depending on the solution used and how it is configured.

Skysa LogoIn order to improve the visibility of several things on WRD, last month, I have integrated, Skysa, a free-to-use (with paid plans) toolbar that can sit either in the header or footer of websites (check the footer>left of this page) and provides many features in a tiny space.

Skysa is loaded with many applications for social buttons, translating pages, content aggregating, announcements, polls, chat, games and more.

As the toolbar is highly-customizable, I have placed social buttons with the order I preferred, so readers would easily tweet, like or +1 WRD (and, it worked as expected, the amount of such social activities were much higher than the previous months).

Skysa Who is Online Map

And, with a minimalistic approach, only activated the social widgets, translate, "who is on" and scroll-to-top apps. Simply, the ones that will ease the way readers browse and use WRD.

The translate app is great, it remembers the choice of the reader and auto-translates any other pages that readers would visit. So as the "who is online". Besides an "online readers count", it displays them on a world map.

It is possible to track the usage on each application, how many times they are clicked, etc. and, from the statistics, I can easily tell that "they were actively used".

Skysa Stats

Skysa has an application gallery where you can browse, choose and activate quickly. Every app has its own customization options.

If you have a membership-based website, the app can integrate into that as well and use the profile info (name, photo, etc.) when needed.

For paid plans, it enables you to create custom applications, manage multiple toolbars and place ads inside it.

Also, worth mentioning, the color of everything inside the toolbar can be completely customized so that it will fit perfectly into any website.

Conclusion

The most exciting thing about a toolbar is its ability to "always staying inside the viewport". During this 1 month, Skysa proved me that it can help me use that space efficiently and it is a stable platform.

There is definitely a lot of room for improvement, new apps, more positioning options, etc. but Skysa is very solid at what it does. No problems faced during that month.

I can keep using the toolbar or not, but, if you in search of such a solution, I definitely suggest giving the application a try.

jQuery has lots of plugins and jQuery UI to improve its functionality in many ways.

Ninja UI is a plugin for the framework that brings new alternatives to them in a single package.

It includes widgets like buttons, accordion, icons, tooltips/modal box, slider, rating, tabs, auto-suggest and canvas-powered loader icon.

Ninja UI

They are unobtrusive and the icons used actually come as a separate plugin that is in the form of web fonts.

P.S. Its documentation is not complete yet but the source of the examples are pretty self-explanatory.

jTweetsAnywhere is a jQuery Twitter widget for easily integrating tweets into any website.

It supports Twitter's @Anywhere features and can display:

  • tweets from one or more user's feeds
  • tweets from a user's list
  • results of a Twitter search

jTweetsAnywhere

The widget automatically detects URLs, #hashtags, @usernames and link them accordingly (shows Hovercards when hovering @username or profile images).

It also adds a tweetbox to your website where users can tweet instantly and adds a "connect with Twitter" button so visitors can follow you without leaving the website.

jTweetsAnywhere comes with many options for a maximum customization and lets you to enable/disable the tweetbox + follow buttons, set the number of tweets to be displayed and more.

jQuery-Accessible-RIA is a set of accessible, usable & easy to implement widgets that are strictly WAI WCAG 2.0 and WAI ARIA compliant.

The widgets provided are:

  • lightbox
  • live form validation
  • tabs
  • sortable tables

jQuery Accessible RIA

jQuery-Accessible-RIA is built using the jQuery UI & works out-of-the-box. Also, they can be highly customized.

For older screen readers, it includes a workaround & for anyone willing to dive into the code, it is fully-commented.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com