Saturday, July 23, 2011

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:



Thursday, July 21, 2011

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.

Tuesday, July 19, 2011

deepWidget Sandbox Tutorial

The website http://deepwidget.com offers an online service that allows you to add all kinds of cool widgets (e.g., slideshow, announcements, etc.) onto you website, blog, or Facebook page. It is an entirely new technology where it makes it appears as if you are placing such widgets directly onto your page. And aside from the one-time setup (which average non-technical user should be able to muddle through) you don't need to have HTML knowledge in order to use it.

If you want to know how deepWidget differs from all of the web widgets out there, you can find more about it in this post.

If you just want to get some really quick idea about how this whole thing works, you can watch this tutorial video right here at the bottom of this screen. Note that this video is displayed using a video widget that you could easily add to your own site as well. Note also that the video bar has this cool feature where it disappears as soon as you scroll this paragraph of text out of view. This is something that you can easily add to your blog or website as well, but that's for another post later.

In this post I will show you how to use the deepWidget Sandbox to add all kinds of cool components to your website in a matter of minutes. While this post may seems a little long, believe that it is actually fairly easy.

The deepWidget Sandbox is the web-based administration portal through which you can manage the widgets on your website, blog, or Facebook pages. Why do we need such a portal? Well, this is because it is the key to make it really easy to add cool components to your site, even if you are not technical by any stretch of imagination. In addition, this portal also makes it possible to support an entirely new type of widget called the 'mashup widget' that allows 'deep integration' with the content of your webpage. Don't worry if you have no clue what this means. I will have a post on this topic shortly. Meanwhile just take it to mean that there is a new type of web widgets with amazing functions coming your way soon.

There is nothing that you need to install in order to use the Sandbox. The Sandbox is known to work with Firefox 3.5+, Chrome 7+, and Internet Explorer 9+, so you will need one of these in order to use the Sandbox. Unfortunately the Sandbox does not work with Internet Explorer 7 or 8. While this means that you cannot use IE 7/8 to manage your widgets through the Sandbox, the widgets added to your website nonetheless will work just fine even on IE 7/8.


Registration

You will need to register yourself first in order to gain access to the Sandbox. There is no charge for registration, and you won't be asked your credit card number. You will get an email after registration, and you will need to click on the link inside the email in order to complete your registration.

Alternatively you can also access the Sandbox without registration simply by using your Facebook or Twitter account. This is not yet there as of the writing of this post, but it should become available very shortly.

Note that it is important that you always use the same way to access the Sandbox. If you sign on first using your Facebook account, and later sign on use your Twitter account, then you will end up with two entirely separate accounts with no way to share anything between the two. The same also applies if you have, say, multiple Facebook accounts.


Navigate to your website

Once you have signed on you will find yourself inside the deepWidget Dashboard. This is where you get to manage the list of your webpages that you have entered before. At this point this list is of course empty. Simply enter the URL of your target webpage into the text box at the top, and you will then be taken to the deepWidget Sandbox.  There where you can begin putting the widgets that you want onto your webpage.

If for any reason you can't or don't want to enter the URL of your target webpage, you may instead enter an arbitrary text label into the text box. In this case you will then see a 'test page' inside the Sandbox for you to play with the widgets.


Adding Widgets to Your Website

The Sandbox allows you to see a realistic copy of your webpage inside it, so that you can experiment with putting all kinds of widgets on it, adjust the widget's parameters, and preview the result to see if it is to your liking.

There is a possibility that for some reasons your webpage may not get displayed properly inside the Sandbox, and when this is detected a separate 'test page' will be displayed in its place. You can go ahead and put widgets onto this 'test page', and when 'published' (see below) the widgets will appear properly on your actual webpage.

The deepWidget technology is designed to work with any existing webpage, regardless of how it was created originally. Note however that there are some special cases where the widgets may not work properly on your webpage. This is more likely if your webpage is one of the following type:
  1. It is heavily protected and the Sandbox is unable to access the page
  2. It's page structure changes dynamically in complex manner
  3. It is improperly coded and contains non-standard or erroneous syntax
  4. It contains certain page components that are coded to be 'exclusive,' such as one that is coded to be always on top of all other elements on the page, thus covering up widgets added to the page.
Luckily unlike the cases above, most webpages are fairly simple so there is a good chance that your page will show up in the Sandbox without problem. If you run into such problems please report it to support@smesh.net, and we will do our best to find ways to resolve it.


Do the one-time setup

You can skip this step if you just want to try things out. If you skip the setup you won't be able to publish the widgets to your live site for real, but you still can experiment with the widgets in the Sandbox to see whether they work the way you wanted.

