求助：如何将Facebook Page Plugin集成至Blogger平台

Hey there, let's work through this Facebook Page Plugin issue you're facing on Blogger. It sounds like the preview isn't showing up, and adding the second code block is causing weird code to appear right after the <body> tag—let's break this down step by step.

Common Issues & Fixes #

1. Fix Code Formatting (The #1 Culprit in Blogger) #

Blogger's theme editor has a habit of automatically escaping HTML characters (like turning < into < and > into >) when you paste code directly into the theme. This breaks the Facebook SDK and plugin code entirely. Here's how to fix it:

• First, back up your Blogger theme: Go to Theme → Backup/Restore → Download theme. This way you can revert if something goes wrong.
• Re-insert the SDK code correctly:
  1. Open your Blogger theme editor (Theme → Edit HTML).
  2. Find the <body> tag (use Ctrl+F to search).
  3. Paste the SDK code immediately after <body>, but make sure you're in the "HTML view" (not the visual editor). Double-check that the code doesn't have escaped characters—your SDK code should look like this (no </>):

     <div id="fb-root"></div>
     <script>(function(d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); js.id = id;
       js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1639125536140367&autoLogAppEvents=1';
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>
     

• Add the Page Plugin code in a Blogger Widget (not the theme directly):
  Don't paste the plugin code into the theme's <body> section—instead, add it to a dedicated HTML/JavaScript widget where you want the plugin to appear (like your sidebar or footer):
  1. Go to Layout → Add a Gadget → Choose "HTML/JavaScript".
  2. Paste the plugin code into the content box:

     <div class="fb-page" 
          data-href="https://www.facebook.com/YourWebsiteTraffic/" 
          data-tabs="timeline" 
          data-width="300" 
          data-height="300" 
          data-small-header="false" 
          data-adapt-container-width="false" 
          data-hide-cover="false" 
          data-show-facepile="true">
     </div>
     

  3. Save the gadget and rearrange it to your desired position.

2. Update the Outdated SDK Version #

Your current SDK uses version v3.0, which is pretty old. Facebook regularly deprecates older SDK versions, which could cause display issues. Update the version parameter to the latest stable version (as of now, v18.0):
In the SDK code, change this part:

js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1639125536140367&autoLogAppEvents=1';

To:

js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0&appId=1639125536140367&autoLogAppEvents=1';

3. Verify Your Facebook Page & App Settings #

• Make sure your Facebook Page (https://www.facebook.com/YourWebsiteTraffic) is set to Public. Private pages won't display in the Page Plugin.
• Confirm your Facebook App ID (1639125536140367) is valid and hasn't been restricted. You can check this in your Facebook Developer account.

4. Test for Cache & Ad Blocker Issues #

• Sometimes your browser cache can prevent the plugin from loading. Try viewing your blog in an incognito/private window.
• Ad blockers or privacy extensions often block Facebook scripts. Disable them temporarily to see if the plugin loads.

Final Steps #

After making these changes:

1. Save your Blogger theme and widget settings.
2. Refresh your blog page to see if the plugin appears.
3. If you still see weird code after <body>, go back to the theme editor and delete any escaped/garbled code that was added earlier.

内容的提问来源于stack exchange，提问作者The Beast