How to Add a Facebook Share Button to Your Website Using OzSpeed hPanel

Adding a Facebook Share Button to your website makes it easy for visitors to share your content on their Facebook profiles, helping to increase your site’s visibility and drive more traffic. With OzSpeed’s hPanel, you can easily integrate the Facebook Share Button using a simple code snippet. Here’s a step-by-step guide on how to set it up.

---

Step 1: Go to the Facebook Share Button Generator #

Facebook provides a tool that allows you to customize and generate the code for a Share Button.

How to Access the Tool: #

1. Open the Facebook Share Button Generator in your browser.
2. Enter the URL of the page you want visitors to share (e.g., https://yourdomain.com/page-to-share).
3. Customize the button settings (e.g., layout, size).

Tip: #

• Use the Button Preview to see how your Share Button will look on your website.

---

Step 2: Generate the Code Snippet #

After customizing your Share Button, Facebook will provide you with a code snippet.

How to Generate the Code: #

1. Click Get Code.
2. Copy the code snippet provided by Facebook.

Example Code: #

htmlCopy code<!-- Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0"></script>

<!-- Facebook Share Button -->
<div class="fb-share-button" 
     data-href="https://yourdomain.com/page-to-share" 
     data-layout="button_count">
</div>

Tip: #

• Replace "https://yourdomain.com/page-to-share" with the actual URL of the page you want visitors to share.

---

Step 3: Add the Facebook Share Button Code to Your Website Using hPanel #

To make the Share Button appear on your website, you need to add the code snippet using hPanel.

How to Add the Code: #

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Settings > Custom Code.
3. Paste the JavaScript SDK code in the Header Code section.
4. Paste the Share Button code in the section of your website where you want the button to appear (e.g., inside an HTML Block in the Page Editor or in the Body Code section).
5. Click Save.

Tip: #

• Place the Share Button in a prominent location, such as below blog posts or near product descriptions.

---

Step 4: Test the Facebook Share Button #

After adding the Share Button code, it’s important to test it to ensure it works correctly.

How to Test: #

1. Open your website in a new browser tab.
2. Click on the Facebook Share Button.
3. Verify that the share dialog opens and pre-populates with the correct URL and preview.

Tip: #

• If the share preview doesn’t look right, use the Facebook Sharing Debugger to check and update the preview.

---

Step 5: Customize the Facebook Share Button (Optional) #

You can further customize the appearance and behavior of the Share Button.

Customization Options: #

• Button Layout: Choose from different layouts (button_count, button, icon_link).
  • Example:htmlCopy code<div class="fb-share-button" data-href="https://yourdomain.com/page-to-share" data-layout="button"> </div>
• Button Size: Set the button size to small or large.
  • Example:htmlCopy code<div class="fb-share-button" data-href="https://yourdomain.com/page-to-share" data-layout="button_count" data-size="large"> </div>

Tip: #

• Test different layouts and sizes to see what fits best with your website’s design.

---

Troubleshooting Tips #

1. Facebook Share Button Not Appearing:
   • Ensure the JavaScript SDK code is added correctly in the Header Code section of hPanel.
   • Clear your website cache and browser cache.
2. Incorrect Share Preview:
   • Use the Facebook Sharing Debugger to update the URL preview.
   • Check the meta tags for og:title, og:description, and og:image in your website’s HTML.
   Example Meta Tags:htmlCopy code<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A brief description of your page."> <meta property="og:image" content="https://yourdomain.com/image.jpg">
3. Button Not Functional on Mobile:
   • Ensure the JavaScript SDK script is loaded correctly and is not blocked by any content blockers.
   • Test the Share Button on multiple devices and browsers.

---

Additional Tips: #

• Encourage Sharing: Add a call-to-action (CTA) near the Share Button (e.g., “Share this post with your friends!”) to increase engagement.
• Track Shares: Use UTM parameters in the shared URL to track traffic coming from the Facebook Share Button in Google Analytics.
• Optimize for Social Sharing: Make sure your website has Open Graph meta tags to control how your content appears when shared on Facebook.