Use the Native Ads Template in iOS
Updated: Jun 30, 2026
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: Template Implementation
• Implementation for Native Ads
Now, in your View Controller header file (or Swift file, if you are a Swift user), import
FBAudienceNetwork, declare conformance to the FBNativeAdDelegate protocol, and add an instance variable for the ad unit:import UIKit
import FBAudienceNetwork
class ViewController: UIViewController, FBNativeAdDelegate {
private var nativeAd: FBNativeAd?
}
Then, add a method in your View Controller’s implementation file that initializes
FBNativeAd and request an ad to load:override func viewDidLoad() {
super.viewDidLoad()
// Instantiate the ad 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).
let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
nativeAd.delegate = self
nativeAd.loadAd()
}
The ID that displays at
YOUR_PLACEMENT_ID is a temporary ID for test purposes only.
If you use this temporary ID in your live code, your users will not receive ads (they will get a No Fill error). You must return here after testing and replace this temporary ID with a live Placement ID.
To find out how the generate a live Placement ID, refer to Audience Network Setup
Now that you have added the code to load the ad, add the following functions to construct the ad once it has loaded:
func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
previousNativeAd.unregisterView()
}
self.nativeAd = nativeAd
let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300)
view.addSubview(adView)
let size = view.bounds.size
let xOffset: CGFloat = size.width / 2 - 160
let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 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:
| Template View Type | Height | Width | Attributes Included |
|---|---|---|---|
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 |
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 (or Swift file, if you are a Swift user), import
FBAudienceNetwork, declare conformance to the FBNativeBannerAdDelegate protocol, and add an instance variable for the ad unitimport UIKit
import FBAudienceNetwork
class ViewController: UIViewController, FBNativeBannerAdDelegate {
private var nativeBannerAd: FBNativeBannerAd?
}
Then, add a method in your View Controller’s implementation file that initializes
FBNativeBannerAd and request an ad to load:override func viewDidLoad() {
super.viewDidLoad()
// Instantiate a native banner ad object.
// NOTE: the placement ID will eventually identify this as your app. You can ignore it 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).
let nativeBannerAd = FBNativeBannerAd(placementID: "YOUR_PLACEMENT_ID")
// Set a delegate to get notified when the ad was loaded.
nativeBannerAd.delegate = self
// Initiate a request to load an ad.
nativeBannerAd.loadAd()
}
The ID that displays at
YOUR_PLACEMENT_ID is a temporary ID for test purposes only.
If you use this temporary ID in your live code, your users will not receive ads (they will get a No Fill error). You must return here after testing and replace this temporary ID with a live Placement ID.
To find out how the generate a live Placement ID, refer to Audience Network Setup
Now that you have added the code to load the ad, add the following functions to construct the ad once it has loaded:
func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
// 1. If there is an existing valid ad, unregister the view
if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
previousAd.unregisterView()
}
// 2. Retain a reference to the ad object
self.nativeBannerAd = nativeBannerAd
// 3. Instantiate the ad view
let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100)
view.addSubview(adView)
// 4. Set the frame of the ad view (either manually or using constraints)
let size = view.bounds.size
let xOffset: CGFloat = size.width / 2 - 160
let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
Custom Ad Formats come in two templates:
| Template View Type | Height | Width | Attributes Included |
|---|---|---|---|
FBNativeBannerAdView
TypeGenericHeight100 | 100dp | Flexible width | Icon, title, context, and CTA button |
FBNativeBannerAdView
TypeGenericHeight120 | 120dp | Flexible width | Icon, title, context, description, and CTA button |
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
func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
// Instantiate the attributes to customize the view
let attributes = FBNativeAdViewAttributes()
attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
attributes.buttonTitleColor = .white
// Feed the attributes to the view
let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300, with: attributes)
... Rest of implementation ...
}
The above code will render an ad that looks like this:


func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
// Instantiate the attributes to customize the view
let attributes = FBNativeAdViewAttributes()
attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
attributes.buttonTitleColor = .white
// Instantiate the view and feed the attributes to the initializer
let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100, with: attributes)
... Rest of implementation ...
}
Next steps
- Once your app has a link on the App Store or Google Play Store, configure Audience Network in Monetization Manager to get ad placement IDs.
- Follow the guides to implement ad formats in your app.
See also
- Visit our GitHub sample app repository to view sample code.
- View the Audience Network policies and the Facebook community standards to ensure your app complies.