Facebook Social Plug-In Not Showing Up When Added Dynamically

facebook social plug-in not showing up when added dynamically

The JS SDK goes through your document once when it is initialized, to look for such elements to parse into social plugins. If you want it to also parse content that you add to the document later, you need to call FB.XFBML.parse().

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Social Media Subscribe/Follow/Like Links Not Working For dynamically added content

You need to use FB.XFBML.parse to tell Facebook that there is new content. https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Executing dynamically added social network widgets

You need to parse the Plugins again with FB.XFBML.parse(): https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Call that function as soon as the elements are rendered in the browser and the JavaScript SDK will parse/show them.

Btw, you should only load the JS SDK once, of course. And don´t ever use "eval"...

Facebook Social Plugin and jQuery Issue

When you load the first page, the Facebook JS SDK get’s loaded as well, and parses the XFBML tags in your document.

The next time you AJAX-load a page into your document, the JS SDK is already embeded into your document, so nothing further happens – and that includes no new parsing of XFBML tags.

You have to use FB.XFBML.parse to tell the SDK that it should again search the document for (dynamically added) XFBML tags. (Preferable give it a DOM node as first parameter, so that it does not search the whole document again, but just the part where dynamic changes have occured.)

Facebook Social Plugins - GDPR

You can use FB.XFBML.parse() to parse the plugin after adding it dynamically. You can also already add the div and load the JS SDK later - which would be the smarter idea, because then there is no connection to Facebook before the user accepts it.

Facebook share button disappear when route changed in nuxt.js (vue.js)

There is a solution which solved a problem.

I have created separate component FbShareButton.vue

Put all logic (including Facebook SDK loading) inside that component as per this and this posts.

Hence:

<template>
    <div id="1">
        <div id="fb-root"></div>
        <div class="fb-share-button" 
                :data-href="this.articleUrl"
                data-layout="button" 
                data-size="small"
                >
        </div>
    </div>    
</template>

<script>
export default {
    props: ['articleUrl', 'articleTitle', 'articleImage', 'articleDescription'],
    head () {
        return {
            meta: [
                { property: "og:url", content: this.articleUrl },
                { property: "og:type", content: "website" },
                { property: "og:title", content: this.articleTitle },
                { property: "og:description", content: this.articleDescription },
                { property: "og:image", content: this.articleImage },
                { property:"fb:app_id", content:"YOUR_FB_APP_ID" }
            ],
            script: [
                {
                    hid: 'fb',
                    src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0',
                    defer: true,
                    // changed after script load
                    callback: () => {
                        FB.XFBML.parse()
                    }
                }
            ]
        }
    }
}
</script>

How to add dynamic content on facebook share window

if you can find solution for PHP then this answer will help you:

Add this in html head section:

<meta property="og:title" content="Content titile" />
<meta property="og:image" content="image ulr path" />
<meta property="og:url" content="url of page" />
<meta property="og:description" content="your content"  />

Add this in script:

<?php
$title=urlencode('Content title');
$url= urlencode('url of page');
$summary=urlencode("Content you can dynamically display like: (E.g.: Time:".(($usertime < 3600)?($usertime.' Seconds'): (round($usertime/60, 2))." Minutes, Points".$userscore.") ") );
$image=urlencode('image url path to display image');
?>

code for link button to share

  <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=550,height=300');" href="javascript: void(0)">

---

Related Topics