This guide describes how to add badge to your Meeting microsite that pulls photos from your Photostream at Flickr.com A Flickr badge allows you display a small number of photos from you Flickr Photostream. These photos also act as a link to your full Photostream on Flickr.
Creating Your Flickr Badge
Flickr provides an easy to use badge creation tool. Follow the steps below to set-up your badge.
Log in to Flickr
Go to www.flickr.com and log into the Photosteam for which you would like to create a badge. Once you are logged in, go to the Badge Creator located at http://www.flickr.com/badge.gne
Badge Type
You have a choice between two different types of badges you can create, HTML and Flash. Examples of each are shown on the page.
The HTML option gives you more options for layout. It allows you to choose the number of photos, size of photos and layout orientation. The Flash version creates a small animation that rotates through your photos and adds them to a grid.
Choose the option you prefer and click the button that says “NEXT: CHOOSE CONTENT”.
Choosing Your Content
Flickr allows you to customize which photos you want your badge to display. The first choice is your photos or everyone’s photos. Since you most likely don’t want to display photos by every person that uses Flickr, we suggest choosing the “Yours” option.
Once you have selected to view your photos, the next choice depends on your preference. The first option is to have the badge choose photos from all of your publicly available photos. The second option is for the badge to choose from photos that you have given a particular tag. Each of your photos can have multiple tags and you can add tags to your photos from your Photostream view. The final option is show photos from one of your photo sets. You can create sets and add photos to them in the “Organize & Create” menu section of Flickr.
Now that you have selected your content, click the “NEXT: LAYOUT” button at the bottom of the screen to move to the next step.
Customizing Your Layout
If you choose the Flash option in the first step, you will not see this step as the Flash layout is set. However, if you chose the HTML option, you will have some choices for your layout.
- Buddy Icon & Screen Name. If you choose yes for this option, your badge will include a square with your Flickr profile name and photo. What this square will include is shown to the right of the option.
- How Many. This option lets you set how many of your photos the badge will include. You can choose 1,3,5, or 10 photos.
- Which Photos. You have the option of displaying either the most recent photos, or a random selection for the group of photos you have selected.
- Size. You may choose for your photos to be Square (75×75 pixels), Thumbnail (100×75 pixels), or Midsize (240×180 pixels). Balance the size with the number of photos you are displaying so that if you are displaying the photos horizontally, you don’t make your photo display larger than the width of your microsite.
- Orientation. If you would like the Flickr badge to orient your photos for you, select either Vertical or Horizontal. This will place your photos in and HTML table that you do not need to do anything to have them display correctly. If you want to have more control over the display, and know a bit of HTML, you can choose the third option: none. This will place the photos into HTML DIV tags that you can then style how you would like.
Once you are sure you have the layout options that you prefer selected, click the “NEXT: COLORS” button at the bottom to go to the next step.
Selecting Your Colors
Flickr lets you customize the colors of your badge. You can choose the colors for the background, border, links, and text. You can also choose to have no background or no border. A helpful preview is provided at the bottom of the screen.
You can choose any of the colors provided in the large color box to the right. Or, if you have a specific color you would like to use, you can enter the 6 digit hex value for that color.
Once your colors are set how you want them, click the “NEXT: PREVIEW & GET CODE” button at the bottom of the screen to move to the next step.
Adding your Badge into your Microsite
Copying Code
Now that you have created your badge, you need to add it to your microsite. You should be looking at a page with a text box containing HTML code. Select all of the text/code in this box into your clipboard.
Once you have the code copied to your clipboard, go to your microsite setup in MatrixMaxx to get ready to add your badge.
Placing in Your Microsite
Go to the edit page in MatrixMaxx for the microsite tab where you want to place your badge. Add content box for “HTML Text”. Once you have the box on the screen, click the “Source” button in the upper right corner of the box.
You are now looking at the HTML code for the HTML text. Paste the code you copied from Flickr here.
You may now click the “Source” button again to go back to regular editing mode. Save the edit you have made to the tab and your badge should now appear on the microsite.