Is this scenario possible?
Customer goes to my website, wants to download a PDF technical document that interests them, they click the Download button and a Facebook share window appears to log them in to share it to Facebook. Once they click Share and it is posted on their wall then the download begins?
Many thanks.
Ian
UPDATE
According to a Facebook new policy, this act is not allowed. Use it at your own risk. I hold no responsibilities for using this.
Yes, using the JavaScript SDK, it provides a response (it doesn't anymore)
We will create an if statement to see if the response has a post_id if yes show the download link else do something else (alert the user, maybe?)
DEMO (API 2.0) (not working; revision required)
DEMO (API 2.7) working Rev#63
HTML
<div class="container">
<div>
<p>This file is locked, to unlock and download it, share it</p>
<p class="hidden">Thanks for sharing, the file is unlocked and ready for download</p>
<p class="hidden">In order to download this file, you need to share it</p>
</div>
<a class="fsl fsl-facebook" href="#" id="facebook-share">
<span class="fa-facebook fa-icons fa-lg"></span>
<span class="sc-label">Share on Facebook</span>
</a>
<a class="fsl content-download" href="#" id="download-file">
<span class="fa-download fa-icons fa-lg"></span>
<span class="sc-label">Download File</span>
</a>
</div>
JavaScript (jQuery)
$('#ShareToDownload').on('click', function(e) {
e.preventDefault();
FB.ui({
display: 'popup',
method: 'share',
href: location.href,
},
/** our callback **/
function(response) {
if (response && response.post_id) {
/** the user shared the content on their Facebook, go ahead and continue to download **/
$('#ShareToDownload').fadeOut(function(){ $('#downloadSection').fadeIn() });
} else {
/** the cancelled the share process, do something, for example **/
alert('Please share this page to download this file'):
}
});
});
UPDATE
With the release of API version 2.0 the Feed dialog was deprecated and replaced with the new modern Share Dialog so the above code uses the new Share Dialog
Thank you, works perfect! I Didn't know how to get the download link from a JSON file, so I did it slightly different, maybe not that safe.
Add this to the section where the response is checked
$.post('optimus.php', { 'fieldname' : 'download', 'value' : 'yes'});
Made a new page where the session is set (optimus.php)
<?php
session_start();
$_SESSION[$_POST['fieldname']] = $_POST['value'];
?>
Download.php contains the following code
<?php
session_start();
if($_SESSION['download'] == "yes"){
session_destroy();
$file = 'file.zip';
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
ob_clean();
flush();
readfile($file);
exit;
}
} else {
echo "You didn't share, or you already downloaded the file";
}
?>
So, when the user shared something, the $_SESSION['download'] is set to yes. Download.php checks if it's yes and when it is the download is automatically started. Also, the session is destroyed so they can only download once.
Related
Soundcloud has feature that allows any track to auto download if you add "/download" to the end of the track URL.
We have made use of that feature for many years on our soundcloud hosted podcast:
http://techzinglive.com
http://soundcloud.com/techzing
As of a few days ago the feature seems to have stopped working.
Now that we have 300 episodes it would be quite difficult to go back and retrospectively change the URLs by copy pasting the download link for each episode.
a) Is there any way Soundcloud could fix this?
b) Is there an alternative that does the same thing?
Example:
168: TZ Interview - Patrick Collison / Stripe
~~~
http://soundcloud.com/techzing/techzing-168 (regular link)
http://soundcloud.com/techzing/techzing-168/download (auto download link)
Note: I posted this here as directed by the soundcloud support page.
Well the answer to the question is that SoundCloud no longer support the download slug option. But you can get it to work using their API.
Backend (PHP)
<?php
$yourSoundCloudClientId = '<CLIENTID>';
$yourSoundCloudTrackUrl = 'http://soundcloud.com/techzing/techzing-001';
if ( ! $trackData = json_decode(file_get_contents("http://api.soundcloud.com/resolve?url={$yourSoundCloudTrackUrl}&client_id={$yourSoundCloudClientId}")) )
{
die('Could not get the track because Soundcloud is down, or somethign else weird is happening.');
}
header("Location: {$trackData->download_url}?client_id={$yourSoundCloudClientId}");
?>
Frontend (JS)
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://connect.soundcloud.com/sdk/sdk-3.0.0.js"></script>
<script>
var yourSoundCloudClientId = '<CLIENTID>';
var yourSoundCloudTrackUrl = 'http://soundcloud.com/techzing/techzing-001';
SC.initialize
({
client_id: yourSoundCloudClientId
});
SC.get('/resolve?url='+yourSoundCloudTrackUrl).then
(
function(track)
{
$('#trackDiv').html('<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/'+track.id+'&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>');
}
);
</script>
</head>
<body>
<div id="trackDiv"></div>
</body>
Forgive the malformed HTML... but, you know, it works ;)
Currently, our app posts to users' friends' walls via Graph API. However, Facebook is deprecating this functionality so we are migrating to the Feed Dialog per Facebook's recommendations (see the February 6, 2013 section at https://developers.facebook.com/roadmap/).
Now, we know we can specify the recipient as part of the Javascript SDK call (note FB.init() is called elsewhere earlier on the page):
<p><a onclick="launchFeedDialog(); return false">Testing the Feed Dialog</a></p>
<script>
function launchFeedDialog() {
// calling the API ...
var obj = {
method: 'feed',
to: 'RECIPIENT NAME', // Can specify recipient here
link: 'http://example.com',
name: 'Test post',
description: 'Test description'
};
FB.ui(obj);
}
</script>
However, it does not seem like the user can modify the recipient in the launched dialog. A screenshot of what I mean is at http://i.imgur.com/oLPTO.png.
Is there some way of invoking the Feed Dialog so that the user can change/add recipients, like in the Send Dialog?
The flow we are trying to implement (and the way it currently is) is:
User clicks a button to launch the Feed dialog
User fills in the Feed dialog (including recipient) and submits
Right now, we are stuck with this awkward flow:
User fills out a custom control specifying the recipient
User clicks a button to launch the Feed dialog
User fills in the Feed dialog and submits
OK, we found a workaround. The general idea:
Display the Feed Dialog inline as an iframe (by specifying display=iframe)
Create your own custom control for selecting a recipient Facebook username or id
Reload the iframe asynchronously upon selecting a recipient or onblur, etc
Some caveats/reasoning for above:
You can't use the JS SDK because it will launch the iframe version of the Feed Dialog as a modal lightbox (rather than inline in your page flow)
You'll need to implement a redirect page that does post processing, such as updating the state of the parent window, logging results, etc
For (2), the custom control can be as simple as a text input field, but you'll probably want at least some sort of autocomplete. This is actually not too tricky, as you grab your user's friend list with the https://graph.facebook.com/me/friends Graph API call.
Here's a basic example using a simple text input:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div>
Recipient's FB username:
<input type="text" id="fb-recipient" placeholder="Recipient's FB username"></input>
<input type="submit" id="fb-recipient-submit" value="Pick" />
</div>
<iframe id="fb-feed-dialog" width="586" height="330" frameborder="0" allowfullscreen></iframe>
<script>
$('#fb-recipient-submit').click(function(e){
e.preventDefault();
var feedUrl = 'https://www.facebook.com/dialog/feed?';
feedUrl += 'display=iframe';
feedUrl += '&app_id=' + 'YOUR_APP_ID';
feedUrl += '&access_token=' + 'ACCESS_TOKEN';
feedUrl += '&link=' + 'SHARE_LINK';
feedUrl += '&redirect_uri=' + 'REDIRECT_URI';
feedUrl += '&to=' + $('#fb-recipient').val();
$('#fb-feed-dialog').attr( 'src', feedUrl );
});
</script>
</body>
</html>
You can find a screenshot of a slightly more fleshed out solution at: http://i.imgur.com/0jTM391.png
I do lots of stuff in my javascript code for posting feed in page as m`, but how i can get permission through javascript with just one click.
This is my code.
<body>
<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p>
<a href="javascript:;" onclick='postToFeed(); return false;'>Post to Group</a>
</p>
<p id='msg'></p>
<script>
FB.init({appId: "apid", status: true, cookie: true});
function postToFeed() {
FB.api('/page_id/feed', 'post',
{
message : "It's awesome ...",
link : 'http://csslight.com',
picture : 'http://csslight.com/application/upload/WebsitePhoto/567-grafmiville.png',
name : 'Featured of the Day',
from: 'pageid',
description : 'CSS Light is a showcase for web design encouragement, submitted by web designers of all over the world. We simply accept the websites with high quality and professional touch.'
},
function(response) {
alert(JSON.stringify(response));
});
}
</script>
</body>
Output of above script is
But i wan't to post as a BeCrazzy.com not Rajnish..!
simply, i want to post feed in page as a admin. please help me. :)
There is a tutorial here that shows you exactly how to do this:
https://developers.facebook.com/docs/howtos/login/login-as-page/
You will not be able to use the Facebook Javascript SDK to make the API call signed with the Page access token, you'll need to use something like jQuery.ajax() to do so.
Twitter offers a dead simple method for prepoulating someones status for posting. Specifically, its as easy as http://twitter.com/?status=message .
I am looking for a similar method to use for facebook. Unfortunately, all I can find are like buttons and similar, which don't fit my need (the content we want posted does not have its own page). Is there any method on facebook to easily set someones status?
It sounds like you just want a simple way to share content onto Facebook. Facebook is deprecating the Share Button, but still seems to support direct URL calls to the Share page:
http://www.facebook.com/sharer/sharer.php?u=cnn.com&t=great+news+site
So, create a link that opens your URL in a new window, like in this Javascript:
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(myUrl)+'&t='+encodeURIComponent(myTitle),'sharer','toolbar=0,status=0,width=626,height=436');
You mention prefilling it with default text. I believe Facebook explicitly forbids this now. They say this in the Feed Dialog page, which should pretty much cover their policy for the Sharer page too:
This field will be ignored on July 12, 2011 The message to prefill the text field that the user will type in. To be compliant with Facebook Platform Policies, your application may only set this field if the user manually generated the content earlier in the workflow. Most applications should not set this.
This used to work at https://www.facebook.com/connect/prompt_feed.php?message=woot
But nolonger does.
In Facebook, to post to a certain user's profile you need the following:
The user to authenticate/authorize your application
You ask for an extended permission to be able to post to his wall (publish_stream in this case)
Capture the user id and use it to post whatever you want
Now doing the is easy and can be done in different ways, let's take the PHP-SDK example page and modify it:
<?php
/**
* Copyright 2011 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License. You may obtain
* a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
require '../src/facebook.php';
// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
'appId' => '191149314281714',
'secret' => '73b67bf1c825fa47efae70a46c18906b',
));
// Get User ID
$user = $facebook->getUser();
// We may or may not have this data based on whether the user is logged in.
//
// If we have a $user id here, it means we know the user is logged into
// Facebook, but we don't know if the access token is valid. An access
// token is invalid if the user logged out of Facebook.
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
$user = null;
}
}
// Login or logout url will be needed depending on current user state.
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl(
'scope' => 'publish_stream'
);
}
// This call will always work since we are fetching public data.
$naitik = $facebook->api('/naitik');
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>php-sdk</title>
<style>
body {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
}
h1 a {
text-decoration: none;
color: #3b5998;
}
h1 a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>php-sdk</h1>
<?php if ($user): ?>
Logout
<?php else: ?>
<div>
Login using OAuth 2.0 handled by the PHP SDK:
Login with Facebook
</div>
<?php endif ?>
<h3>PHP Session</h3>
<pre><?php print_r($_SESSION); ?></pre>
<?php if ($user): ?>
<h3>You</h3>
<img src="https://graph.facebook.com/<?php echo $user; ?>/picture">
<h3>Your User Object (/me)</h3>
<pre><?php print_r($user_profile); ?></pre>
<?php else: ?>
<strong><em>You are not Connected.</em></strong>
<?php endif ?>
<h3>Public profile of Naitik</h3>
<img src="https://graph.facebook.com/naitik/picture">
<?php echo $naitik['name']; ?>
</body>
</html>
Now I changed the following from the original example:
$loginUrl = $facebook->getLoginUrl(array(
"scope" => "publish_stream"
));
Now that the user granted your application the right permission you can post to his wall, refer to this answer to get you started.
I'm having an issue connecting to Facebook through the Javascript Client Library in Adobe AIR. It works fine in the browser but in Adobe AIR it seems to not be able to find the Facebook functions. Here is some code I copied from the Facebook website: (Oh and I have the xd_receiver.htm file in the correct path too)
<textarea style="width: 1000px; height: 300px;" id="_traceTextBox">
</textarea>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
//
var api = FB.Facebook.apiClient;
// require user to login
api.requireLogin(function(exception){
FB.FBDebug.logLevel=1;
FB.FBDebug.dump("Current user id is " + api.get_session().uid);
// Get friends list
//5-14-09: this code below is broken, correct code follows
//api.friends_get(null, function(result){
// Debug.dump(result, 'friendsResult from non-batch execution ');
// });
api.friends_get(new Array(), function(result, exception){
FB.FBDebug.dump(result, 'friendsResult from non-batch execution ');
});
});
});
//]]>
</script>
It's not that simple actually man, the problem with loading external script files from the application sandbox is that it's not supported. Technically, by using iframes, you should be able to do this and it works but it's still impossible to use XFBML in the root document after from my experience. After two days of trial and error, the easiest way to do use Facebook Connect in an html/ajax adobe air application is to download the actionscript library and include it as such:
<script type="application/x-shockwave-flash" src="lib/facebook.swf"></script>
<script type="text/javascript">
var FB = window.runtime.com.facebook;
var fb = new FB.Facebook();
var session = new FB.utils.DesktopSessionHelper();
//etc...
</script>
then just refer to the documentation. my only problem now it that I still haven't found an efficient enough way of using XFBML in adobe air, simply adding the facebook namespace to the html tag doesn't do the trick unfortunately. If any knows, please do share thanks
you also need to change xml namespace (main html tag) to this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-gb" lang="en-gb">