Native Ads Template

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:

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: