





    <div class="root responsivegrid">


<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
    
    <div class="embed aem-GridColumn aem-GridColumn--default--12">



<style>
    .fixedAd {
        position: fixed;
        z-index: 1000;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    }

    .bannerAdOuterContainer {
        display: flex;
        justify-content: center;
        flex-direction: column;
        vertical-align: middle;
        align-items: center;
        bottom: 0;
        left: 0;
        width: 100%;
        /* height: 50px; */
        background-color: #ccecff;
        color: #485c77;
        font-weight: 600;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .bannerAdInnerContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 10px 20px 5px;
    }

    .message {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 3px;
    }

    .secondLine {
        display: none;
    }

    .contentTitle {
        flex-direction: column;
        display: flex;
        margin: 0;
        text-align: center;
        color: #041D33 !important;
        letter-spacing: 0px;
        text-decoration: none !important;
        transition: ease-in-out 1s;
        font-weight: 600;
        font-size: 1rem;
        font-family: 'Montserrat';
    }

    .contentsubTitle {
        display: flex;
        margin: 0;
        text-align: center;
        color: #485c77 !important;
        letter-spacing: 3px;
        text-decoration: none !important;
        transition: ease-in-out 1s;
        font-weight: 600;
        font-size: 10px;
        font-family: 'Montserrat';
    }

    .dark {
        color: #161616;
    }

    .highlight {
        background: #fad64a;
        color: #1d2a3b;
    }

    .brand {
        color: #196BDE;
        font-weight: 700;
    }

    .ctaContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta {
        display: inline-block;
        background-color: #196CDF;
        border-color: #196CDF;
        color: #fff;
        border-radius: 2.56px;
        text-decoration: none;
        width: 120px;
        height: 30px;
        margin: 2px 0;
        text-align: center;
        text-decoration: none;
        opacity: initial;
        border: 0;
        transition: all .25s ease-in-out;
    }

    .cta:hover {
        color: #161616;
        box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
    }

    .cta>a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: 'Montserrat';
        text-decoration: none;
        color: #FFFFFF;
        transition: all .25s ease-in-out;
        font-size: 1rem;
        font-weight: 700;
    }

    .cta:hover>a {
        color: #161616;

    }

    .hMed {
        display: block;
    }

    @media (min-width: 992px) {
        .hideOnDesktop {
            display: none;
        }

        .bannerAdOuterContainer {
            width: 100%;
            height: 90px;
        }

        .bannerAdInnerContainer {
            flex-direction: row;
            padding: 10px 20px;
        }

        .message {
            margin: 0;
            padding: 0;
        }

        .contentTitle {
            display: block;
            font-size: 20px;
            line-height: 37px;
        }

        .contentsubitle {
            display: block;
            font-size: 10px;
            line-height: 15px;
        }

        .cta {
            height: 64px;
            width: 240px;
            margin: 0 0 0 30px;
        }

        .cta:hover {
            color: #161616;
            box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
        }

        .cta>a {
            font-size: 18px;
        }

        .hMed {
            display: none;
        }
    }
</style>

<div class="bannerAdOuterContainer fixedAd">
    <div class="bannerAdInnerContainer">
        <div class="message">
            <div class="contentTitle">Up to 75% off on hosting for WordPress websites and
                online stores
            </div>
        </div>
        <div class="ctaContainer"><button class="cta"><a target="_top" href="https://www.bluehost.com/wordpress/wordpress-hosting?channelid=P99C46097236S1N0B2A151D320E0000V100#pricing-cards" data-element-location="sticky-footer" data-element-type="cta" data-element-label="seventy-off-sticky-footer">Get started</a></button></div>
    </div>
</div>
</div>

    
</div>
</div>








    
<script src="https://www.bluehost.com/etc.clientlibs/bluehost/clientlibs/clientlib-dependencies.min.4e69d58551a555f0a11746f84dfe8934.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/wci-core/clientlibs/clientlib-base.min.e9647c1236accc80d9bdced827b6dd23.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/bluehost/clientlibs/clientlib-site.min.69f1257f52bf1c4c1bddcc4d75c19aa8.js"></script>





    
    





    
    
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/commons/site/clientlibs/utils.min.9a20347481f35c44bd1c5b2e31cd2cc8.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/commons/site/clientlibs/imageDynamicMedia.min.0a201f8f160f362cc4f8b50c1bd47f23.js"></script>
<script src="https://www.bluehost.com/etc.clientlibs/core/wcm/components/image/v3/image/clientlibs/site.min.8d52a16d2fbca419380aa4389324e137.js"></script>




