How To - Embed a Widget/Video (for dummies like me)

 


When it comes to technology, I expect to press the button and have the light come on.  That's it.  I don't care how it works, it can be pixie dust as long as it works.


That being said, there are lots of interesting tools (widgets) that may be an effective addition to your Groupsite.


At the end of this post I'll list a few places where you can find and build widgets; but, let me explain the 2 ways you can "embed" them in your Groupsite, first.  I'll also explain how to embed video (as a widget) into your Groupsite.


When it comes to embedding video as a widget, you must first upload your video to a video server. There are dozens companies in this business like YouTube, Vimeo and Viddler. Most offer a free version where your videos are publicly visible as well as a paid version where your videos can be private.


Once you have uploaded your file, these services create an "embed code" which is the key to being able to have the video play within your Groupsite.  The cool thing is, your users do not have to download the huge video file or any software to watch it.  They just click the play button and the video will play right inside the Groupsite.  Pretty cool.


(This is also what happens if you embed a different type of widget - a weather indicator, poll, slideshow, etc.. Once embedded, the widget immediately displays for any visitor to view or use).


Let's use YouTube as the test source. If I search YouTube for "CollectiveX [our name before we re-branded as Groupsite.com]," the #2 listing is my son's video. To the right of the video is where I find the "embed code." The embed code is what you need to insert any widget/video into your Groupsite.



Attachment.


Once you copy the embed code (simply highlight the code, right click and select "copy"), you can use either of the following methods to embed this object into your Groupsite:



Method 1. Embed Widget / Video Module


- First select the "add module" link in the main body of your Groupsite page or in the Sidebar. Click Here for more on how to add/delete modules.


In the body you will be asked if you want a "narrow" or "wide" module. On the sidebar (where only narrow modules fit) you will be asked "add to this sidebar only" or "add to all wide sidebars".


- Now select the module type from the pull-down.  Select "Embed Widget / Video"



Attachment.


- You will see a window where you can add the Title for this module and use the "Paste embed" section to simply paste in your embed code.  (Right click and select paste or use CTRL+V on your keyboard to paste the embed code into the window).



Embed Widget Content Module Interface


Choose a height for your module:


- Free-flowing height. The module defaults to "Free-flowing height."  This setting automatically detects the height of your widget and sizes the module correctly. "Free-flowing height" can be used for embedding YouTube, Vimeo, Hulu and other Flash videos or widgets.


- Set module height (in pixels). If your embed code contains HTML <script>, <style>, <form> or other potentially malicious HTML tags, your content is "sandboxed" (limited to a frame in the module). For these widgets, you'll need to specify the module's height. Poll Daddy and Survey Monkey widgets are examples that use script tags.


Simply un-check the "Free-flowing height" box. Then, enter a height for your module in pixels when adding these types of widgets to your Groupsite.



The standard height for a module is 238 pixels. Depending on the height of your widget, a module set to 238 pixels high may be too short (widget will appear truncated) or too tall (widget displays extra space below it). If you're not sure what height to use, start with the default. Then, use the "Preview" button to get an idea of whether you have to increase or reduce the height of your module. Changing your entry in the "height" box makes the module taller or shorter.


- Hit "Preview" and you will get the following window which shows a preview of your new module with embedded content:



Before Adding, Preview Your Embedded Widget


- Finally, select "ADD MODULE" and you did it!


Notes: Widgets are always automagically re-sized to fit the width of the module. It's only the height of a module that you may need to be set.


 


Method 2. Freeform Text Module


This method may require you to do some resizing of your embedded widget/video but allows you to add additional elements to your module.


- You start just like Method 1. above but this time select the "Freeform Text" module type.





Attachment.


- The new window will allow you to type a Title for your module:



Attachment.


It also provides an "Advanced" link that you can click to change the module height and other attributes.


- Now select "Edit Content" link and our WYSIWYG editor will appear.  We default to the "Basic Editor" tab.  For this move, you need to select the "Advanced Editor" tab which will reveal additional icon choices.


- You want to select the filmstrip-looking icon that is on the bottom row, 2nd from the right.



Attachment.


In the window that pops up, paste your embed code than hit "INSERT."



Attachment.


- You will return to our WYSIWYG editor where you can add additional text and other elements to your module.



Attachment.


- Add any additional text or elements you may want to include in this module and hit "SAVE."


Note: When using the Freeform Text module to embed a widget, the module will not automagically resize the widget to fit your module. You many need to look for references to width and height in under the HTML source tab of your text editor and modify the widget dimensions to fit your module. 


Wide modules are 625 pixels wide. Narrow modules are 310 pixels wide.


-If your embed code contains HTML <script>, <style>, <form> or other potentially malicious HTML tags, your content is "sandboxed" (limited to a frame in the module). For these widgets, you'll need to specify the module's height. Click the "Advanced" link to change the height of your content module:



Attachment.


 A new tab opens, allowing you to set the height:



Attachment.


- Hit "Preview" to see a preview of your new module with embedded content, and "Update" to make any changes live.

Liked By: