Add a widget

The following instructions explain how to add a widget as a left widget or as an embedded control to a specific page. The first step is to decide which widget you want to use, here are a few suggestions;

Diving

Project AWARE Advocate Web Badge

Social

AddThis - A great sharing widget with lots of options for putting social media sharing options in different areas of your website.

LinksAlpha - Quick and easy way for companies and users to publish and share on social web. Integrate 25+ social tools into your publishing strategy.

ShareThis - A great widget for sharing webpages using many different types of social media. ShareThis gives you many options such as simple buttons to bars on any edge of your website to an egg which opens to reveal multiple sharing options.

Facebook - Add a Facebook badge to your website.

Facebook Developers Page - For more advanced people you have the options of adding lots of other Facebook embeds and controls to your website. A good start is the Facebook Like Box.

Google +1 - Let visitors recommend your content on Google Search and share it on Google+.

Pinterest - Pinterest lets you organize and share all the things you find on the web. People use pinboards to plan their holidays, trips, and their weekends. But people also use Pinterest to plan their weddings, decorate their homes, and organize their favorite recipes.

Skype - Add a Skype button to your website so that people can contact you easily.

Twitter - You can either show your dive center's Twitter feed or what about showing the Twitter feeds from PADI (PADI) or Project AWARE (projectaware). You can also add Twitter Follow or Tweet buttons.

Tourism

TripAdvisor - Loads of different widget options for TripAdvisor widgets to show you recommendations and comments on your TripAdvisor account.

Translation

Translate This Button - The Translate This Button is a lightweight JavaScript translation widget. It translates any page quickly using Ajax and the brilliant Google Translate.

Microsoft Translator Widget - The Microsoft Translator web page widget allows you to bring real-time, in-place translation to your web site. Users can see your pages in their own language, without having to go to a separate translation web site, and share your page with friends in multiple languages.

Google Website Translator Plugin - Add the power of Google Translate’s automatic translations to your website! The free Website Translator plugin expands your global reach quickly and easily.

Live Chat/Live Video

Zopim - See how our livechat software can make a difference for your business!

Stickam! - Get live video chat on your website

Form Widget

Zoho Creator - lets you create custom forms that you can embed on your site. This is a little more advanced but you can create lots of different forms.

Translation

Microsoft Translator - Using Microsoft translation services.

Google Translator - Using Google translation services.

Yahoo! Babel Fish - A simple translation widget from Yahoo!

RSS Feed Widget

RSSPump.com - By searching the internet you'll find that there are many available RSS feed widgets to add dynamic content to your website, but RSSPump is an extremely versatile solution.

Weather Widgets

AccuWeather - Various different options including a severe weather warning widget.

WeatherBug - Lots of options for displaying weather details on your site.

Hotels Combined - A nice looking widget but it sends users to the hotelscombined.com website where they can select a hotel.

General - sites with multiple widgets

Instructions

Each option will provide you with embed code that you need to copy as this is what is added to the configuration of the widget in the Hammerhead CMS Control Panel. You'll need to make sure that the widget is the right width and height for where you want to use it. All embed code contains width and height sizes in pixels which are easily edited. For the left widget the width should be around 160 pixels - the height is more flexible depending on how you want them to look. If you want to add the control as an embedded control on a specific page then you can choose any size but you'll have to edit the height and width to make it look appropriate.

WARNING!! Now for the geeky bit... START

The code you receive is not your final choice, you can edit the code to change sizes and remove bits of the widget that you don't want to see - the code is very customisable but you may need to play with it to get exactly what you want. If you are going to try to edit the code I would recommend using a source code editor to make your job easier. There are lots of free source code editors available on the internet, but here are a couple of easy option.

Notepad++ - Notepad++ is a text editor and source code editor for Microsoft Windows

Microsoft SharePoint Designer - a free download from Microsoft that is great if you want to maybe do more than basic source code editing. Download and install the latest version from the Microsoft Download Centre.

There are plenty more options available, but for basic editing just install Notepad++

WARNING!! Now for the geeky bit... END

Adding your widget to the CMS

The following instructions explain how to add

To add your widget as a left widget:

Login to the Hammerhead CMS Control Panel and select Site, Left Widgets from the menus
Click New to create a new widget and select Embedded, then click Next
Enter a widget name, paste the embed code into the Embed Code box and click Execute
Adjust the order of your left widgets and finally refresh your site cache

You should now see the widget on your homepage. If you see any strange code on your homepage above or below the new widget then you haven't copied all of the required embed code from the website, so go back to the website and re-copy the code, then edit the widget to paste in the new code.

To add your widget to a specific page:

Login to the Hammerhead CMS Control Panel and select Albums
Either open the default Embedded Album, use another album for embedded controls
Click New to create a new embedded control, paste in the embedded code box and complete the other options
Click Execute

Now that the embedded control is created it can be used where your see the Embedded control icon. When you use the embedded control, if you see any strange code above or below the new control then you haven't copied all of the required embed code from the website, so go back to the website and re-copy the code and edit the control.

There are many websites offering embed code for other useful services, like weather widgets, live chat widgets, news widgets, etc. The process for adding them to your website is the same as above only you might want to create a specific page is the embedded control is too large to fit as a left widget. Have a look at the following pages for more details;

Add a Facebook badge

If you have any questions about these instructions please e-mail support@hammerheadtechnologies.com