I seem to be missing something very important in implementing Facebook like buttons to my article based website.
Everything seems to be configured correctly according to the Facebook debugger. But when I actually try to "like" a post, the true url get's replaced with the facebook url. For example, I am liking a post http://www.mysite.com/post/1 , for some reason mysite is being replaced with "facebook", so I end of liking http://www.facebook.com/post/1 . That is how it is showing up both when you hit the like in the modal and on my facebook wall.
Here are my tags
<meta property="og:title" content="My Site"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo "http://www.mysite.com/posts/{$post->id}" ?>"/>
<meta property="og:image" content="http://www.mysite.com/media/logo.png"/>
<meta property="og:site_name" content="My Site"/>
<meta property="fb:admins" content="XXXXXXXX"/>
<meta property="fb:app_id" content="XXXXXXXXXXXXXXX"/>
<meta property="og:description" content="<?php echo text::limit_words($post->content, 20, '...'); ?>"/>
All the urls are showing correct in the Linter, so I can't figure this out.
Thanks
Is there a relative URL in the data-href="URL" in your actual LIKE button code in the page? e.g. I use the facebook like button code as follows, using the og tags set up like you have above:
<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-like" data-href="<?php echo "http://www.mysite.com/posts/{$post->id}" ?>"> data-send="false" data-count="false" data-layout="button_count" data-width="47" data-show-faces="false"></div>
Related
I have added a facebook share button to my app and it appears correctly o the page. I have used the following code:
https://developers.facebook.com/docs/plugins/share-button/
When I click the button it a popup appears with the correct content and I can click "Post to facebook"
When I do the item appears in my feed perfectly but nobody else can see it even though the privacy settings are correct.
Any ideas... ?
<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your share button code -->
<div class="fb-share-button"
data-href="http://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>
</body>
</html>
Things to consider:
Is the privacy set to "friends" or even "public" in the share popup?
Is your App public? Set it public in the "App Review" section.
Make sure your friends actually go to your user profile to check out the posting, it may just not show up in their stream.
I am having trouble implementing the Like Description for one of my projects I am developing on my local machine. My problem was the I can only get the Title and Url to appear in the Like Description and it was missing the Image and the Text. I created a blank page with just a Like button and uploaded it onto a public server and noticed that I am unable to update the contents inside the Like Description.
For example, if you go to my test page below and click the Facebook Like button, you will see the Like Description description as 'Page description, expected to output'. However, if you view the page source, you will see that I have set the description with the Meta OG tag as <meta property="og:description" content="This is a new page description"/>. The current description tag is what I first used when I created this page.
So my question is why can I not update the Like Description? Does Facebook cache this somewhere on their server? If so, do you know how long it is cached for? In addition, will this work if I tested on my local?
http://www.sfu.ca/~jca41/stuph/test.html
<head>
<meta property="og:url" content="http://www.sfu.ca/~jca41/stuph/test.html"/>
<meta property="og:image" content="http://www.placehold.it/320x200/">
<meta property="og:description" content="This is a new page description"/>
<meta property="og:title" content="Site title"/>
<meta property="og:type" content="game"/>
<meta property="og:site_name" content="Site name"/>
<meta property="fb:admins" content="690014395"/>
</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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.sfu.ca/~jca41/stuph/test.html" data-send="true" data-width="450" data-show-faces="false"></div>
</body>
Facebook has a tool called Debugger, this tool fetches the latest content, and also updates it cache with the latest content: https://developers.facebook.com/tools/debug
This should help.
http://www.escapingaspinningroom.com/photos/photo/193
is a web page where I have the comment iFrame on. Litteraly, the only things that change on the page are the description, and image id. Everything else is virtually the same.
http://www.escapingaspinningroom.com/photos/photo/192
this page displays the error. I don't know what I'm doing wrong here.
here are my meta tags:
<meta property="og:type" content="easroom:photo" />
<meta property="og:title" content="Escaping A Spinning Room | Photo" />
<meta property="og:image" content="<?php echo URL . "images/" . $photo->url ?>" />
<meta property="og:description" content="<?echo $photo->disc?>" />
<meta property="og:url" content="http://www.escapingaspinningroom.com/photos/photo/<? echo $this->picid?>" />
<meta property="fb:app_id" content="{36532270688XXXX}"/>
and what they look like on the on my web page (X is there on purpose),
and this is what they look like on the finished page
<meta property="og:type" content="easroom:photo" />
<meta property="og:title" content="Escaping A Spinning Room | Photo" />
<meta property="og:image" content="http://www.escapingaspinningroom.com/images/13479919974.jpg" />
<meta property="og:description" content="Barry looking at the city after a long night of drinking. Actor Michael Souto." />
<meta property="og:url" content="http://www.escapingaspinningroom.com/photos/photo/189" />
<meta property="fb:app_id" content="{36532270688XXXX}"/>
<meta charset="utf-8">
This is located right after the <body> 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/all.js#xfbml=1&appId=36532270688XXXX";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And here is where the comments code is.
<div class="fb-comments" data-href="http://www.escapingaspinningroom.com/photos/photo/<? echo $this->picid ?>" data-num-posts="4" data-width="310" data-colorscheme="dark"></div>
I tried using their debugger tools, but it won't scrape my website.
I'm having a lot of trouble with these facebook comments. If you guys have any great alternatives, and not Disqus, that would be great. free too lol
First off, your value for fb:app_id is incorrect, you have
<meta property="fb:app_id" content="{365322706881496}"/>
It should be
<meta property="fb:app_id" content="365322706881496"/>
Try fixing that and see if Facebook's Debug Tool can access the page correctly afterwards
i have this facebook page: LINK
And i want to implement multiple facebook like button on product page on site: LINK
When i click on "Like" Buttom, this aways shows "1" and when refresh the page, this count disapear.
for my product page i use:
<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/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and for buttons:
<div class="fb-like" data-href="http://www.calcadosabruzzo.com.br/2012/catalogo/1402.html" data-send="false" data-layout="button_count" data-width="85" data-show-faces="false" data-font="segoe ui"></div>
for each phantom pages for the products i use these meta tags:
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">
<head>
<title>Calçados Abruzzo - Ref.: 1402</title>
<meta property="og:title" content="Calçados Abruzzo - Ref.: 1402" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://www.calcadosabruzzo.com.br/" />
<meta property="og:image" content="http://www.calcadosabruzzo.com.br/2012/produtos/1402_5122_Marrom_montila.jpg" />
<meta property="og:site_name" content="Calçados Abruzzo" />
<meta property="fb:app_id" content="100002115061810" />
<meta http-equiv="refresh" content="0;url=http://www.calcadosabruzzo.com.br/2012/catalogo.html">
</head><body></body></html>
i dont know where to get the APP_IP becouse the client make his page on facebook and dont make an APP
when i put the product page on Facebook Debug, show me these errors: LINK
How to solve this? Its the first time i use this Plugin...
I managed to find few reports on this behaviour. I seems Facebook introduced a bug because even their reference where you can create like button gives errors. What people suggested is to make an app through developers.facebook.com/apps
Get the app_id from there and in the app settings under App Domain add your website (calcadosabruzzo.com.br).
For fb:admins you should add the app admin id (probably yours).
Hope this helps.
I am trying to test on a private development server, and I can't use the linter to test why opengraph isn't being picked up on the share. I can set up an app id for the dev server and share the link, however none of the opengraph data is being picked up.
My code is:
<meta http-equiv="X-UA-Compatible" contant="IE=edge" />
<meta property="og:title" content="my title" />
<meta property="og:type" content="Park" />
<meta property="og:url" content="http:<%=cdnHost%>/my_domain" /> <!--ignoring parameters in url -->
<meta property="og:site_name" content="my site name"/>
<meta property="og:description" content="my description" />
<meta property="fb:app_id" content="xxxxxxxxxxxx"/>
<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=xxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:like href="http:<%=cdnHost%>/my_directory"
send="true" layout="button_count" width="100" show_faces="false">
</fb:like>
The og data is not getting picked up because the linter has no access to read that data. You will need to punch a hole thru your firewall and setup DNS appropriately so Facebook can lint your URL. Otherwise, you'll have to tell you QA team that it wont work behind the firewall and explain to them about Facebook's requirement that the URL be publicly accessible.