Having a problem setting up the moderation toolkit on my facebook comments plug-in. I am trialling this on one page at the moment until I copy it to all pages to each have their own individual comments boxes.
Site Page: http://gp2aus.com/why-go.html
I have inserted the following after my head tag:
<!-- Facebook Comments Box App ID -->
<meta property="fb:admins" content="{100016298409099}"/>
<meta property="fb:app_id" content="{1321908721223176}" />
The following comes after the opening of the body tag:
<!-- Facebook Comments Box Script -->
<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_GB/sdk.js#xfbml=1&version=v2.9&appId=1321908721223176";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the following is in the correct location on my page within the body tag:
<!-- Facebook Comments Box -->
<div class="fb-comments" data-href="http://gp2aus.com/why-go.html" data-width="100%" data-numposts="100" data-order-by="reverse_time"></div>
I have tried all of the applicable solves I have found on SO.
My AppID is correct
AppID's match in the script and AppID pages
I am listed as a moderator in the Settings in the 'Tools & Support' section
I am not in the banned or blacklisted sections!
One thing that I wonder is the problem, but don't know how to fix, is that when I open the 'Facebook for Developers' site and click on the 'Tools & Support' it says that there are no comments for review. Which is odd given that I have just tried making some example comments from myself and another profile and nothing seems to come up.
Can't quite see what I'm doing wrong here but would much appreciate your collective wisdom!
S.
{} are used in the documentation to show that you need to insert a value at this point; they are not part of that value.
If you see f.e. {app-id} in there, it means you need to replace the whole placeholder {app-id} with the actual app id, not just put it inside the curly braces.
Fix that, and then use https://developers.facebook.com/tools/debug to refresh the cache and check for further errors.
Related
This question already has answers here:
AngularJs and Facebook Comments
(2 answers)
Closed 7 years ago.
I am trying to use the facebook share plugin. It works fine if I reload the page, but if i go to the page without reloading then the "share button" does not appear. I have tried moving the facebook sdk code into my template and into the head but neither seem to do the trick. Any ideas?
this is the fb code that I have right below the opening tag
<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=xxxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
where i implement in my html template
the fbUrl is defined in my controller
<div class="fb-share-button" data-href="{{fbUrl}}" data-layout="button" id='fb-share'></div>
The problem is the function runs immediately. It's an immediately invocable function expression (IIFE). If you put it in the head, it runs before any of the rest of the document. The only (probably) safe place to put it would be at the end of your document, before the body tag, when all the html elements have been loaded.
If you notice, one of the call is to getElementById but no elements are loaded if you put that into the head and the ID element might not have been loaded if you put it any place else.
I have included a Facebook Like box on a website i am creating and it only shows up when they are logged into facebook. When they have looged out the like box disappears not allowing anyone new to the site being able to see it. I have included all the code facebook tell you to put in but no joy.
Could anyone help me please.
The code i have used:
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML code
<div id="fb_like">
<fb:like-box href="https://www.facebook.com/pages/Emma-Nolan-Mobile-Beauty- and-Holistic-Therapy/230397297018772" width="300" height="185" show_faces="true" stream="false" header="false" border_color="#FFFFFF"></fb:like-box>
</div>
The site is not using HTML5 so im using the XFBML. Is this something to do with the Facebook settings itself? This is a business page only.
Ive put the script in the head tag and at the bottom of the page to allow for loading, also placed it straight under the body tag as metioned by Facebook.
Add namespace to the html tag of your document.
<html xmlns:fb="http://ogp.me/ns/fb#">
Add this code directly below the < body > tag. Note: make sure to append the correct app id to the js sdk.
<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&appId=YourAppIdHere";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
there was white space in your fb url for the target page.
<div id="fb_like">
<fb:like-box href="https://www.facebook.com/pages/Emma-Nolan-Mobile-Beauty-and-Holistic-Therapy/230397297018772" width="300" height="185" show_faces="true" stream="false" header="false" border_color="#FFFFFF"></fb:like-box>
</div>
I have also been dealing with this issue. Does the cient/business owner have any country or age restrictions set for their page? When demographic restrictions are set (allowing only visitors from a specific country for example, or excluding visitors from a specific country), the Fb like box will not display for non logged-in users. This is a consequence of setting demograhic restrictions and as far as i know cannot be resolved except by opening up the page and getting rid of all restrictions. Hope this helps. See similar thread here: Facebook Like Box plugin doesn't show up for logged out users; only for logged in users
I think you didn't included javascript sdk in your head tag ,resulting in improper fb like button rendering .
I am getting a javascript error for the FB Share button only in IE8. This started after the old Share button was disabled and subsequently re-enabled (see Facebook Share button: is it officially dead?)
The error I am getting is:
Message: Object doesn't support this property or method
FB.Share Line: 128
Code: 0 Char: 188
URI: http://static.ak.fbcdn.net/connect.php/js/FB.Share
Any ideas on how to fix this?
How about doing it this way?
http://www.facebook.com/sharer.php?s=100&p[title]=SHARE%20ME&p[summary]=SOME%20CONTENT&p[url]=http://www.google.com&p[images][0]=http://fakeurl.com/shareImage.gif
Breakdown:
http://www.facebook.com/sharer.php?s=100 - MAIN URL
&p[title]=SHARE%20ME - SHARE TITLE
&p[summary]=SOME%20CONTENT - SHARE PARAGRAPH
&p[url]=http://www.google.com - URL TO SHARE
&p[images][0]=http://fakeurl.com/shareImage.gif - SHARE IMAGE THUMBNAIL
I had a similar issue and removing the following line worked for me after hours of searching online.
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
I used a slightly modified version of the answer in the link I gave originally:
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
</head>
<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/en_US/all.js#xfbml=1&appId=YOUR_APP_ID"; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button type="button" href="http://www.foobar.com"></fb:share-button>
</body>
What I found is that if you can set IE8 in protected mode by selecting Internet options -> Security ->Trusted Sites ->Enable Protected Mode, the page is working fine.
I am to implement social network buttons on some one's website. I am hoping to do it as easily as possible AND futureproof so that the customer doesn't need to add anything when he creates a new page. All his pages are HTML (not PHP) so I can't use any PHP. I was thinking of JS and then using jQuery's .append to make it all nice and easy, but I was wondering whether there is a better way and/or this method has any flaws? Here is the code:
HEAD (scripts):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function() {
var currentURL = window.location; //Get the URL, put it in a variable
$('#fb').append('<div class=\"fb-like\" data-href=\"' + currentURL + '\" data-send=\"true\" data-width=\"450\" data-show-faces=\"true\" data-font=\"arial\"></div>');
});</script>
BODY
<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/en_GB/all.js#xfbml=1&appId=177213782346727";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb">Test</div>
</body>
Any remarks on that? I don't want to fully implement this and then have to change everything all over again.
Once in a while Google's API Libraries go down for whatever reason.
I think including a fallback method to load jQuery would be welcomed in the head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
For the buttons themselves, animating them with open source jqDock might interest you which is based on JavaScript and jQuery and not CSS3. One of that site's webpages is using a social-plugin from Wordpress that you might want to look at. It shows a method similar to your DIV's and JS but is different for the FB connection scheme. Perhaps a mashup method is in order.
If jqDock is overkill, there's a lot more nifty Social Button plugins and CSS/Animated tutorials to pick from which are direct in what they do.
You can put your fb-like div in #fb, and edit data-href after load :
$("#fb-like").data("href",window.location);
I'm currently working with Facebook Comments on a Squarespace.com website. Squarespace gives us the ability to add HTML code blocks, so implementing the code for FB Comments is easy.
The problem is Squarespace displays this code on the Blog Home Page and Category/Tag Pages, as well as the Full Blog Post. I only want the Comments to appear on the Full Blog Post.
I can use the following code to tell Squarespace to look for the Post's PERMALINK and display only when on that page, but the Script no longer works with Facebook's Comments (it used to).
Works:
<script type="text/javascript">
<!--
var docURL = document.URL;
if (docURL == "%PERMALINK%")
{
document.write('<p>This is test text.</p>');
}
-->
</script>
Does Not Work:
<script type="text/javascript">
<!--
var docURL = document.URL;
if (docURL == "%PERMALINK%")
{
document.write('<div id="fb-root"></div>
<sc'+'ript>(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#appId=153773241379548&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</sc'+'ript>
<div class="fb-like" data-href="%PERMALINK%" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>');
}
-->
</script>
Using the Facebook code, nothing shows up at all.
Thanks for your help!
Try this:
<script type="text/javascript">
document.getElementsByTagName("HTML")[0].setAttribute("xmlns:fb", "http://www.facebook.com/2008/fbml");
</script>
You need to place this before the javascript that loads the facebook stuff.
Since you define where the cross domain document is located you don't have to load into root. Just supply the path info for wherever you place the cross domain file
This question was only relevant to the Squarespace Version 5 system. Since Squarespace Version 6/7, Facebook Comments can now be implemented seamlessly by using the Squarespace Developer Platform.
To display Facebook Comments on a blog post page itself, but not the blog index, you'll want to place the Facebook markup into your blog.item template file and do not place it anywhere else.