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.
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.
How can I have a button on my webpage that shares the link the user is viewing automatically to his or her facebook timeline?
For eg if he or she is in mypage.com/aboutme then the link will be shared on his or her facebook timeline when clicked...
That is not possible without user prior Facebook authentication.
If you get theat beforehands, then
<div id="fb-root"></div>
<script type="text/javascript">(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>
Also, make sure you control the og:meta properties in the HTML head
<meta property="og:image" content="http://www.mysite.me/my.png" />
<meta property="og:description" content="mycontent..." />
<meta property="og:title" content="blueflower"/>
<meta property="og:type" content="article"/>
<meta property="og:site_name" content="mysite.me"/>
<meta property="og:url" content="http://www.mysite.me"/>
Best
I figured out how to do it.
This can be done using http://www.addthis.com/ generated code.
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.
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>
When integrating 3 social network buttons (TWEET, +1 and Facebook) Facebook is the only one not picking up the correct data.
When reading the documentation, there appears to be no reason why it should not. It will not pick up the picture of the page in question and instead picks up a user icon and it will not pick up any content.
It should pick up the core content automatically but failing that uses META tags. These too are not helping it.
This appears just after the opening 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_GB/all.js#xfbml=1&appId=250606741665703";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This appears in the HEAD
<meta property="og:title" content="The Belgian Empire" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.robin-knight.com/the-belgian-empire-201112/" />
<meta property="og:image" content="http://www.robin-knight.com/wp-content/uploads/Untitled-11-212x160.jpg" />
<meta property="og:site_name" content="Quite Cheesed Off" />
<meta property="fb:admins" content="597180443" />
And this is the button
You can see an example here:: http://www.robin-knight.com/the-belgian-empire-201112/
Always use the Facebook debugger to find bugs associated with the open graph.
Type the following url into the Facebook debugger (without the slash at the end):
http://www.robin-knight.com/the-belgian-empire-201112
Now you will see that the debugger says:
Object at URL 'http://www.robin-knight.com/the-belgian-empire-201112/' of type 'article' is invalid because it specifies multiple 'og:url' values: http://www.robin-knight.com/the-belgian-empire-201112/, http://www.robin-knight.com/the-belgian-empire-201112/.When you look into your source code you will find two times the og:url meta tag. That's your problem.