I have some trouble with the picture that Facebook uses when people share posts for my website on Facebook.
When I use the Facebook debug tool you see at the bottom of the page the right picture that needs to be used on Facebook, but when you go to the Facebook post you see an other picture (the first picture on the debug page at the og:image tag). But that picture doesn't have the go:image meta tag, and the post picture is minimal 200x200 px: http://www.just40.nl/wp-content/uploads/2015/03/Dollarphotoclub_68950691-1024x712.jpg
Facebook debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.just40.nl%2Fbloggers%2Fgood-old-smoking-days-dees-12%2F
How can I fix this?
Finally I found the thing that's removed the <head> tag from the page. My customer add this by her own for the new Facebook API at the top of the header.php file and distorted the head for the Facebook parser.
<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/nl_NL/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
see how the parser see your page here .
Now fix the following errors
og tags are supposed be in the head section of the page html.If it doesn't find it there, it will infer it according to its own liking.yours are in body tag
your page contains multiple occurrences of og:image . fix that .
Related
I am currently writing a website for a local charity run preschool and they would like their Facebook feed on the site.
For this I have used the Facebook Pages plugin. Unfortunately, following their instructions, I don't get anything on the website.
I'm not getting any errors in the console, and the Facebook URL is valid.
I understand to view this specific page the user needs to be logged in to Facebook, which I am, and I'm also able to view the page in the same browser with no problems.
The code I have is:
<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.8&appId=261857213845517";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and the HTML is:
< div class="fb-page" data-href="https://www.facebook.com/thevillageplaygroup/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">< /div>
(note, I've added spaces in the div opening and closing tags as I couldn't get it to show up otherwise, sorry).
I've tried changing the Facebook URL to https://www.facebook.com/facebook as in the examples and that works so I'm presuming it's something to do with the page itself but I can't find any privacy or security settings which seem relevant.
EDIT
The page has security restrictions in place which mean the user needs to be logged in to Facebook and in the UK.
My account is able to access it ok through Facebook, just not using the plugin on the website
Any help is greatly appreciated.
As pointed out by CBroe, it looks to be an issue with using the page feed for a page with privacy restrictions
“Facebook Pages with privacy restrictions cannot be embedded.”
I, wrongly, assumed that seeing as was logged into Facebook and could access the page that I would be able to see the feed. It seems Facebook disallow use of the plugin for pages with privacy restrictions regardless.
I am using the new Share button on Facebook. Is there a way to detect a share event? I had a look at the FB.Event API but I couldn't find which event matches a successful share.
I used the Share Button documentation page to generate the code I'm using.
JS:
<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=xxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML:
<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button_count"></div>
the share button doesn't provide the possibility to track the share event, at least as far as I know.
If you want to "listen" to share events, you want to do what Fabio suggest and use the share dialog: https://www.facebook.com/dialog/feed?app_id=APP_ID&display=popup&link=http://example.com&redirect_uri=http://example.com/someone_shared_on-fb.php, or something like that.
You can try something like this with FQL : Facebook query language.
SELECT share_count, like_count, comment_count, total_count
FROM link_stat
WHERE url="http://www.mysite.com/some-page"
Check your reponse from this link
https://developers.facebook.com/tools/explorer
SO everything a user share and u want a track just hold its url and run a query there will provide count of likes,share and comments as well
Cheers and keep rolling
I'm trying to embed Facebook's photos, videos or even statuses, but I couldn't fetch anything from Facebook,
For example, I'm trying to embed this Photo Post: https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater
First (trying oEmbed services):
Facebook doesn't support an oEmbed interface
Also, I think that Facebook is blocking web-scraping
so some services like Noembed (or Embedly) will work fine to embed content from Twitter, Youtube or even other sites that doesn't support oEmbed interface, but they won't retrieve anything from Facebook, for example, trying to call the service with:
http://noembed.com/embed?url=https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater
will give:
{
url: "https://www.facebook.com/photo.php?fbid=441525965965373&set=a.310879465696691.71407.295546697229968&type=1&theater",
error: "no matching providers found"
}
Second (trying YQL):
when trying to fetch it using Yahoo's YQL like this:
http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20html%20WHERE%20url='https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D441525965965373%26set%3Da.310879465696691.71407.295546697229968%26type%3D1%26theater'%20and%20xpath='//meta|//title|//link'%20and%20compat='html5'&format=json
it will give nothing, and you can even try it here in the YQL console
Question is:
How on earth could someone fetch anything from Facebook?
Finally :), Facebook now supports a new feature that enables us to embed "Public Posts", So the short answer & all we need to know about Embedded Posts is in this link:
https://developers.facebook.com/docs/plugins/embedded-posts/
But to embed the answer here ;) , let's do the following:
1- Include the JavaScript SDK on your page once, ideally right after the opening <body> tag (don't forget replace the appId below with your own application ID)
<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=334259852684024";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2- Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"></div>
We scrape starred Facebook posts on our FB page via the API and save them in our DB. Now we want to show those starred posts on our site and have a comment functionality.
The problem is that we need this to be bi-directional, so a comment made on FB shows up on our site and vice versa.
I tried setting the data-href to the unique URL of the Facebook post (http://facebook.com/{PageName}/posts/{PostId}) but that doesn't work (different comments on the FB post page and on our version of the post). Also tried combinations of http, https, www, PageId or PageName.
Of course we could get it through the API but that wouldn't be optional as our site has no Facebook login functionality and we'd prefer users to post without having to authorize anything.
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>Kommentare</h1>
<div class="fb-comments"
data-href="https://www.facebook.com/FacebookDevelopers/posts/10151631557213553"
data-width="470"></div>
I'm attempting to add a Facebook Like button to my website. I have the code in place and it's working on FireFox, but on Chrome it's not showing up.
For some reason when I'm working with the official Facebook like button 'creator' in Chrome, the like button will not show up when I change the URL from the default. It does however work in chrome.
I'm not sure what the problem could be, and it might be my code, so I'll add it below:
New HTML tag
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/xhtml">
Code for initializing the button (Copy pasted directly from Facebook
<!-- Facebook -->
<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&status=0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Code for the button (Also copy pasted directly from Facebook)
<fb:like href="https://www.facebook.com/wildblueberries" width="87" layout="button_count" show_faces="false" send="false"></fb:like>
Oh and if you would like to test out the problem this is the page on facebook that I'm trying to use to create the button: https://developers.facebook.com/docs/reference/plugins/like/ Try to change the "URL to Like" in Chrome. And the whole like button preview will vanish.
Update: Here is the link to the Facebook like button (It's created by their iFrame) This works in Firefox, but not Chrome/Safari: https://www.facebook.com/plugins/like.php?api_key&locale=en_US&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D26%23cb%3Df1732ea1fbdacbc%26origin%3Dhttp%253A%252F%252Fwildblueberries.com%252Fffb6e0ef554b96%26domain%3Dwildblueberries.com%26relation%3Dparent.parent&href=https%3A%2F%2Fwww.facebook.com%2Fwildblueberries&node_type=link&width=90&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false
Update 2 This problem only occurs if you're not logged into Facebook through your browser. Once I logged in the problem was fixed. Only problem is that not everyone in the world is logged into Facebook. So I'm still stuck with a broken Facebook like button. Any suggestions? - Thanks!
Update 3 After figuring out that only logged in users could see the like button, I searched Google and the fan page I'm linking to probably has demographic filters.
Update 4: After removing demographic filters from the fan page, the problem was fixed.