Unable to dynamically render a Facebook embedded post in JQuery - javascript

Example
Facebook Embedded Post Document
I cannot get iframe to work in jsfiddle but hope you can understand the code. I'm trying to load a facebook post dynamically. I read that FB.XFBML.parse(document.getElementById(idName)); is the way to go to specially render a single post, so that the function doesn't have to render all embedded posts on the page over and over again when a new post is dynamically created.
But I cannot get that to work. The only way I can get that to render is FB.XFBML.parse();, but that seems not to be an ideal way of doing that for just rendering a specific post. Can anyone figure out what's the problem with FB.XFBML.parse(document.getElementById(idName));?
var facebookScriptId = 'facebook-jssdk';
(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', facebookScriptId));
$('button').click(function(){
var id = $('span').text(),
idName = 'fb'+id;
$('div').replaceWith('<div id="'+idName+'" class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/'+id+'"></div>')
FB.XFBML.parse(document.getElementById(idName));
})
<button>Click</button>
<div></div>
<span>10152128760693553</span>

Related

Update facebook follow button URL dynamically

I got following code from facebook developer's page and it work fine:
<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=916488391727774" ;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-follow" data-href="https://www.facebook.com/zuck" data-layout="standard" data-show-faces="true"></div>
I want that whenever user update input field with his profile URL, follow button should update and display his record instead of zuck's default account. How is it possible with jquery/javascript?
Note:- I just used the above code for fb-follow button and didn't used it's API's or anything extra.

Including facebook event on page throws errors

I'm trying to embed a facebook event on my website. I got the code from facebook with the 'embed event' button, but it keeps throwing errors: Invalid App Id: Must be a number or numeric string representing the application id., FB.getLoginStatus() called before calling FB.init(). and This Facebook post is no longer available. It may have been removed or the privacy settings of the post may have changed.
This is the code:
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="#" data-width="466">
<div class="fb-xfbml-parse-ignore">
Post
by
User.
</div>
</div>
Note: I replaced all href's with "#" for the sake of my privacy :P
If your website is based on a Wordpress installation please double check your post page source code. If the <script> tag was stripped probably it's caused by the user's permissions. Try to embed a facebook post as Wordpress administrator and it'll work. In my case that was the stupid problem...

Recall javascript on click in tumblr

I've added the facebook like button on my tumblr page. But each time I click on the "load more" button, the facebook button doesn't appear on the next articles. I think I have to recall the facebook script at this moment to make it work. But i don't know how.
Here is the facebook script I have in my body:
<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 = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And here is the part of the footer where I have to load the rest of the post on my page (I think…):
<footer{block:PermalinkPage} class="individual-footer"{/block:PermalinkPage}>
{block:IndexPage}
{block:IfLoadMoreLink}
<div class="load-more">
{block:IfLoadMoreText}{text:Load More Text}{block:IfLoadMoreText}
</div>
{/block:IfLoadMoreLink}
▲
{/block:IndexPage}
Thx for your help.

Check if user liked my page or not using page url and appId

From https://developers.facebook.com/docs/reference/plugins/like/ I got this script to show the like button in my website
<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 = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=155899567847";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://website.com/project/hello" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
I only have the appId and the url, can I check is current user liked my page ?
I looked in google and I found some examples using PageId and I dont know how to get it
PageID is necessary for checking that page is already liked or not from another source. If you are in the same page (your facebook page) it means there is no need to get that id as it will automatically have it from the session or somewhere else.
You can get the PAGE ID by one of the following way,
http://hellboundbloggers.com/2010/07/10/find-facebook-profile-and-page-id/
http://rieglerova.net/how-to-get-a-facebook-fan-page-id/

commenting in asp.net

Ok..so here's the problem..i want to have facebook commenting on my productsDescription page..there are many products so when we click on a particular product it redirects to the productDescription page with the itemID in query string..now what i want is all the products have there own specific comment box.Now when i use the below code , with different itemID in query string the same comment box opens.
For Eg: If a user comments on a mobile(www.tc.com/gyjd.aspx?itemID=55) , and then navigates to view a laptop(www.tc.com/gyjd.aspx?itemID=77) he sees the comments he gave for the mobile. But what i want is with different itemID in query string the comment box should be new.Hope am not confusing.
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="tc.com/gyjd.aspx" data-num-posts="5" data-width="500"></div>
I've solved that by doing a div called fbBtns.
Then I set it's innerHtml property on page behind:
fbBtns.InnerHtml = "";
Simply add the proper querystring to the data-href attribute:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString["itemID"]%>" data-num-posts="5" data-width="500"></div>
For VB.NET:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString("itemID")%>" data-num-posts="5" data-width="500"></div>
You need to have unique urls for the page (Facebook ignores the query string). You could tell Facebook to use fake urls by setting the data-href to be something like "tc.com/qyjd/4" etc. With .net 4, you can easily set up page routes.
to do this as well.

Categories