The setup involves inserting one line of code into your target page. It is an 'one-time setup' because once you have completed the setup you can put all kinds of widgets on your page, remove them, or change them at will without having the do the setup again. This is something that is totally unique.

To get the setup code:
  1. Navigate to your target page in the Sandbox as described earlier.
  2. Click the 'Get Code' button and copy the code to your clipboard.
  3. Insert the code at the end of your target webpage, just before the closing 'body' tag
  4. Deploy the updated version of your webpage to your web server.
The steps above may look a little scary if you are not technical, but fortunately once you are through it, you don't need to do it ever again (which is unlike the current web widget technology out there).

You can put the same setup code on multiple pages. If you do so then all these pages will be sharing the same set of widgets. This means that you update a widget on page A in the Sandbox, then you will find this change also get reflected on page B that has the same code installed. If you have two pages that are meant to have different widgets on them, then you should do this setup for these two pages with different setup code.


Adding a widget

Follow the simple steps below to add a new widget onto your target page displayed in the Sandbox:
  1.  Click on the 'Add' button in the left panel. A gallery of widgets will display.
  2. Click on the widget that you want to add.
At this point you should see the widget you selected appearing over your webpage. Note that what you are seeing is a fairly faithful rendition of how it is going to turn out on your live site, include animation, etc. You can repeat the steps above as often as you want to add many widgets onto your webpage. Just beware that in many cases adding the same widget twice does not make practical sense, and sometime two different widgets might occupy the same space so you should add only one of each type.


Updating a widget

When a widget is added initially to your webpage, it will assume some default look and feel. In most cases you do want to change some of its parameters in order to make it fit your needs. To do so:
  1. Find the widget that you want to change in the left panel.
  2. Click on the 'edit' icon there to bring up a widget editor. This editor displays all the parameters (color, text, link, image, etc.) that you are allowed to change.
  3. Adjust the parameters as you see fit. Note that if a parameter is of the image URL type, then you may either upload your image to your deepWidget account (limitations apply as per you account), or if the image is located somewhere else on the Internet then you may simply enter the full URL for the image. You should be able to see your changes take effect immediately in the Sandbox.
  4. Click on the "Save and Close" button at the top of the editor to save your changes. Note that if you neglected to click on this button and simply dismiss the editor, then the change you just made will not be persisted.


Publishing your changes

Let's say you have added widgets onto your page and configure them to your liking. At this point whatever changes that you have made in the Sandbox are not yet reflected on your live website. To make your changes 'go live' you will need to publish them from the Sandbox. To do so simply click on the 'Publish' button on top, and as soon as you confirmed the action the changes will take effect on your live site. You don't need to do any code copying like the current widget technology.


Deleting a widget

You can remove a widget previously added onto your webpage permanently simply by clicking on the 'delete' button (i.e., the trashcan icon) under a widget listed in the left panel. Note that you will then need to click on the 'Publish' button in order to get the deletion reflected on your live site.


Showing/Hiding a widget

Sometimes you may want to make a widget disappear from your live site, but still keeping it around in the Sandbox so that you can do something about it later (such as making it show up at a later time). You can achieve these using the 'show' or 'hide' buttons in the left panel.

To hide a widget on the live site:
  1. Click on the 'hide' button for the widget to make it disappear from the Sandbox, and its corresponding control on the left panel will appear dimmed.
  2. Click on the 'Publish' button to make the change take effect on your live site.
To show a previously hidden widget:
  1. Click on the 'show' button for the widget will make it re-appear in the Sandbox, and its corresponding control on the left panel will change from dimmed to normal.
  2. Click on the 'Publish' button to make the change take effect on your live site.


Refreshing a widget

Sometimes you may want to refresh a widget in the Sandbox. You may need this if you want to get the latest saved version of the widget to display in the Sandbox, or when the widget has disappeared by design (e.g., for the Splash widget which disappears automatically after a set time period).

To refresh a widget simple click on the 'refresh' button for the given widget in the left panel.

So there you have it! If you are still interested, then you should check out our gallery of widgets at deepwidget.com, or follow this blog where various widgets will be illustrated in detail from time to time.



Thursday, July 14, 2011

Add Mobile Connection to your website with the QR Code


Have you ever seen something like this weird-looking image (see left) and wonder what it is for? Well, it is a kind of 2D barcode called the QR Code, and by just taking a picture of it using your smart phone you can make things happen on your phone, such as jumping to a website, calling a certain phone number, or sending a text message. It is most commonly used on printed material, such as product tags, posters, business cards, etc. Imagine going to the Home Depot and finding a pot of flower that you like, and then by simply taking a picture of the QR Code printed on the tag you are taken to a website with all the information about this type of flower!

