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.