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 .

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.

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.