Entries tagged "embedded wiget"

Populate Forms Which Have Been Disconnected from Google Docs

Due to popular demand, we're going to look at pre-populating Google forms using PHP. Last week's post showed how forms can be liberated from Google Docs. Since they're disconnected, we won't be able to depend on the standard method provided by Google. We're responsible for developing our own solution. Luckily, this is fairly straight forward with server-side languages like PHP. [Continue reading]

Disconnect Forms from Google Docs for Complete Customization

Google forms provide a quick, easy, and free way to collect information from customers. The forms can even be embedded within an existing website to give a more consistent look from one page to another. Unfortunately, Google doesn't supply very many options for customizing forms. There is a way around these limitations, however. [Continue reading]

Advanced Uses of Google Forms: Customizing and Pre-population

As mentioned in last week's post, Google provides very few options for customizing their forms. However, with a little extra work, the form can look anyway we want. All the extra space between questions can be removed. Labels can appear on the same line as the corresponding form field. Let's look at customizing Google forms and other advanced usage of the service. [Continue reading]

Rapidly Developing Forms with Google Docs

If you develop surveys or data collection forms online, have you given Google Docs a spin? This free service is more than just creating spreadsheets and documents. It also provides a form builder which simplifies the development of online forms. The form responses are stored in a Google spreadsheet which can easily be exported to Microsoft Excel, CSV, etc. Plus, the forms can be embedded in your own website. [Continue reading]

Industry News: CSS Media Queries and Call to Remove Share Buttons

What do you think about the recent call to remove share buttons from websites? Also, does your website utilize CSS Media Queries? If not, they may not be as difficult to incorporate as you might think. [Continue reading]

Making it Easy for Visitors to Share Your Content with AddThis.com

With how common social networking tools like Facebook and Twitter are becoming I wanted to make it easier for website visitors to share our (the organization I work for) content with their colleagues. Instead of developing my own solution, I decided to utilize AddThis.com which provides a customizable widget that can be embedded in your website. According to their website, the widget currently allows visitors to share content with more than 300 services around the world.

For our website, we chose the standard "Website" option and the small sharing buttons shown in Figure 1.

Figure 1. AddThis.com Button Type

Default Code

The default code provided by AddThis.com dynamically lists the share buttons based on how your visitors use them. For example, if most of your users share content on Twitter then "addthis_button_preferred_1" in the code below will show the Twitter button:

Note that "YourUsernameHere" needs to be replaced with your username provided by AddThis.com.

Choosing the Buttons

Instead of using the default code, we always want to show the Facebook, LinkedIn, Twitter, and e-mail buttons. So we changed the "addthis_button_preferred_1", "addthis_button_preferred_2", etc. to:

Note that we also kept the orange plus-sign button so that visitors have the option to share with their preferred social networking tool.

Adding a Label

To make the purpose of the buttons more obvious, we wanted to add a label to the left of the buttons. Well if you just add the label before the first button, the label magically moves to the right of all the buttons when viewed on the Web. To keep the label to the left, you'll need to surround it with an HTML tag like "<span>" and add the "addthis_separator" class:

Right Align the Widget

Before embedding the AddThis.com widget into our website we needed to make one last modification. Due to the location of the widget we wanted to float it to the right:

What if JavaScript is Disabled?

Since the AddThis.com widget doesn't work without JavaScript, you may want to add some extra code to hide any trace of the widget when someone visits your website with JavaScript disabled. The extra code will be added using the <noscript> tag.

Final Modified Code

Once you're satisfied with the setup of your widget, you'll need to embed it into your website. I would recommend incorporating the code so it's easy to modify or remove. That way if Twitter becomes less relevant or if AddThis.com goes out of business for example, it should be simple to update the code as necessary or remove it altogether.

For reference, here is the entire modified AddThis.com code:

Related Resources

• AddThis.com – where you can sign up for your own account and get the sharing widget.