FB LIKE button - liking only show correct thumbnail + desscription after page reload - facebook

I currently have a "standard" FB LIKE button integrated on my site.
My problem consist of the following:
NOT WORKING: When visiting a page the first time and upon clicking
the FB LIKE button, the image and description isnt taken from the
meta tags. Example can be seen here
WORKING: When refreshing the page and then clicking the LIKE button,
then the meta image + description is showing correctly. (so need to visit the page one time and then refresh) Example can be seen here
Im naturally looking for the image and description to show the first time I click LIKE.
Javascript SDK inserted right after 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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Inserted FB LIKE button:
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="450" data-show-faces="true" data-font="tahoma"></div>
Inserted meta tags:
<meta name="description" content="En hjemmelavet bænk som denne, med plads til opbevaring under låget, er både praktisk og hyggelig i en lille Københavner lejlighed. Lichtenstein stof fra e"/>
<meta property='og:locale' content='da_DK'/>
<meta property='og:type' content='article'/>
<meta property='og:title' content='"Neonliving+Lichtenstein" - Miniaturemaison'/>
<meta property='og:url' content='http://domain.com/beta/neonliving-lichtenstein/'/>
<meta property='og:site_name' content='Site name'/>
<meta property='fb:admins' content='665414800'/>
<meta property='og:image' content='http://domain./beta/wp-content/uploads/2013/05/beanken.jpg'/>
Any ideas?

Related

facebook social plugin API: assign data when clicking button

https://developers.facebook.com/docs/plugins/like-button
<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 like button code -->
<div class="fb-like"
data-href="http://www.your-domain.com/your-page.html"
data-layout="standard"
data-action="like"
data-show-faces="true">
</div>
</body>
</html>
In our case a page has a list of products and each product should have its own Like button.
Product 1: Like Share
Product 2: Like Share
Product 3: Like Share
Product 4: Like Share
Product 5: Like Share
Product 6: Like Share
How to achieve this? If a page has one product, we can use meta og:xxx.
When user clicks Like button for a product, is there a way to assign the meta properties dynamically? Thanks.

My facebook comments are not visible for all visitors

Hello i have problem with facebook comments on my page.
Posts which make visitors are not visible. Posts are visible but only which i will make and then when i logout it will disappear.
/*part of header.php*/
<meta property="fb:admins" content="{hereisadminid}" />
<meta property="fb:app_id" content="{hereisappid}" />
<meta property="og:title" content="<?= $row['title']; ?> | Yrrej" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= $row['title_uri']; ?>" />
<meta property="og:description" content="<?= $row['title']; ?>" />
<meta property="og:image" content="http://www.something.sk/og_something.png" />
<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/sk_SK/all.js#xfbml=1&appId=hereisappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Then in body of my website, under each article is this
<div class="fb-comments" data-href="http://www.yrrej.eu/<?= $_GET['id'] ?>" data- numposts="10" data-colorscheme="light"></div>
Can you help me someone, what is wrong when i cant see all comments? Thanks for tips and help :( Here is my website www.yrrej.eu
I checked your source code, you've written ID's in meta tags with {***}, pls remove the { and }
Second thing, please check that your app is not in the development mode. If it is, you can change the status to live in the settings in "Status & Review"

Facebook comments plugin not publishing comments

I have added a comments box on my page:
http://metallica-gr.net/news/welcome/welcome.html
But when I add a comment even with Post to Facebook checked, that comment is not showing on facebook. Sometimes it worked when I unchecked and rechecked the box. Is it bug or am I doing something wrong?
Your source code shows you have multiple fb-root div tags and no app Id.
Your code:
<div id="fb-root"></div>
<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/el_GR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Remove one fb-root div tag and then create a new fb app, get its app id and append it to the connect url, i.e. //connect.facebook.net/el_GR/all.js#xfbml=1
Final code should look like this:
<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/el_GR/all.js#xfbml=1&appId=<YOUR-APP-ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Also why not use HTML5 code for plugin?
<div class="fb-comments" data-href="{YOUR_SITE_URL}" data-num-posts="2" data-width="470"></div>
And your site is missing some of the important OG meta tags, those are og:title, og:url, og:description, og:type and fb:app_id (Optional for moderation of comments).
Also your image referenced by og:image should be at least 200px in both dimensions. Correct it and it should work.
For example:
<meta property="og:title" content="Metallica-gr" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://metallica-gr.net/news/welcome/welcome.html" />
<meta property="og:image" content="{IMAGE_URL}" />
<meta property="og:description" content="{YOUR_SITE_DESCRIPTION}" />
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
Don't forget to lint the url after changes, so fb servers cache new updates.
Let me know if it worked.

Facebook Recommend Ignoring og:title Until Page Refreshed

I have the typical HTML5 implementation of the Facebook recommend button:
<div id="fb-root"></div>
<script type="javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
<? if ( $current_language == 'en' ): ?>
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
<? else: ?>
js.src = "//connect.facebook.net/fr_CA/all.js#xfbml=1";
<? endif; ?>
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="share_button facebook" id="facebook">
<div class="fb-like" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" data-action="recommend"></div>
</div>
The first time I click it, the popup preview box does not display the Title or Description. I have the following info at the top of the page:
Test
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="Test website." />
<meta name="keywords" content="test whatever" />
<meta property="og:title" name="Show this!" content="Show this!" />
If I leave the page, unrecommend the page from Facebook and return to the same page and press Recommend again, the title and description then appear. The page shows one of thousands of db entries so the problem needs to be fixed. I have tried putting the js function in jQuery(document).ready(function() - no luck. I tried moving it to the bottom of the page - no luck. Can someone help me?
From the example you gave, you are missing some required OG tags such as URL and image. Also, do you have the prefix info on your head tag?
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# myspecialapp: http://ogp.me/ns/fb/myspecialapp#">

Facebook hates my site/like button not loading

This is a two part question:
Facebook hates my site. I tested the like button so many times that now it just shows 'error' in small red writing when I try to like a post on my site. Other people seem to be able to like my site.
When I try to share my site on my Facebook page, it shows an error there too.
Also, the like button does not even load now, except on individual posts.
I have used the Facebook debugger which except for the app and admin tags, says everything is fine.
Does anyone know how to get a site out of FB's doghouse, and why my like button doesn't load? Cheers.
My site is http://speechnotrecognised.blogspot.com.au/ and I am using the following FB code including OG tags:
xmlns:fb='http://ogp.me/ns/fb#'
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://i1252.photobucket.com/albums/hh569/speechnotrecognised/bc0a9481.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<div id='fb-root'/>
<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>
<fb:like font='arial' href=' + data:post.canonicalUrl + ' send='false' show_faces='true' width='450'/>
That’s what is actually rendered as XFBML tag into the HTML code of your page:
<fb:like width="450" show_faces="true" send="false"
href=" + data:post.canonicalUrl + " font="arial"
class=" fb_edge_widget_with_comment fb_iframe_widget">
You can not expect Facebook to know what page on the web + data:post.canonicalUrl + is supposed to be …
So fix your problem with your CMS/template language/whatever you use to create this code, so that it puts an actual URL into the href attribute of this element.