If you haven't started using Jing yet, stop reading this and install it immediately! Jing is one of those tools that you've never heard of, then you use it, and suddenly, you can't even imaging life without it. For those of you who don't know, it's a small utility that allows you to capture images and videos of your screen and then share them in a variety of easy ways. The other day, I got curious to see if I could use the customizable Jing buttons in order to create a branded viewing experience.
By default, when you share an image or video using Jing, it posts to the ScreenCast website. In the Jing configuration, however, you have the option to set up buttons that facilitate sharing media over YouTube, Twitter, Facebook, Flickr, and or course, FTP. In this post, we're gonna walk through setting up a custom FTP button that uploads an image to your ColdFusion site and returns a URL for viewing.
The first thing you want to do is open up your Jing application and goto the settings. Within the settings, there should be an option to customize the Jing buttons.
These are the buttons that show up once you've captured your screen (in either image or video format) and want to share it. From the customization screen, click on the NEW button.
This will present you with a number of sharing options including YouTube, Flickr, and Facebook. Select the FTP tab and fill out the information relevant to your remote storage location.
At the bottom of this screen, you have the option to configure your clipboard content. This is the content that will contain the URL for your uploaded media. Jing provides you with three data variables that you can then use to help build the resultant url:
- [filename] - The uploaded file name.
- [width] - The width of the media asset.
- [height] - The height of the media asset.
Once the image is uploaded, the above values will be replaced into your URL and the resultant URL will be automatically copied to your computer's clipboard where you can then paste it into something like an instant messaging client. To get an idea of what this URL configuration might look like, this is the one that I am using in the demo (broken into two lines):
Once you are done entering your FTP and URL configuration information, click Save and you should be taken back to the button list which will now contain your newly created FTP button:
With this new Jing FTP button in place, let's capture something on the screen. Whether it's an image or a video capture, you'll be presented with the same set of "share" buttons at the bottom:
Because Jing allows you to create the same type of button multiple times, you may have to mouse-over the button in order to view the label (notice that in the above screenshot, the label appears directly above the button on mouse-over).
NOTE: By default, Jing will automatically name the captured media asset with a unique name. However, if you look in the above screenshot, you can see that Jing also provides an input field that allows you to select your own custom asset name. Be careful - Jing does not give you any warning if you are about to overwrite an existing file.
When you click the new FTP share button, Jing will close the share window, upload the image, and then alert you when the resultant URL has been copied to your clipboard:
At this point, you can now paste the link into an IM client, Twitter message, or email, etc.. The URL is definitely now short; but, unless you're using something like Twitter/TweetDeck (which has its own built-in URL shortening services), the length of the URL shouldn't present a functional problem. Once a user clicks on the link, they will be taken to your branded "view" page and see something like this:
Pretty cool stuff! But, so far, we've only talked about uploading the Jing-captured asset. Now, let's take a look at an example ColdFusion page that handles the branded viewing experience. For this demo, I've created a very simple ColdFusion page that simply checks to see if the image exists; and, if it does, it presents it to the user:
<!--- Param the incoming URL parameters. These are the properties that are available in the JING automated code snippet. NOTE: Rather than waste time computing the image dimensions in ColdFusion, we're just going to use the values that JING sends to use. This will remove some headache. ---> <cfparam name="url.filename" type="string" default="" /> <cfparam name="url.width" type="numeric" default="0" /> <cfparam name="url.height" type="numeric" default="0" /> <!--- Set the root url for the blog - since this is a *branded* JING page, we will be linked back to the root of the blog when necessary. Rather than calculating the link each time, just set it here. ---> <cfset brandUrl = "http://www.bennadel.com/" /> <!--- Sanitize the file name to make sure that no one is trying to gain access about the server file system. ---> <cfset url.filename = getFileFromPath( url.filename ) /> <!--- Check to see if the given file exists. If it doesn't then we are going to send people back to the blog root. ---> <cfif !fileExists( expandPath( "./images/#url.filename#" ) )> <!--- Something went wrong - the file name could not be found. Relocate the user. ---> <cflocation url="#brandUrl#" addtoken="false" /> </cfif> <!--- ASSERT: If we made it this far then the image exists and can be displayed for the user. ---> <!--- Reset the output buffer and set the mime type. ---> <cfcontent type="text/html" /> <cfoutput> <!DOCTYPE html> <html> <head> <title>The Blog of Ben Nadel</title> <meta name="description" content="Images uploaded by Ben Nadel." /> <link rel="stylesheet" type="text/css" href="./linked/styles.css"></link> </head> <body> <div class="header"> <a href="#brandUrl#"> The Blog of Ben Nadel - Recent Blog Entries </a> </div> <div class="body"> <div class="content" style="width: #url.width#px ;"> <!--- Output the uploaded image. ---> <img src="./images/#url.filename#" width="#url.width#" height="#url.height#" /> </div> </div> <div class="footer"> Ben Nadel © #year( now() )#. All content is the property of Ben Nadel and <a href="#brandUrl#">BenNadel.com</a>. </div> </body> </html> </cfoutput>
As you can see, there's nothing too complicated going on here at all. The whole process of setting up a custom Jing FTP button and branded viewing experience is rather painless. In this demo, I only used image capture; but, the same thing could be done with a video capture as well. If you look at the configuration screen, you can see the video uploads allow for a completely different URL. Of course, you could always create an entirely new FTP button just for video uploads if you needed to. Jing is so freaking awesome and easy to customize!
Want to use code from this post? Check out the license.