I have a simple code that I can't get to work. My website is asaphot.com and I have different images based on id and the url sample is http://asaphot.com/photos/14. Now my codes are:
<meta property="og:url" content="http://asaphot.com/photos/14" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ASAPHOT" />
<meta property="og:description" content="Asaphot image" />
<meta property="og:image" content="{{ baseUrl() }}/assets/uploads/test.jpg" />
<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.5&appId=696480183784974";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://asaphot.com/photos/14" data-layout="button_count"></div>
Whenever I click share, I only get the Canonical Url which is http://asaphot.com/login but Fetched Url is http://asaphot.com/photos/14.
The homepage shows up when I click share:
Am I missing something here?
I think you have to login to go that page.
When facebook is parses your URL, its encountering login page. So its going to login.
Solution:
Url Shared to facebook should not have any login.
Keep things to be shared without login.
EDIT
I dont think ots safe to do this,
But you can try this,
$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
if (substr($host, (strlen($host)-13)) == 'facebook.com' ){
//set a variable in session.or set login
}
Related
I know Facebook changes their algorithms all the time, so I'm not even sure this is feasible anymore. But I want to be able when I create a FB share button using OpenGraph, that the message area of the post is dynamically populated with the text of a message I want to display. And I need to do it for four share buttons I plan to place on my HTML page. So I start off with the meta tags in the head like this:
<meta property="og:url" content="https://www.whatever.com/somepage.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My Website" />
<meta property="og:description" content="I just watch this webpage from #Stack" />
<meta property="fb:app_id" content="012345678901234" />
Of course, some of these properties are fillers for the actual id and url, as you might expect.
Then I add this is the 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/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and finally the code to generate one of the buttons:
<div class="fb-share-button" data-href="ttps://www.whatever.com/somepage.html" data-layout="button"></div>
That works to bring the share dialog popup up, but the message area is blank and I need it filled. So what am I doing wrong?
I am trying to make a custom Facebook Share button, by providing my own img and applying FB.ui() to it, but the method opens the dialogue stating:
Given URL is not permitted by the Application configuration: One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
Can anyone tell me what I am doing wrong?
index.php:
<head>
<meta property="og:url" content="http://www.example.com" />
<meta property="og:title" content="Why can't I" />
<meta property="og:description" content="get this thing to work" />
<meta property="og:image" content="http://www.example.com/images/whyaretherenoexamplesanywhere.jpg" />
</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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
// more div's
</body>
in a div on index.php, the file ajaxPage.php is loaded, by means of an ajax call. this in itself and everything in it works perfectly.
In this file an image exists as a button, bound by a .click() method, which together prompt the dialogue for sharing:
ajaxPage.php:
// In de DOM:
<img class="customFacebookIcon" src="enoughwiththefunnynames.jpg"/>
// In the <script>:
$('.customFacebookIcon').click(function(){
FB.ui({
method: 'share',
appId: '12345678901234567890',
href: 'http://www.example.com',
}, function(response){});
});
Here is my simple html:
fb_driver.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Facebook Driver</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fb_driver.css">
</head>
<body>
<script>
window.fbAsyncInit = function() {
alert("why can i not see this?");
FB.init({
appId: 'my-app-id',
xfbml: true,
version: 'v2.0'
});
FB.ui({
method: 'feed',
name: 'The Facebook SDK for Javascript'
});
alert("hi");
};
(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";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
alert("hello");
</script>
<div id="fb-something" class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>
</body>
</html>
It is essentially copied directly from https://developers.facebook.com/docs/javascript/quickstart/v2.0. The "hello" alert at the end of the script shows, but the "why can i not see this?" and the "hi" do not (they are inside window.fbAsyncInit = function() {...}). "why can i not see this?" is literally the first thing inside the fbAsyncInit block but still fails to show. Can someone help me with why this is not working?
One thing I can think of is that, even though the above link says nothing needs to be imported or downloaded and just need regular javascript, perhaps there is something in earlier instructions that I missed.
It ended up being that the '//' before 'connect.facebook.net/en_US/sdk.js' is no good for just opening the html file locally (which is what I'm doing just for playing around right now). I added 'http:' so it reads 'http://connect.facebook.net/en_US/sdk.js' and that got me to a different bug, which is progress.
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 previously asked about making a custom like message on a users page and was directed to use open graph. I have tried the tutorial and can't seem to get it to work with my like button, can anyone help or offer some advice?
i have used the debug tool and get no errors and am a little confused as to what i should do next. My app uses a fixed php header and the body content is changed dynamically using AJAX. what i am trying to do is get a user to 'like' a coupon and it shows up on their site with my custom message, something like "someone has used coupon A from www.somesite.com"
Below is what is in my head;
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# <?php echo APP_NAME;?> fb: http://ogp.me/ns/fb/<?php echo APP_NAME;?># test: http://ogp.me/ns/fb/test#">
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
<meta property="og:type" content="<?php echo APP_NAME;?>:coupon" />
<meta property="og:url" content="http://somesite.com/" />
<meta property="og:title" content="Sample Coupon" />
<meta property="og:description" content="Some Arbitrary String" />
<meta property="og:image" content="http://ogp.me/logo.png" />
and here is my like script, which currently works, but for the page and not the coupon.
<!-- Code for FB like button -->
<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=xxxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://apps.facebook.com/test/" data-send="false" data-width="450" data-show-faces="false"></div>
Using the open graph tags only enable you to post stories like this:
User XYZ likes ABC on website.com
If you would like to specify your own actions (e.g. use) and objects ('coupon') you also need to create an application that will allow you to do this.
You can find a step by step tutorial on how to do this here:
https://developers.facebook.com/docs/opengraph/tutorial/