Facebook playable ad

1

Hi, i am new here, so far i really enjoy Hype.

I want to use Hype to make facebook playable ad’s, but the problem is that facebook needs only one HTML file including everything in it.

I really dont understand much about coding, i understand that there are export scripts, but is there any script that will export only one HTML file that includes all scripts, images etc.

thank you !

2

Can you link us the specification of Facebook App Ad?
We will then know it is possible.

3

Thank you for quick reply !

here are facebook requirements

Specifications for Playable Ads

The playable ad specifications are the requirements for creating a playable asset.

Playable asset should be HTML5.
Playable should not require mraid.js.
A single file for playable ad that contains all assets as part of that single HTML file and assets should be data uri compressed. (Javascript, CSS, images, sounds).
The playable code should use the Javascript function FbPlayableAd.onCTAClick() when a person interacts with the call-to-action in the ad. Facebook uses the code to handle navigation to the correct app store page for the app.
Playable asset size should be less than 2MB.
No dynamic asset loading through external network is permitted.
Tips for combining into one file - encode image into base64 string, integrate js into index.html.
Playable ads must have an aspect ratio of less than or equal to 1 (no vertical videos).
Playable should be in portrait mode.
Playable should have a responsive design because it needs to support multiple types of devices which have different resolutions.
Playable HTML5 should not contain any JS redirect.
Playable should not make any HTTP request.
Lead in video must be horizontal or square video aspect ratio. Vertical video is not supported.
4

Too add, I’d have to read true the docs to understand what is needed to build with hype what facebook needs.

TL:DR:
Gives the community time to respond to your post.

5

There's not an automated solution to do this right now, though is something that should be possible with the Hype Export Scripts technology.

There's pretty much two aspects it sounds like you need, and there are some solutions on the forums to both:

1. inline all javascript

This is possible via an Advanced Export set to inline data+loader, and then manually pasting the contents of the Hype runtime file. Please see the tips here:

2. base64 encode image assets/inline SVG

This is a bit trickier; you will ultimately you will need to replace your images in the Hype document with elements using inner HTML that have the base64 data URI.

There's an extension that can help with this process:

And some more discussion in these posts:

1 Like
6

I am overwhelmed because I have no knowledge of coding or JS, but this would be HUGE if I could do it.

Here’s a strong vote to keep working on this!

1 Like