How to add a cool 3D media wall to your site - no coding required

In this article I will show you how to add a web widget to your website or blog for displaying a wall of photos or videos.  This is using a widget from deepwidget.com, which is based on something called the Cooliris Wall from Cooliris. The Cooliris Wall is one of the most polished tool for displaying a large number of photos or videos. It is particularly suited for displaying a large number of media, since such media are laid out on a wall of infinite width, and you can 'fly' around over the wall very easily.

This widget has the following features:

• It displays a collection of photos or videos from a selected source. Currently the supported content sources include Flickr, Picasa, Youtube, Facebook and midea RSS. You can configure what to include at the Cooliris Express site. You can also opt to upload your own media assets to one of the supported sites above, so that you are able to select them for inclusion..
• As with other widget from deepwidget.com, adding this widget to your site does not require any coding skills. If you already have a collection of photos or videos on Flickr or Picasa, you can put this up on your site in a matter minutes.
• This is one of the tabbed widgets from deepwidget.com, which means that you can use it along with other tabbed widgets to create an entire row of tabs on your site to do all kinds of things for you. These tabbed widget does not require you to alter the layout of your current page, so they are very easy to put up.

For a live demonstration of this widget, just click on the tab at the right side of this page to see it in action.

Getting Started

You can skip this section if you are already a registered user of deepwidget.com. Otherwise you will need to register with deepwidget.com in order to add this widget to your site. This is free and can be completed in a minute or two.

You will also need to do an one-time setup of your site. After this one-time setup you will then be able to add not only this widget, but also many other widgets through the deepWidget Sandbox. The deepWidget Sandbox is an easy-to-use WYSIWYG environment for managing the widgets on your page. Here is an article that shows you how to complete this one-time setup, along with instructions on how to use the deepWidget Sandbox.

Preparing Your Assets

You will need to create a 'feed' out of the photos or videos that you want to show in this widgets. Follow the steps at the Cooliris Express site to configure the content source, and modify its layout, theme, control features, etc. Once you are done, copy down the 'embed code' and save it for the next step.

Adding the Widget to Your Site

Adding the widget is very easy to do, and generally takes only a couple of clicks through the Sandbox.  Here is what you need to do:

• Sign onto the deepWidget Sandbox at http://deepwidget.com/sandbox. This displays the Sandbox in your browser.
• Click on the 'Add' button at left to display the widget gallery.
• Select the 'Cooliris Media Wall' widget from the gallery.
• From under the 'Add' button find the icon for this widget, and click the 'edit' icon there. A widget editor will be displayed.
• Enter the the embed code you got in the last section into the field 'embed code'
• Adjust other parameters in the widget editor to change the look and behavior of the widget to suit your needs.
• Click on the 'Save & Close' button to save your changes.
• If you like what you are seeing and ready to go live with it, just click on the 'Publish' button and then confirm your action. 

And there you now have a very cool media wall right on your live website or blog!  Note that this Cooliris Wall does allow you to maximize it to full screen size. If there are any photos or videos that you want to add or delete from your feed, don't forget that you will need to do it through the Cooliris site mentioned earlier. It is also worth noting that since this is based on the free version of the Cooliris Wall, it is possible that some ads may show up on the Wall without notice. You should contact support@smesh.net for a paid version if you really need it to be ad-free.

Related Links

1. The Cooliris Express site
2. A tutorial on how to do the one-time setup and use the deepWidget Sandbox
3. The deepWidget website
4. Other tabbed widgets from deepwidget.com
5. Other video widgets from deepwidget.com

How to add an online survey with QR Code to your website or blog

An online survey is a very useful tool for collecting information from your target audience. You can use it to find out how your customers feel about a particular topic, and then adjust your services accordingly. Here I will show you how to add an online survey form on your website or blog using a widget from deepWidget.com. You don't need any coding skill and it takes only minutes to do this.

If you want to know how this widget looks like without reading this entire article, just click on the 'Survey' tab on the right side of this blog and you will see a live survey form sliding out into view.

This widget is based on Google Forms, which allows you to create a survey containing a series of question of various types, such as text, multiple choices, yes-no question, scale, etc. If you have some HTML knowledge you definitely can incorporate such a form directly into your website or blog without using the widget mentioned here. However, if you take the approach here then you will also get the following benefits:

• The Google Form instance that you created is wrapped in a floating panel that can be docked to one side of the page as a non-intrusive tab. Aside from the cool animation effects that come with it, this also allows you to add the survey form without having to alter the layout of your current page.
• You also get a QR Code for this survey form, so that you can do things such as posting a printed copy of this QR Code in your brick-and-mortar store, and your customers will then be able to fill the survey form on the phone right there and then by simply taking a picture of the QR Code with their smart phone .
• You can configure this survey to be displayed as soon as the page is opened. This is useful when you really really want your users to take the survey (but at the risk of annoying your users).
• You don't need any coding skill to in order to use this widget, just like other widgets from deepwidget.com.

 
Do the One-time Setup

