Integrating LicenseStream into an existing website

I sometimes take for granted all of the knowledge I've been picking up from Denise, Allen and John over at SmugMug's dgrin forum where they voluntarily spend a huge amount of time helping the clueless among us figure out how to customize our websites. It's easy to forget that less than a year ago I was completely clueless about CSS and only had a rudimentary understanding of html, so I really struggled to do the simplest things with my website. I am eternally grateful to people who take the time to post detailed tutorials on how to do the simplest things (and even more so to three people above who are always willing to dig through someone's bad code and help them fix it!), because as I worked my way through increasingly difficult tutorials it all started to make sense. While I'm still not even close to being an advanced user, it is now easy for me to figure out how to do a lot of customization.

So, realizing that there are a lot of folks out there who are in the same position I was just a few short months ago (and prompted by a few e-mail requests), this post is a detailed explanation of how to modify the LicenseStream thumbnail code to work with your existing website if you don't want to use the LicenseStream thumbnails. This method works especially well with a SmugMug site, but will work with any website that allows you to enter html code.

After uploading your image to License Stream and making sure that your caption, keywords and restrictions are all complete and correct as I showed in my previous post, the next step is to "publish" your image. You can do this by selecting the "P" icon at the bottom of the thumbnail either in the Manage Content screen or from the Publish>Publish to Web tab at the top of the screen. Clicking on the icon will bring you to the Publish Content screen. At the top you will be able to review the image and information to verify that everything is correct. Beneath that is the area used to publish to GoogleBase. The bottom section is for publishing to your website.

Make sure you scroll to the bottom of the page and select the correct license model, then click on "Update Ex-Bed Code" first! Ah yes, speaking of the licensing models, I had mentioned in my last post that I couldn't find where I had learned what the different models entailed. Best I can find is to go to the License>License Content tab at the top of your page. Select "Browse Content" and click on the "L" icon on one of your thumbnails. You can then play around with the different license models and see the parameters for each. I use Custom License, but you may choose to use a simpler license model to make buying an easier process for your buyers.

After updating the ex-bed code, you will need to copy the code in the box next to the thumbnail. Make sure you use the code from your own images and not the code I used here or you will be sending your buyers to license my photos!




The code will look similar to this:



**Please note that although I do know how to convert code to character entities so it will display properly in a blog post, for the sake of simplicity (and to save myself a lot of time) I have just copied the code into image files today (and was obviously sloppy about cropping the one above, but hey, it's Sunday. :) **



The first part of the code generates the thumbnail image, exactly as it looks in the box on the screen. The part highlighted in yellow below puts the words "License this Image" below the thumbnail and creates the clickable link that takes buyers directly into your licensing interface in LicenseStream.



Copy the highlighted section and paste it into Notepad or other text editor (don't ever use Word or similar word processing software to write/edit code). Depending on how your website is set up, you will probably need to surround this code with html tags, and I chose to change the color of the font to red, so my edited code looks like this:



You can use any font tags you choose to modify the text, or even change the words of the text, so feel free to play with different colors, font sizes, etc.

If you are integrating this with a SmugMug website, I think the best way to do it is to embed the link in the photo caption. To do this, find the correct photo on your website, select "Edit Caption" and at the very start of your caption add <html>. Your caption should follow, then your modified LicenseStream code, then close it with </html>. You can add <br> tags to add some space between the caption and the link, or any other html code you choose if you want to get fancy. My captions look like this in my edit box (The writing is a bit on the small side here, so if you'd like a bigger version just click on the text to view it at a larger size. You will need to use your browser's back button to return to this page):





That code results in this:



Of course, the exact look will depend on how you have your galleries set up. My galleries are all in SmugMug style with large thumbs on the left of the browser window and a large image on the right (and the larger your browser, the larger the main image will be). This method also looks very good with journal style galleries. I haven't played with any of the other gallery styles yet, but if any SmugMuggers are using a different style gallery and run into problems, feel free to get in touch with me and I'd be happy to help you with it.

You will need to follow this entire process for every single image that you want to link. The LicenseStream code is specific to each image, so you must generate new code for each image you wish to link.

With the linked "License This Image" at the bottom of your photos, anyone who clicks on the link will be brought directly to your LicenseStream licensing interface. If you haven't already, I strongly encourage you to click the link yourself and poke around so you can see exactly what your buyer is going to see and the process they will use to license your images. You can cancel out your shopping cart before actually paying, so make sure you familiarize yourself with all steps of the process.

If the process of linking individual images one by one is too tedious and time consuming for you, another alternative is to provide a link from your website directly to your LicenseStream Web Gallery. Unless you've been poking around a lot like I have, you may not be aware that you have an online gallery that can be activated. From the Publish tab at the top of the page select "Manage Gallery". That will bring you to the Gallery Manager screen where you can upload a profile picture, fill in your bio, and choose a name and title for your gallery. Look for the green button labeled "Put Online" to, what else, put your gallery online.

Below that is a section that allows you to send out invitation e-mails, and below that is the section containing the code for the link to your gallery. Just take that code and, using the same process as above, insert the code anywhere you can insert html on your website. For SmugMuggers likely places would be either in a gallery description edit box or on an html page. This is a very basic link that consists merely of the words "Visit my Gallery on LicenseStream" in blue text, so people with advanced skills will mostly likely want to spend some time customizing the code.

I hope this helps anyone trying to find the best way to integrate LicenseStream into their existing website, and I would love to hear from anyone who has found other ways of integrating it.

Happy Licensing!