如何在Google AMP中集成FAN及AMP适配FAN博客变现咨询

Hey there! Let's clear up your confusion about Facebook Audience Network (FAN) and AMP integration step by step.

Great question. To cut to the chase: AMP does support FAN, but not via the standard non-AMP FAN code. The mix-up you're facing comes from conflating Facebook's Instant Articles ads (which you saw in that docs link) with direct FAN integration on AMP pages.

Instant Articles ads are specific to Facebook's own content format, while FAN can be directly integrated into AMP pages using AMP's official <amp-ad> component—you might have missed it in the AMP docs initially because it's grouped under third-party ad providers.

Here's a straightforward, step-by-step guide:

1. Add the AMP Ad Component Script
   First, include the required <amp-ad> script in the <head> section of your AMP page. This tells AMP to load the ad component:

   <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
   

2. Insert the FAN Ad Unit
   Place the <amp-ad> tag wherever you want ads to appear in your AMP content (e.g., between blog paragraphs). Configure it with your FAN details:

   <amp-ad width="300" height="250"
           type="facebook"
           data-placement-id="YOUR_FAN_PLACEMENT_ID"
           data-format="banner">
   </amp-ad>
   

   Let's break down the key parameters:

   • data-placement-id: Replace this with the unique ID of the ad placement you created in your FAN dashboard. Make sure the placement is optimized for mobile (since AMP is mobile-first).
   • data-format: Supported formats include banner, native, and interstitial (note: interstitial ads require extra setup with AMP's <amp-lightbox> component for proper behavior).
   • width/height: Match these to the dimensions you set for your FAN ad placement—mismatched sizes can cause ads to fail to load.

3. Native Ads Extra Setup (If Using)
   For native FAN ads, you can customize rendering by adding a template inside the <amp-ad> tag. Here's a basic example:

   <amp-ad width="300" height="300"
           type="facebook"
           data-placement-id="YOUR_NATIVE_PLACEMENT_ID"
           data-format="native">
     <template type="amp-mustache">
       <div class="native-ad">
         <img src="{{imageUrl}}" alt="{{title}}" width="300" height="200">
         <h3>{{title}}</h3>
         <p>{{body}}</p>
         <span>{{sponsoredText}}</span>
       </div>
     </template>
   </amp-ad>
   

   This uses AMP's mustache templating to style the native ad content—adjust the HTML/CSS to match your blog's design.

• Ensure your FAN account and ad placements are fully approved by Facebook; unapproved placements won't serve ads.
• Test your AMP page using Google's AMP Test Tool to catch any configuration errors.
• Don't confuse Instant Articles ads with direct FAN AMP integration—they're separate solutions for different contexts.

内容的提问来源于stack exchange，提问作者Jehan Musa