You can skip this section if you are already a registered user of deepwidget.com and have already completed the one-time setup for your website or blog.

Otherwise you will need to do an one-time setup of your target webpage or blog following the 'Do the one-time setup' section in this tutorial. This will allow you to add all kinds of widgets (not just the one mentioned in this post) to your website or blog from inside the deepWidget Sandbox in a WYSIWYG manner with just a couple of clicks.

Create the Survey Form

Here is an excellent tutorial on how to create a survey using Google Forms. After you have created your survey, do the following:

• With the form opened inside Google Docs, click on 'Form' in the menu bar.
• Click on 'Go to live form'
• Copy the URL displayed there for use in the next section.

Add the Survey Form to Your Website or Blog

In order to add the survey form that you just created to your website or blog, you will need to use the deepWidget Sandbox for this. If you are not familiar with the deepWidget Sandbox you can find a tutorial here.

Do the following from the Sandbox:

• Navigate to your website or blog by entering its URL to the text box on top. Your website or blog will then get displayed inside the Sandbox.
• Click on the 'Add' button on the left side. A gallery containing many widgets will be displayed.
• Select the 'Survey with QR Code' widget from the gallery. As a result you will find a 'Survey' tab showing up on the right side of your page. If you click on this tab you will find a survey form sliding into view containing a sample survey in it.
• Click on 'edit' icon right under the 'Survey with QR Code' icon at the left side to bring up a widget editor.
• Enter the survey form URL you got in the last section into the field 'Go to live from' URL from Google Forms in the widget editor.
• Adjust other parameters in the widget editor to suit your needs.
• Click on the 'Survey' tab now to see your very own survey and make sure that everything looks good to you.
• Click on the 'Publish' button on top and confirm your action when prompted.

And there you have it! If you visit your live website or blog right now, you will then see the survey form right there. To find out how the survey turns out, just log onto your Google Docs account and open your survey form there, and you will find the survey result collected there neatly in a spreadsheet. From there you can then do the typical spreadsheet tricks to analyze the result, creating charts, etc.

Using the QR Code

In case that you are not familiar with QR Code, it is a kind of advanced bar code that when scanned with your smart phone you can make things happen on your phone, such as making a phone call, navigate to a certain website, etc.

Clicking on the 'QR Code' link at the header bar of this widget will bring out a display of the QR Code that links to the survey form. But why would you need a QR Code linking to the survey form when you already have it right in front of you? In fact you don't. This QR Code is intended to be posted somewhere else, so a good practice here is to print out this QR Code along with some simple instruction (e.g., "Take our survey here with your smart phone and win free dinner!") and put it up somewhere where your target customers will see it (e.g., inside the premise of a store, on a physical bulletin board, etc.). This way you can also get some mobile users to take the same survey.

Other Usages

What's described above is useful for many purposes beyond just doing surveys. Here are some ideas:

• Collect a list of subscriptions to your periodic publication, such as a newsletter, etc.
• Conduct a simple poll and optionally showing the result to your site visitors.
  
• Use it as a virtual sign-up sheet of some sort.
• Use it as a feedback form to collect your customer's input regarding your services.
• Use it for your site visitors to leave a message for you.
• Use it as a quiz.
  

You should be aware that there is no way to control who is allowed to enter information into this survey form, no way to limit how many times they can enter information, and no way to authenticate who a user really is. As such you should be using this for non-critical purposes only.

How to add a floating video player to your website or blog

In this article I will show you how to add a video player to your website or blog using a widget from deepwidget.com. This is useful for playing a single on-demand or live video at user's command, or for showing a 'splash' video that is played automatically as soon as the page is opened.

You can get a taste of how it works by simply clicking on the red tab on the right side of this article to see a video playing. Note that this widget stays at a fixed location and appears to float over the content of the page, so there is no need for you to change your page layout in order to fit it onto the page.

As with all the other widgets from deepwidget.com, once you have done the one-time setup you can add such a video widget, or any other widgets from deepwidget.com, without having to deal with any HTML/Javascript code.  If you are not yet familiar with deepWidget's Sandbox (a what-you-see-is-what-you-get environment where you can try out the widget right on your page), you can find more about it here. If you are a first-time user, you can trying things out in the Sandbox without doing the one-time setup of your page.

Adding the Video Player to Your Page