<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'92585200ec4abd30',t:'MTc0Mjg0MTg3MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'925851fe8982b088',t:'MTc0Mjg0MTg3MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

<p>The Facebook API change oEmbed update, which was implemented on October 24, 2020, requires users to generate an app ID to continue embedding Facebook and Instagram content using oEmbed.</p>

<ul>
	<li><a href="#what-is-oembed">What is oEmbed?</a></li>
	<li><a href="#impact">How the Facebook oEmbed API Change Impacts Your Site</a></li>
	<li><a href="#fix-oembed-links">Available Solutions to Fix oEmbed Links</a></li>
	<li><a href="#summary">Summary</a></li>
</ul>

<h2 id="what-is-oembed">What is oEmbed?</h2>

<p>oEmbed is a protocol enabling websites to embed content from third-party websites with just a URL. It is primarily designed to avoid the need to copy and paste HTML from other sites. For example, WordPress uses oEmbed to display embedded images and videos.</p>

<p>For over a decade, <strong>Facebook oEmbed</strong> has allowed users to share media on websites and social networks without requiring coding. However, following new security updates, users must now obtain developer credentials to embed Facebook and Instagram content.</p>

<p>This guide explains the oEmbed change, why it impacts websites, and how to update your website to keep Facebook and Instagram embeds functional.</p>

<h2 id="impact">How the Facebook oEmbed API Change Impacts Your Site</h2>

<p>This API update affects websites that rely on oEmbed. Many plugins dependent on oEmbed may fail to display unauthenticated Facebook or Instagram content.</p>

<ul>
	<li><strong>Broken embeds</strong>: Your site may show errors or blank spaces in place of previously working embeds.</li>
	<li><strong>Plugin issues</strong>: Plugins using oEmbed may fail to display your content correctly.</li>
	<li><strong>Content error</strong>: Website content, such as embedded posts, images, or videos, may not show up correctly</li>
</ul>

<p>To ensure smooth content display, website owners will need to update their oEmbed settings.</p>

<h2 id="fix-oembed-links">Available Solutions to Fix oEmbed Links</h2>

<p>To maintain Facebook and Instagram embeds, you can use either <strong>Jetpack</strong> or <strong>Smash Balloon</strong> plugins.</p>

<h3 id="using-jetpack">Using Jetpack for oEmbed</h3>

<ol>
	<li>Install and activate Jetpack on your WordPress website.</li>
	<li>Connect your Facebook account within Jetpack to handle app ID registration and token creation automatically.</li>
</ol>

<p>Jetpack partners with Facebook to automate developer ID creation, making it easier to integrate social media content.</p>

<h3 id="using-smash-balloon">Using Smash Balloon for oEmbed</h3>

<ol>
	<li>Install the <strong>Smash Balloon Facebook/Instagram Feed</strong> plugin.</li>
	<li>In the WordPress dashboard, go to <strong>Smash Balloon &gt; oEmbed</strong>.</li>
	<li>Click on the <strong>Connect</strong> button to link your account.</li>
</ol>

<p>If you already have Smash Balloon installed, updating the plugin will enable oEmbed functionality for Facebook and Instagram.</p>

<h2 id="summary">Summary</h2>

<p>Understand the implications of the Facebook API change to oEmbed and how it has affected website embeds. This article provides insights into the change and offers simple steps to restore Facebook and Instagram content using WordPress plugins.</p>

<p><div class="callout callout-info" style="background-color: #fcf8e1;border-left-width: 3px;border-left-style: solid;border-left-color: rgb(246, 195, 66);">
<div class="callout-content">
<p>If you need further assistance, feel free to contact us via Chat or Phone:</p>

<ul>
	<li><b>Chat Support -</b> While on our <a href="https://www.bluehost.com" target="_blank">website</a>, you should see a <strong>CHAT</strong> bubble in the bottom right-hand corner of the page. Click anywhere on the bubble to begin a chat session.</li>
	<li><b>Phone Support -</b>
	<ul>
		<li>US: 888-401-4678</li>
		<li>International: +1 801-765-9400</li>
	</ul>
	</li>
</ul>

<p>You may also refer to our <a href="https://www.bluehost.com/help" target="_blank">Knowledge Base</a> articles to help answer common questions and guide you through various setup, configuration, and troubleshooting steps.</p>
</div>
</div></p>

<p>&nbsp;</p>

Facebook API Change - oEmbed: What You Need to Know

What is oEmbed?

How the Facebook oEmbed API Change Impacts Your Site

Available Solutions to Fix oEmbed Links

Using Jetpack for oEmbed

Using Smash Balloon for oEmbed

Summary