Native Ads Template

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

Step 1: Template Implementation

• Native Ads
• Native Banner Ads

Step 2: Further Customization

• Native Ads
• Native Banner Ads

Step 1: Template Implementation

•   Implementation for Native Ads

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

@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@property (strong, nonatomic) FBNativeAd *nativeAd;

@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];
  // Instantiate a NativeAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a no fill error).
  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 
{    
  self.nativeAd = nativeAd;
  [self showNativeAd];
}

- (void)showNativeAd
{
  if (self.nativeAd && self.nativeAd.isAdValid) {
    FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:self.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);
  }
}

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

Custom Ad Formats come in two templates:

•   Implementation for Native Banner Ads

To shown a native banner ad using templates with height 100 and 120 options, you need to create a FBNativeBannerAd instance and show it in FBNativeBannerAdView view instance as following:

In your View Controller header file, import the SDK header and declare that you implement the FBNativeBannerAdDelegate protocol:

@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeBannerAdDelegate>

@property (strong, nonatomic) FBNativeBannerAd *nativeBannerAd;

@end

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

- (void)viewDidLoad 
{
  [super viewDidLoad];
  // Instantiate a NativeBannerAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a no fill error).
  FBNativeBannerAd *nativeBannerAd = [[FBNativeBannerAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeBannerAd.delegate = self;
  [nativeBannerAd 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)nativeBannerAdDidLoad :(FBNativeBannerAd *)nativeBannerAd 
{
  self.nativeBannerAd = nativeBannerAd;
  [self showNativeBannerAd];
}

- (void)showNativeBannerAd
{
  if (self.nativeBannerAd && self.nativeBannerAd.isAdValid) {
    FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd:self.nativeBannerAd 
        withType:FBNativeBannerAdViewTypeGenericHeight100];

    [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, 100);
  }
}

Custom Ad Formats come in two templates:

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:

•   Example For Native Ads

- (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);
}

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

•   Example For Native Banner Ads

- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)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];

  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd :nativeAd 
      withType:FBNativeBannerAdViewTypeGenericHeight100 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, 100);
}