The widget that we are going to use here is 'Youtube Video with Lightbox Effect.' From inside the Sandbox click on the 'Add' button at left to bring out the list of all available widgets, and select 'Youtube Video with Lightbox Effect'. This will add a red tab labeled as 'Video' on the right side of your page. If you click on the tab you will find a video player sliding out to the center of the page, and begin to play a default tutorial video. This video player will be minimized automatically into a tab when the video is finished.

Customizing the Video Player

You can change the look and behavior of this video player in several ways. In order to start changing the video, find this widget in the left panel of the Sandbox (which displays all of the widgets that you have added onto your page), and click on the 'edit' icon there to bring a widget editor.

• Changing the video. Since this video player is from Youtube, in order to change it to play a different video you will need to get the ID for your video. This ID is an 11-letter sequence (the part highlighted in yellow below) in your Youtube video URL, such as any of the following:
  
       http://www.youtube.com/watch?v=1ANFbUXFoLE
       http://youtu.be/1ANFbUXFoLE
  
  Enter this ID into the field 'The 11-letter Youtube video ID' in the widget editor.

• Changing look and behavior. Since this is one of many 'tabbed' widgets from deepWidget.com, it can be configured to work with other such widgets to create a row of tabs. You can choose to move the tab to the left side of the page, choose whether you want the 'lightbox effect' which dims the page when the video player comes out, or move the tab up and down so that it will be at a place that you want.

• Configure the video to play on page load. For this just change the parameter 'Play the video as soon as the page is loaded' to 'Yes.' The video player will be minimized automatically into a tab when the video is done playing.

Since this widget is based on the Youtube's video player, you will get everything that come with it. This means that if Youtube chooses to insert an ad into your video, then you will see the ad here to. And of course if you want to use a new video, then you will need to upload it to Youtube first.

How to add social networking features to YOUR website or blog

If you believe that social networking will play an important role with your presence on the web, whether it is for personal or business purposes, I am sure that by now you already have accounts with various social networking sites such as Facebook, Twitter, etc.

While these social networking sites are great, there are times when you would rather that these social networking features are available right on YOUR own website or blog (assuming that you have one). This is for a good reason, since normally you want your visitors go to your principal website or blog, so that you have more control about how to communicate with them there.

Most social networking sites understood this need in the marketplace, so they usually do offer many web widgets that allow you to add various social networking features to your website easily. These are of the first-generation web widgets, where to use them you just need to get the code from them, and insert it into your website.

The website deepwigdet.com offers a number of 'deepWidgets' that wrap around those widgets from social networking sites to make them nicer to use and easier to manage. Compared to adding such social networking widget codes to your website on your own, you get the following benefits:

• As with all the widgets from deepwidget.com, you get to add, remove, and configure them through an easy-to-use web-based administration portal (i.e., the deepWidget Sandbox), so that you don't have to worry about having to constantly dealing with inserting the widget code into your webpage or blog.
• Such widgets are encased in a floating panel, so that you don't have to worry about how you should alter your page layout in order to accommodate them.
• Some of them come with some usability enhancements to give your visitors a better usage experience. For example, the floating panel can be minimized to become a tab on the side of the page, various animation effects are available, and there is an optional lightbox effect (which dims your page) to focus your visitor's attention on the panel that slides out.
• You can combine such widgets with other tabbed widgets from deepwidget.com to create a group of tabs that sit on the side of your webpage. This practically adds an entirely new layer of functionality over your original webpage! And of course you can rearrange, add, remove such tabs without touching your original webpage code.
• You can add sophisticated 'mashup' functionality (upcoming) in a matter of minutes. For example, you can specify that a tab is to become visible only when certain part of your page becomes visible. More on this later in another post, but you can get a sense of this by simply looking at this very post, where you will find a couple of widgets become visible only when you have scrolled the bottom part of this post into view.

On the right side of this post are a number of deepWidgets that offer Facebook features. Just click on them to try it out! You can have the same thing, with your customizations, through the deepWidget Sandbox.

If you are not familiar with deepWidget here are links to additional information:

• The deepWidget website: http://deepwidget.com
• A tutorial for the deepWidget Sandbox: http://kaihuchen.blogspot.com/2011/07/deepwidget-sandbox-tutorial.html
• An introduction to web widgets: http://kaihuchen.blogspot.com/2011/07/introduction-to-web-widgets.html
• Some social networking widgets offered by deepWidget: http://deepwidget.com/widgets/all/1/10060/0/0 .

Turbocharge your blog without coding - introduction

Blogging is a great way to get an instant presence on the web. You can get it going in a matter of minutes and begin to blog away, and hopefully in no time you will get a community of readers to follow you. Nowadays many small businesses may even choose to use a blog or Facebook pages as their 'main site,' and save the cost and headache that come with building and maintaining a website.

