際際滷

際際滷Share a Scribd company logo

Contest: Image Asset Checklist (Canvas App, Microsite & Iframe)

Strutta
Strutta

This document provides an image asset checklist for creating a contest on Strutta, an app creation platform. It lists 12 types of images needed including specifications for images used in the Facebook tab, contest site banner, introduction, prizes, judges, and sponsors. Background images are suggested to fill the 720 pixel width of the contest site on different devices. Custom app and Facebook share images are also mentioned. The checklist aims to guide users in selecting and uploading the proper images for their contest promotion.

1 of 10
Downloaded 12 times
! ! ! Contest! ! ! ! Image Asset Checklist
Specs:! Facebook Canvas App is 720 pixels wide which 鍖lls Facebook's Canvas Page frame (Facebook ads line the right column).! Users must click through a promotional image on your Facebook Page to access the app. Set a custom app URL (PRO package feature)! Optimized for viewing and interaction on mobile devices! ! User 鍖ow:! From your Facebook Page, users must click through a tab graphic to access the contest. You can bypass the promotional graphic by sending users directly to the promotion site through Facebook ads or other online posts and advertisements using the direct URL.! 1. User arrives on Facebook Page and clicks on the contest icon from the list of apps.! 2. In contests which are fan-gated, non-fans see a 'Like us to proceed' image.! 3. Once they Like your Page, if they are an existing fan, or if you have chosen not to fan-gate, then they are presented with the tab image.! 4. After clicking on this tab image the user will then land on the promotion site! Facebook Canvas App | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 2
Launch a free-standing branded promotion site. This option is perfect if youre looking to design a unique user experience outside of Facebook, set a custom URL (PRO Package feature) and allow users to access your promotion on a mobile device. ! User 鍖ow:! Users visit the contest through the direct URL, through a tab on your Facebook Page (by clicking the contest icon from the list of apps), through Facebook ads or other online posts and advertisements.! Specs:! Standalone Microsite is 720 pixels wide with unlimited background width (depending on your device screen size).! Facebook and other social integrations available! Set a custom URL (PRO package feature)! Optimized for viewing and interaction on mobile devices! ! Standalone Microsite Direct URL | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 3
Launch an HTML iframe that can be embedded directly within a page of your website. This option is ideal if youre looking to drive traf鍖c to your website, keep full website navigation, and maintain ad space.! ! User Flow:! Users visit the contest through the direct URL, through a promotional graphic on your Facebook Page (by clicking the contest icon from the list of apps), through Facebook ads or other online posts and advertisements.! Specs:! Website Embed is 720 pixels wide. The size can be changed within the iframe embed code.! Facebook and other social integrations available! Utilize your own website URL! Accessible* on mobile devices (provided your site is mobile-friendly)! ! ! Note: Iframe sites are not responsive on mobile. Website Embed (iframe)
Views & Apps Image | 111x 74 pixels! ! Include a call to action in the photo or tab name.! ! Users will click on this tab image on your Facebook page to access the promotion.! ! Note: You may not want your promotion site on your Facebook page. If not, your users can access the promotion site through the direct URL (Microsite & Iframe only). ! ! Fan - Gate Image | 810 x 1200 pixels (optional)! image for non-fans (optional)! ! If you choose to Fan-Gate your promotion, those who do not already like your page already will land on this image. ! ! This image should communicate that the user must like the Facebook page to access the promotion.! ! Add this image in the Integration > Facebook > Facebook Tab > Fan-Gate section of your Stuttta builder. 1. 2. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 5
* Tab Image | 810 x 1200 pixels! image for fans (required)! ! The Tab image is the initial image users will see when they access the promotion. Users who already like your page will land on this image and bypass the Fan-Gate image.! ! This image should include a call to action for those who already like your page. Clicking this image will take the user to the promotion site.! ! Add this image in the Integration > Facebook > Facebook Tab section of your Strutta builder.! ! Note: ! If you Fan-Gate your promotion, non-fans will click through two images to reach the promotion.! 1. Fan-Gate image! 2. Tab image! ! If you do not Fan-Gate your promotion, users will click through one image.! 1. Tab image! Banner Image | 720 x 100 pixels! ! This image will remain visible throughout all pages of your promotion site so consider including the title of your promotion.! ! Add this image in the General > Look & Feel > Customize Assets > Banner Image section of your Strutta builder. 3. 4. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 6
Intro Image or Video | 720 x 405 pixels or 16:9 aspect ratio for videos ! ! The intro image or video should include key details of the promotion.! ! ! Add this image in the General > Look & Feel > Customize assets > Intro Image section of your Strutta builder.! ! Note: All images are converted to JPEG including transparent PNGs. Prize Image | 100 pixels x any height! ! 5. 6. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 7
Prize Image | 100 pixels x any height! ! Adding a prize will populate a new tab on your site Prizes. This is optional.! ! This image will also display as a thumbnail on the main Details page.! ! Add this image in the Content > Prizes section of your Strutta builder.! ! Judge Image | 100 pixels x any height! ! Adding a judge will populate a new tab on your site Judges. This is optional.! ! Add this image in the Content > Judges section of your Strutta builder. Sponsor Image or Logo | 100 pixels x any height! ! Adding a sponsor will populate a new tab on your site Sponsors. This is optional.! ! Add this image in the Content > Sponsors section of your Strutta builder. 7. 8. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 8
Background Image | Any size! ! Canvas App, Microsite and iframe: ! ! The width of the contest site is 720 pixels wide. The size of the background image will change depending on what device the user is on or if their browser is fully enlarged or not. If a user is viewing the site on a smaller screen, the contest site will scale down and 鍖t the screen, however, the background image may be cut off on a smaller screen.! ! If you do not want to add a background image, choose a background color in your builder to 鍖ll the white space.! ! Add this image in the General > Look & Feel > Customize Assets > Background Image section of your Strutta builder.! ! 11. Width of contest site | 720 pixels Fluid background width Example: Browser full screen enabled Example: Browser size scaled down | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 9
Custom App Image | 74 x 74 pixels! ! Before a user can vote or enter in a Facebook promotion, they need to authorize the app!! ! You only need this image if you are creating a Custom App. Ask your project or account manager if this is necessary for you.! ! The permissions asked in the Facebook pop- up box will depend on the settings implemented in your promotion. Learn more about why Facebook asks for permissions here.! ! Facebook Share Image | Any size! ! The share Facebook link on the main Details page of the promotion site opens a pop-up window with default share tools. ! ! Note: The thumbnail image in the pop-up is pulled from the main Intro image of your promotion and scaled to 鍖t. If you are using a video instead of an image, send us an image and we will upload it for you! 9. 10. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 10

