Facebook Audience Network

 
 
 

Native Ads Template

Publishers seeking a more hands off approach when integrating Native Ads can leverage a custom Audience Network Native Ads template. Customize a native ad's size, color, and font to match the look and feel of your app.

Ensure you have completed the Audience Network Getting Started and iOS Getting Started guides before you proceed.

To utilize this guide effectively, you should be familiar with implementing Native Ads.

Step 1: Implementation

Step 2: Further Customization

Step 1: 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:

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

Replace YOUR_PLACEMENT_ID with your own placement id string. If you don't have a placement id or don't know how to get one, you can refer to the Getting Started Guide

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

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

  [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];
}

Choose your build target to be device and run the above code, you should see something like this:



Custom Ad Formats come in four templates:

Template View Type Height Width Attributes Included

FBNativeAdView TypeGenericHeight100

100dp

Flexible width

Icon, title, context, and CTA button

FBNativeAdView TypeGenericHeight120

120dp

Flexible width

Icon, title, context, description, and CTA button

FBNativeAdView TypeGenericHeight300

300dp

Flexible width

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

FBNativeAdView TypeGenericHeight400

400dp

Flexible width

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


Native ad templates can also be used in tandem with a Horizontal Scroll View. See here for details.

Step 2: Further Customization

With a native custom 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

If you want to customize certain elements, then it is recommended to use a design that fits in with your app's layouts and themes.

You will need to build FBNativeAdViewAttributes object and provide a loaded native ad to render these 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:66/255.0 green:108/255.0 blue:173/255.0 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];
}

The above code will render an ad that looks like this:

Next Steps

  • Submit your app for review.

  • As soon as we receive a request for an ad from your app or website, we'll review it to make sure it complies with Audience Network policies and the Facebook community standards. Learn more about our review process.

  • Explore our code samples which demonstrate how to use native ads. The NativeAdSample is available as part of the SDK and can be found under the FBAudienceNetwork/samples folder. Open the project with Xcode and run it either on a device or the simulator.

When using latest Xcode with Facebook Audience Network samples, Xcode will give signing error that the app id used in the sample app cannot be registered to your development team. You would need to change your bundle identifier to a unique string and try again.