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/
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 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
}
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){});
});
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.
On stackoverflow, down the left side of my post, there is 3 social media share buttons.
Is there a way to track if the person successfully shared with it?
I'm asking, because i track users who "like", "+1" and "tweet" to share pages, but right now I'm using the social buttons provided by the company's like facebook, gplus, twitter and they cause my site to load slow. And it also causes a problem if the user wants to re-share a page sometime down the road, because facebook already marks it as liked, and I'd prefer a way to share pages.
I've tried a few things with my current javascript knowledge and couldn't figure it out.
Do the following subscriptions
Facebook: subscribe to the edge.create event (http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/)
Twitter: put a callback on the onTweet parameter (https://dev.twitter.com/docs/anywhere/welcome#tweetbox)
Google+: put a callback on the callback parameter (https://developers.google.com/+/plugins/+1button/)
Then in your callback functions, just AJAX whatever you want back to your server for it to store. :)
Happy Coding!
Put this in Header
<!-- For Facebook -->
<meta property="og:url" content="https://you-domain.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Site Title" />
<meta property="og:description" content="Site Description" />
<meta property="og:image" content="Image you want to set for posts" />
<!-- 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>
<!-- facebook Script End -->
Here are the Series of Button (Facebook, Twitter, Google+, Pinterest, LinkedIn ) put where you want to show share buttons, then Design them from CSS
<!-- For Facebook -->
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=URL_you_want_to_Share">Facebook</a
<!-- For Twitter -->
<a data-size="large" href="https://twitter.com/intent/tweet?text=URL_you_want_to_Share">Twitter</a>
<!-- For Google+ -->
Google+
<!-- For Pinterest -->
Pinterest
<!-- For LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-url="URL_you_want_to_Share"></script>