More Related Content

Contest: Image Asset Checklist (Canvas App, Microsite & Iframe)

  • 2. Specs:! Facebook Canvas App is 720 pixels wide which 鍖lls Facebook's Canvas Page frame (Facebook ads line the right column).! Users must click through a promotional image on your Facebook Page to access the app. Set a custom app URL (PRO package feature)! Optimized for viewing and interaction on mobile devices! ! User 鍖ow:! From your Facebook Page, users must click through a tab graphic to access the contest. You can bypass the promotional graphic by sending users directly to the promotion site through Facebook ads or other online posts and advertisements using the direct URL.! 1. User arrives on Facebook Page and clicks on the contest icon from the list of apps.! 2. In contests which are fan-gated, non-fans see a 'Like us to proceed' image.! 3. Once they Like your Page, if they are an existing fan, or if you have chosen not to fan-gate, then they are presented with the tab image.! 4. After clicking on this tab image the user will then land on the promotion site! Facebook Canvas App | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 2
  • 3. Launch a free-standing branded promotion site. This option is perfect if youre looking to design a unique user experience outside of Facebook, set a custom URL (PRO Package feature) and allow users to access your promotion on a mobile device. ! User 鍖ow:! Users visit the contest through the direct URL, through a tab on your Facebook Page (by clicking the contest icon from the list of apps), through Facebook ads or other online posts and advertisements.! Specs:! Standalone Microsite is 720 pixels wide with unlimited background width (depending on your device screen size).! Facebook and other social integrations available! Set a custom URL (PRO package feature)! Optimized for viewing and interaction on mobile devices! ! Standalone Microsite Direct URL | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 3
  • 4. Launch an HTML iframe that can be embedded directly within a page of your website. This option is ideal if youre looking to drive traf鍖c to your website, keep full website navigation, and maintain ad space.! ! User Flow:! Users visit the contest through the direct URL, through a promotional graphic on your Facebook Page (by clicking the contest icon from the list of apps), through Facebook ads or other online posts and advertisements.! Specs:! Website Embed is 720 pixels wide. The size can be changed within the iframe embed code.! Facebook and other social integrations available! Utilize your own website URL! Accessible* on mobile devices (provided your site is mobile-friendly)! ! ! Note: Iframe sites are not responsive on mobile. Website Embed (iframe)
  • 5. Views & Apps Image | 111x 74 pixels! ! Include a call to action in the photo or tab name.! ! Users will click on this tab image on your Facebook page to access the promotion.! ! Note: You may not want your promotion site on your Facebook page. If not, your users can access the promotion site through the direct URL (Microsite & Iframe only). ! ! Fan - Gate Image | 810 x 1200 pixels (optional)! image for non-fans (optional)! ! If you choose to Fan-Gate your promotion, those who do not already like your page already will land on this image. ! ! This image should communicate that the user must like the Facebook page to access the promotion.! ! Add this image in the Integration > Facebook > Facebook Tab > Fan-Gate section of your Stuttta builder. 1. 2. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 5
  • 6. * Tab Image | 810 x 1200 pixels! image for fans (required)! ! The Tab image is the initial image users will see when they access the promotion. Users who already like your page will land on this image and bypass the Fan-Gate image.! ! This image should include a call to action for those who already like your page. Clicking this image will take the user to the promotion site.! ! Add this image in the Integration > Facebook > Facebook Tab section of your Strutta builder.! ! Note: ! If you Fan-Gate your promotion, non-fans will click through two images to reach the promotion.! 1. Fan-Gate image! 2. Tab image! ! If you do not Fan-Gate your promotion, users will click through one image.! 1. Tab image! Banner Image | 720 x 100 pixels! ! This image will remain visible throughout all pages of your promotion site so consider including the title of your promotion.! ! Add this image in the General > Look & Feel > Customize Assets > Banner Image section of your Strutta builder. 3. 4. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 6
  • 7. Intro Image or Video | 720 x 405 pixels or 16:9 aspect ratio for videos ! ! The intro image or video should include key details of the promotion.! ! ! Add this image in the General > Look & Feel > Customize assets > Intro Image section of your Strutta builder.! ! Note: All images are converted to JPEG including transparent PNGs. Prize Image | 100 pixels x any height! ! 5. 6. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 7
  • 8. Prize Image | 100 pixels x any height! ! Adding a prize will populate a new tab on your site Prizes. This is optional.! ! This image will also display as a thumbnail on the main Details page.! ! Add this image in the Content > Prizes section of your Strutta builder.! ! Judge Image | 100 pixels x any height! ! Adding a judge will populate a new tab on your site Judges. This is optional.! ! Add this image in the Content > Judges section of your Strutta builder. Sponsor Image or Logo | 100 pixels x any height! ! Adding a sponsor will populate a new tab on your site Sponsors. This is optional.! ! Add this image in the Content > Sponsors section of your Strutta builder. 7. 8. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 8
  • 9. Background Image | Any size! ! Canvas App, Microsite and iframe: ! ! The width of the contest site is 720 pixels wide. The size of the background image will change depending on what device the user is on or if their browser is fully enlarged or not. If a user is viewing the site on a smaller screen, the contest site will scale down and 鍖t the screen, however, the background image may be cut off on a smaller screen.! ! If you do not want to add a background image, choose a background color in your builder to 鍖ll the white space.! ! Add this image in the General > Look & Feel > Customize Assets > Background Image section of your Strutta builder.! ! 11. Width of contest site | 720 pixels Fluid background width Example: Browser full screen enabled Example: Browser size scaled down | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 9
  • 10. Custom App Image | 74 x 74 pixels! ! Before a user can vote or enter in a Facebook promotion, they need to authorize the app!! ! You only need this image if you are creating a Custom App. Ask your project or account manager if this is necessary for you.! ! The permissions asked in the Facebook pop- up box will depend on the settings implemented in your promotion. Learn more about why Facebook asks for permissions here.! ! Facebook Share Image | Any size! ! The share Facebook link on the main Details page of the promotion site opens a pop-up window with default share tools. ! ! Note: The thumbnail image in the pop-up is pulled from the main Intro image of your promotion and scaled to 鍖t. If you are using a video instead of an image, send us an image and we will upload it for you! 9. 10. | Image Asset Checklist| Contact us | @strutta | Strutta on Facebook | 10