However, if you have been a regular blogger it is likely that you have had one of those 'how do I do this or that' moments with your blogging site. It is possible that you are hitting the limits of your blogging site. Or more often it is because you don't have the coding knowledge needed in order to achieve you want to do. If you are considering using a blog site as the main site for your business, then you definitely should be aware of such disadvantages.

In this post I will show you how you can add all kinds of useful enhancements to your blog, even if you know nothing about coding. This is based on the free services from deepwidget.com, and if you are patient with me you will be rewarded with a very high quality announcement ad on your blog in a couple of minutes! This is meant to demonstrate to you that while using a blog is convenient with many limitations, but by adding deepWidget into the mix then you will find yourself be able to do much much more with a blog.

In this tutorial I am using blogspot.com (where this blog is hosted) as an example. You should be able to do the same with other blog sites, so long as they allow you to add Javascript to your blog.

In case you are wondering if this is one of those web widgets that you find all over the Internet, then the short answer is 'no,' it is something much more advanced and much easier to use. If you want the long answer you can find it here.

First, Do The One-time Setup

First you must do an one-time setup of your blog template, using one line of setup code that you get from deepwidget.com. This is the magic code that makes it extremely easy to add widgets onto your blog in just a couple of mouse clicks. You can find out how to get the setup code using the instructions here. Once you get the code, follow the steps below to insert it into your blog

1. Log onto your blogspot.com account. For my own blog it is http://kaihuchen.blogspot.com/
2. Click on 'Design'
3. Click on 'Edit HTML'
4. Find the 'Edit Template' area and insert the code you got from deepWidget.com to the end of the HTML code, just before the closing HTML tag. The last part of your template code should looking something similar to the following:
   
   <script src='http://cdnsysfiles.smesh.net/javascripts/dwms.js'/> <script type='text/javascript'/> __dwms('xxxxxx/wp_xxxx') </script/>
   </html/>
   
   Your code should look a little different from the example given above with the 'xxxxx' being some numbers specifically generated for you.
5. Click on the 'SAVE TEMPLATE' button

And you are already done with the hard part! From this point on you can add, remove, or configure all kinds of widgets onto your blog in a WYSIWYG (what-you-see-is-what-you-get, i.e., no need to see or handle the code) manner, so it is all very easy.

Now The Fun Part

Next as a demonstration I will show you how to add a component (called 'widget') to your blog. For this you need to sign onto the deepWidget Sandbox, which is a web-based administration portal, and that's where you manage the widgets on your blog in an easy-to-use environment. If you are not familiar with the deepWidget Sandbox, please read the illustrated instruction here. Here I am just going to show you a simple example to give you a taste of how it works.

1. Go to http://deepwidget.com, sign on, and go into the 'deepWidget Sandbox'.
2. Enter the URL of your blog (the same one you used earlier when getting the setup code) into the Sandbox. You should see your blog displayed inside the Sandbox.
3. Click on the 'Add' button (on the left panel, near the icon of this widget) to display the widget gallery, then select the 'Business/professional Poster' widget. You should see this widget displayed in the Sandbox immediately.
4. Click on the 'Publish' button and confirm your action, and this widget is now live on your blog! See the lower-right corner of this blog for an example of such a widget.

If you open up your blog in another browser window now, you will see this widget already there. This widget will stay at the lower-right corner of your blog regardless of how your scroll the page. So there you now have a powerful way to announce something important (upcoming events, sales, important notice, etc.) on your blog, and keep it there at all times. This is something you cannot do previously unless you are a very good coder!

And of course you can go ahead to click on the 'edit' button to configure this widget with a different background image, a different 'decal' (i.e., the image at the lower-left corner of this widget), and also change the text to something that suits your need. You should be able to complete all these in just a couple of minutes, and then by simply clicking on the 'Publish' button again your blog instantly has the updated widget up there. No code, no mess.

From the Sandbox, you can go ahead to add other widgets onto your blog to try them out. I am sure you will be amazed at how easy it is to add all those cool-looking and useful widgets to your blog.

So here you have learned the basics about how to add widgets to your blog. The same procedure (except for the part about the one-time setup) also work for your website.

Advance Techniques

Since the postings on you blog are usually moved to secondary blog pages or to an archive after a while, you may find that sometimes it is desirable to keep a given widget in sync with a certain post. For example, if you have a post about a certain restaurant with a slideshow widget displaying the photos of dishes from the restaurant, then you certainly want this slideshow widget to stay with the post no matter where the post is moved to by the system. This way the slideshow also won't be present at all times displaying on top of other unrelated posts. This is certainly possible with deepWidget. The live 'Poster' widget that you are seeing here is in fact tied to this very post that you are reading right now, so you will find it disappears from the screen if you proceed to read other posts. I will talk more about how to do this later in a separate tutorial.