Native Ad Template

Publishers seeking a more hands off approach can leverage an Audience Network native ad template. Customize a native ad size, color, and font to match the look and feel of your app.

What can I customize?

With a native ad template, you can customize the following elements:

  • Height
  • Width
  • Background Color
  • Title Color
  • Title Font
  • Description Color
  • Description Font
  • Button Color
  • Button Title Color
  • Button Title Font
  • Button Border Color

Set up the SDK

The Audience Network SDK is part of the Facebook SDK. Follow these steps to download and include it in your project:

Using Cocoapods
  1. Add the following line to your project's Podfile: pod 'FBAudienceNetwork'
  2. Run pod install.
Manual
  1. Download and extract the Facebook SDK for iOS.
  2. Drag the FBAudienceNetwork.framework file to your Xcode project and place it under the Frameworks folder.
  3. Add the AdSupport, StoreKit and CoreMotion frameworks to your project

Implementation

Now, in your View Controller header file, import the SDK header and declare that you implement the FBNativeAdDelegate protocol:

@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@end

Then, add a method in your View Controller's implementation file that initializes FBNativeAd and request an ad to load:

FBNativeAd *nativeAd;

- (void)viewDidLoad 
{
  [super viewDidLoad];
  [self getNativeAdTemplate];
}

- (void)getNativeAdTemplate 
{
  nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeAd.delegate = self;
  [nativeAd loadAd];
}

Use the Placement ID you obtained from step 3 on the Getting Started.

When running on the simulator, test ads will be shown by default. To enable test ads on a device, add the following line of code before loading an ad: [FBAdSettings addTestDevice:@"HASHED ID"];. Use the hashed ID that is printed to the console when you first make a request to load an ad on a device.

Now that you have added the code to load the ad, add the following functions to handle loading failures and to construct the ad once it has loaded:

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight3];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);

  // Register the native ad view and its view controller with the native ad instance
  [nativeAd registerViewForInteraction:adView withViewController:self];
}

The ad template can be customized by changing the values of its elements:

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];

  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:0.4 green:0.9 blue:0.8 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight300 withAttributes:attributes];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);

  // Register the native ad view and its view controller with the native ad instance
  [nativeAd registerViewForInteraction:adView withViewController:self];
}

Native ad templates come in four templates:

Template View TypeHeightWidthAttributes Included

NativeAdView.Type.HEIGHT_100

100dp

Flexible width

Icon, title, context, and CTA button

NativeAdView.Type.HEIGHT_120

120dp

Flexible width

Icon, title, context, description, and CTA button

NativeAdView.Type.HEIGHT_300

300dp

Flexible width

Image, icon, title, context, description, and CTA button

NativeAdView.Type.HEIGHT_400

400dp

Flexible width

Image, icon, title, subtitle, context, description and CTA button

All four templates are optimized for widths between 280dp and 375dp, please choose a width within that range. Note that the narrower the width, not all elements may be present.

Native ad templates can also be used in tandem with a Horizontal Scroll View or with the Native Ads Manager.

More Resources

Getting Started Guide

Technical guide to get started with the Audience Network

Native Ads Manager

Deliver the most relevant ads at the right time

API Reference

Facebook SDK for iOS Reference

Horizontal Scroll

Implement a horizontal scroll unit to maximize ad space