It is also useful on your website or blog, where your users will be able to get your information (e.g., map, direction, phone number, URL to your mobile applications, etc.) onto their smart phone with minimum effort.

How you use the QR Code feature differs from phone to phone, so you may want to consult the manual for your model to figure this out. Following are the steps of what you have to do on a Blackberry Bold 9700:
  1. Press the button with the Blackberry icon on it, which is to the immediate left of the trackpad.
  2. Click on the "Instant Messaging" folder.
  3. Click on the "BlackBerry Messenger" app.
  4. Click on the "Scan a Group Barcode" entry
  5. Aim your Blackberry' camera at the QR Code on the screen, so that it nearly fills the entire view of your camera. Wait a few seconds, and you will be prompted to either navigate to the target website, or call a certain phone number, etc.
On the right side of this page are two tabs that when clicked will display live QR Code widgets created from deepWidget. One of these will take you to a website, and the other will play an audio on your phone. Bring out your smart phone and give it a try now!

These widgets have the following features:
  • Display the QR Code for the target URL or phone number in a floating panel that slides out from one side.
  • The widget is docked to one side and turns into a tab when user closes the widget.
  • The widget supports optional 'lightbox' effect, i.e., the dimming of the screen when the widget is displayed.
  • Option to place the tab either on the right or left side of the screen.
  • Choice of various tab styles.
  • Choice of the tab's vertical location. You can combine several widgets of this type to create a nice group of tabs.
Note that if the URL that you are using for the QR Code is too long, then the resulting QR Code pattern may become too complex for some smart phones to pick it up reliably. In such a case you should use a URL shortening service such as http://goo.gl/ to shorten your URL first, and then enter the shortened version of the URL into the widget.

These are standard 'deepWidgets' that you can use for free. And just like other deepWidgets, adding these to your website or blog takes only a couple of mouse clicks. If you are not familiar with deepWidget you can find more information about it in this post or at the deepWidget website.


Tuesday, July 12, 2011

Introduction to Web Widgets

Web widget is one of the easily ways to add new features to your website. It is worth noting that a ‘web widget’ is meant to be used specifically for enhancing a webpage, and it shouldn’t be confused with other types of software components that are also called 'widgets,' such as those meant to be installed on a PC’s desktop, or user interface code libraries intended for use by software developers, etc.


If you have ever created a YouTube video player on your website, then you already have experience using a typical web widget. In case that you have never done this before, it is achieved with steps like the following (using YouTube as an example):
  1. Go to http://youtube.com and find a video that you like
  2. Clicking on the ‘Share’ button right under the video
  3. Click on the ‘Embed’ button
  4. Copy the code to your clipboard
  5. Find a suitable place in your webpage and insert the code into your webpage
  6. Deploy your webpage to your web server so the change becomes visible to the public
these relatively simple steps you now have a video player on your webpage! Virtually all of the web widgets out there work this this, and there are many types of web widgets for meeting all kinds of purposes. This is suitable for someone with some knowledge with the HTML and is comfortable with tweaking a webpage. This tweaking could be as easy as inserting the code at a suitable place in the webpage's HTML code. The code for a 'floating widget' (which does not alter the layout of your webpage) is typically placed at the end of the 'body' tag. This is so that the widget will have minimum impact on the rendering speed of the webpage. In some cases you may need to change the layout of the webpage in order to open up a space for the widget, and in this case the level of HTML skill needed is much higher. Some widget vendors design their widgets in such a way that you can update certain parameters of the widget through an online editor, so that you don't have to redeploy the code whenever you have updated the widget. But in just about all cases if you decide to add a new widget to the page, you still need to open up the webpage and deal with the HTML code again. Popular websites that offer this type of widgets include Widgetbox, Wibiya, etc.

There is an ongoing trend where more and more widgets are of the 'floating' type, which hovers over your webpage. Such widget's position on the screen appears to be fixed and is not affected by how you scroll the page. This has the advantage where you don't have to worry about changing the layout of your webpage.

While today's widget technology is a major advancement from the old days, it nonetheless has some disadvantages:

  • It is still a little too hard for average people to use, due to the need to constantly inserting the widget code into the target webpage. Such 'average people' include individual website owners, marketing people for large websites, owner of small business websites, etc. Improved ease-of-use of the widget technology will no doubt broaden its appeal greatly.
  • The deployment workflow could be easier. If you have a small website and has the technical knowledge to update the website by yourself, then all is well. Unfortunately many small-medium businesses must rely on someone else to update the website for them, and non-technical people who manage the business side of the website cannot see the outcome until the changes are completed by a web developer. If there is any error, or change of mind (like, errr, I think I want the text color to be red instead), then you have to repeat the whole process. The situation actually gets worse with larges websites, since it usually will involve even more people, including designers, developers, QA, marketing, etc. It is no wonder that even for very large corporations the website is something that you don't want to change unless you really have to. But we are now in an age where website is becoming a vital tool for businesses and individuals, and leaving the website stale is just not acceptable. An improved widget technology that allows marketing people to have direct control of what they need to do will change the landscape greatly.
  • Shallow integration. Virtually all of the current-generation widgets are just something that sit on your webpage, and useful as they are they do not respond to other contents on your website. A widget that supports 'deep integration' with your website is capable of changing it look and behavior based on the contents on your website, and this gives you sophisticated functions not possible with the current-generation widgets.

Next-generation web widget

There is a relatively new type of widget called ‘deepWidget’ which is designed to solve the problems mentioned above. It is based on a Web Layering technology which allows you to add layers of widgets over your existing webpage in a web-based WYSIWYG (what-you-see-if-what-you-get) environment, and as a result you get the following advantages:

  • Greater ease of use. It allows you to use it even if you have no knowledge with HTML. This means that you can update the widgets that you deployed earlier, remove them, or add new ones, all without having to deal with widget code. This makes it accessible to even tech dummies.
  • Instant preview. You get to preview the result in a realistic fashion, which shows you how it looks like with the widget on your target webpage. Amazingly this is not just a static screenshot of how it might look like, but rather it is a functional copy of your webpage plus a fully functional copy of the widget. This means that you can inspect how it is supposed to look or function before it is published, so that there is no guess work. Making your changes go live takes only a couple of mouse clicks.
  • Add 'visual depth’ to your webpage. Many deepWidgets are of the ‘floating’ type, which do not require you to update the layout of your webpage. This may seem like a minor plus, but changing webpage layout is actually very much a hassle since there are many things that can go wrong, and there are also many browser types that you need to check against to ensure that there is no problem. You can think of the deepWidget technology as adding layers of page components to your webpage, and aside from the cool look it also allows you to easily add or remove a layer with minimal interference with your existing page, so the risk of making such changes is low.

  • 'Deep integration' with your website. Widgets with such 'deep integration' capability give you sophisticated functions with little effort. This kind of widget changes it look and behavior in response to the content on your website, and it truly become a part of your website. Why would you need this? Just imagine that you can have a countdown widget that is based on the game schedule listed on YOUR website, or a slideshow/video widget that slides out when user scroll a relevant article on YOUR website into view. Simply put, having 'deep integration' means that you get to add sophisticated functions easily that were previously available only with custom web development projects. More on this topic in another post.
Note that using the deepWidget does require an one-time setup, where you need to acquire a special code from http://deepwidget.com, and insert it into your webpage. This is an improvement over the current widget technology because you do this only once for your target webpage, regardless of what widgets you want to add later, how many widgets you want to add, or even how often you changed you mind and want to alter the parameters of a widget.

To get a quick sense of how this works you can view this short tutorial video. Alternatively you can also view the tutorial video right here at the bottom of this screen. The video widget displayed here is also a demonstration of what you could do with deepWidget. Note that the widget becomes invisible as soon as you scroll this text out of view. Later I will make another post showing you how you can do something like this in your own blog or website.

More information can be found at the
deepWidget website at http://deepwidget.com.

Musings on the Instant Web

The Internet is evolving ever so quickly, and more and more people and businesses are feeling the need to have a presence over the Internet. Increasingly such needs are fulfilled through 'instant' and low-cost solutions such as posting on blogging or social networking sites, or using web widgets to enhance an existing website. While this has helped to make it easier to maintain a web presence, it is nonetheless still not an easy task. In particular for average people and small businesses who have little money or technical skills, there are constant challenges such as 'how do I do this or that my blogging site or website does not support', hopefully for free and dummy-proof too.

There was a time when adding up a larger table of numbers means that you will need to have a programmer at your disposal. It was expensive and took a while to do. And then the spreadsheet was invented, and its ease-of-use empowers average people to do more with less, which then created a revolution in personal computing. I believe that when it comes to maintaining a web presence we are still at the pre-spreadsheet era (so to speak). What we need are flexible web technologies that not only meet the many different needs of average people, but just like the spreadsheet also empower the average people to achieve what they need to do easily, quickly, and at low cost.

So here are my musings on where the Internet is heading, and also the solutions that are (or will be) available to the average people.