How to have a SoundCloud Follow button on my website? - soundcloud

Is there a way to embed a SoundCloud Follow button on my website so users can Follow the page/channel from the website it self?
Is it possible to have something similar with Vimeo too?

Looks like SoundCloud opened up functionality for "following" via their API
Unfortunately, for the time being, they have closed off new apps from registering with their API... not sure when/if that will open back up.

Thanks to #davidpm4 - got it working with the updated API here
Here is the auth. code for popup:
<script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
<script>
SC.initialize({
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'http://example.com/callback'
});
// initiate auth popup
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
</script>
This is for the callback:
<script src="https://connect.soundcloud.com/sdk/sdk-3.3.0.js"></script>
<script>
SC.initialize({
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'http://example.com/callback'
});
SC.connect().then(function() {
// Follow user with ID 3207
SC.put('/me/followings/3207').then(function(){
// Unfollow the same user
SC.delete('/me/followings/3207');
});
});
</script>

For SoundCloud, you can customise an icon here – https://soundcloud.com/pages/embed

Related

Facebook App Requests shows no friends (infinite loading)

I've been trying everything to fix this issue.
I have setup a basic php based Facebook App (Canvas/iFrame) - and it loads fine, asks for permissions and installs ok.
I've tried the apprequests code on the Developer site, plus different examples to try and invite friends to the app.
The dialogue box does show, but the loading bar just runs without showing any friends to select.
The code I'm using is:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<button id="send-to-many">Send App request</button>
<script>
FB.init({
appId : '<?php echo $appid ?>',
});
document.getElementById('send-to-many').onclick = function() {
FB.ui({
method: 'apprequests',
message: 'You should learn more about the Platform.'
},
function(response) {
if (response) {
alert('invited');
} else {
alert('not invited');
}
}
);
}
</script>
Not sure how to get around this. Any ideas!
I can however add a "to" in the method and specify a single user ID and that works.
So am thinking it could be a permissions issue?
Many thanks,
Jorge
Shouldn't be a permissions issue - a lot of the dialogs are designed to be used without having to auth an app.
I've just run this exact code, replacing the app ID with mine, and it works. So some things to check are:
Are you getting any JS errors in the console?
Is the app in Sandbox mode and you're using it with a non-admin user?
Has the account you are using definitely got friends?

Facebook Opengraph action publishing error

I'm trying to create a read button for my application. I have implemented the code as per the tutorial, but when i click publish button it says Error Occurred
<script type="text/javascript">
function postArticle()
{
FB.api(
'/me/svolzesocial:news.reads?article=<?php the_permalink() ?>',
'post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Successful! Action ID: ' + response.id);
}
});
}
</script>
I also tried debugging, but its showing no error there.
I have created publish button on this page Svolze post Please help me out to sort this problem!
You're posting to the wrong URL.
If you're using the build in read action you should post to
/me/news.reads
If you're using a custom action you should post to
/me/yournamespace:youractionname
At the moment, you're convoluting the two.
Nikhil,
Please also console.log(response) when there is an error to help debug. My guess is that you don't have the correct permissions - you will need publish_actions to publish on the user's behalf. Add a login button with the correct scope and then try to publish.
Some resources:
Perms page
Graph API Explorer

Facebook Like notifications?

I saw a website today that stated: "Share/Like this site and get 10% discount". I was wondering: is there any way to track when someone shares/likes my site? Can I store some data of that user in my app?
I know those events have some callbacks, and maybe I can trigger some jQuery magic to send some data vía ajax when the user clicks on the button.
Any ideas?
Thanks!
Similar question was discussed here
FB.Event.subscribe('edge.create', function(href)
{
});
From the above code you can get only href not any User details. So I tired the following code
FB.Event.subscribe('edge.create', function (href) {
FB.login(function (response) {
if (response.session) {
//session object has uid & access token.
}
});
});
The Problem you will have from above code is: Since FB.login will open a pop up window for log in, some browsers will block the pop up or warns the user.
I tried the above code. LIKE functionality works and is posted to user's wall, but regarding getting user info:
Firefox (4.0) - did not warn but it asked the user to authorize APP and access basic information. IE 9 - Gave a warning message about POP UP. Google Chrome : Blocked the log in pop up.
It seems the only way to achieve this is let the user login to website using Facebook Connect first and then get user info using
FB.Event.subscribe('edge.create', function (href) {
// href is the URL of the object that got liked
var x;
FB.getLoginStatus(function (response) {
alert(response);
if (response.session) {
}
});
Check out the Facebook developers site. It contains heaps of information.
http://developers.facebook.com/search?q=Events.create
and
http://developers.facebook.com/blog/post/149/
Something like this should do what you need:
<fb:like href="http://www.google.com"></fb:like>
<!-- Like button to whatever object you want^^ -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
FB.init({
appId: 'APP_ID',
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create', function(href)
{
// href is the URL of the object that got liked
// do whatever magic ajax you want
});
</script>

Facebook Connect disable auto login

I integrated the graph api facebook connect but if we are login to facebook, we will automatically login to the site with facebook connect as well. Is there any way we let the user clicks on fb "Login" only then the user is connected to the site with their fb account?
Now the user is automatically login to the site without the option to choose whether they would want to use their facebook account. If they want to logout from the site, they need to logout from facebook completely only then they can logout from the site with facebook connect as well.
Anyone can help me or give some tips how to go about?
Thank you!
I had this same problem on a recent website, and found a way to overcome it. My solution allowed a user to already be logged into facebook on their computer, yet not have it auto login on my website, then they can login with Facebook Login button and finally when they logout it won't log them out of Facebook on their computer, just on my website (much like Digg does with facebook).
To do it I was using https://github.com/facebook/php-sdk/ to check within PHP if there was an active facebook session with the user and the website (which would cause the auto login). If there was, I would not echo the auto login code:
FB.init({
appId : '<?php echo $facebook->getAppId(); ?>',
session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.login', function() {
window.location = "process-login.php";
});
but instead just render my own facebook login button that would link to "process-login.php".
process-login.php would set the custom $_SESSION variable that told my website someone was logged (whether via my own system, or via facebook), and then reload the referring page (using $_SERVER['HTTP_REFERER']) which would now display the user as logged in via Facebook since my own $_SESSION variable was now set. To log them out (without logging them out of Facebook entirely, just my website), I would just load a logout script that removed the $_SESSION variable.
The example.php (in the php-sdk on github) was very helpful at finding my solution, though I had to customise it significantly to make it work with my existing system. It at least helped me see how to access the facebook session variable in PHP (stored in $me in the example).
Hope this helps you if its still a problem, or that it helps someone else in this situation.
EDIT:
Turns out I still had some issues with auto login on the rare occasion. To fix it I removed the event.subscribe('auth.login') and make a facebook button that called the following function to check login status before subscribing to the auth.login even. Here is the function:
function check_login_session(){
FB.getLoginStatus(function(r){
if(r.session){
window.location = '/process-login.php';
}
else{
FB.Event.subscribe('auth.login', function(response) {
window.location = '/process-login.php';
});
FB.login();
}
});
}`
I had the same problem, I guess that you are using the scripts provided by facebook. In that case you have a function associated with the window.fbAsyncInit event. This happens everytime that the page is loaded.
At the end of this method you have the code:
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
The function statusChangeCallback verifies your user's facebook status (connected, authorized, or unknown). Here, if the user is "connected" you log him into your site. Well that's the problem, you are always trying to log the user in with facebook.
This must only happen on click, so you should erase those lines
hello dear I think you have made your question so confused. Your question is not stating what actually do you want. As for as I have understood I think you want to connect the user to you site through facebook connect and you want when user clicks on facebook logout, it automatically logouts from your site.
if my understanding about your question is right then simply let the user to login through facebook and do logins in your system in FB.Event.Subscribe event.
Use the following code for login button
<fb:login-button perms='email' autologoutlink='true'>
When user will allow your his facebook account to connect with your site
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
FB.init({appId: "Your APP ID",
status: true,
cookie: true,
xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
// Send here parameters that logins to your system through your website login system
} else {
}
});
FB.Event.subscribe("auth.login", function(response) {
window.location.reload();
});
FB.Event.subscribe("auth.logout", function(response) {
window.location.reload();
//Send the Parameters that logouts user from your website through your website logout system;
});
};
(function() {
var e = document.createElement("script");
e.type = "text/javascript";
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
e.async = true;
document.getElementById("fb-root").appendChild(e);
}());
and put the above whole code right after your <body> tag
If You have:
FB.Event.subscribe('auth.login', function() {
fbLogin(this);
});
Try to comment it /* fb.Event..... */

How to publish to my own page's wall on Facebook

I just can't find out how to do this.
I'm building a website in scala (on google app-engine) and I made a facebook page for it and created a facebook application. All I want to do is to post to my own page's wall. I don't want to use java facebook api, 'cause I think it's way too much to do such a simple thing, but I really can't find a simple way to do so.
Is there a "low level" facebook api?? something simpler that works on posts and gets like twitter api for example?
Or any idea or alternative way to do so will be appreciated.
Thanks!
Facebook has an API that you can use, but it isn't quite as straightforward as the Twitter API. It would be a bit of overkill to write in support, unless perhaps you are prototyping something for someone else to use.
For an individual case, you might be best served by using Posterous- if you setup a Posterous account linked to your Facebook Profile, emailing facebook#posterous.com with the sender set as yourself will likely be the easiest way to post content to your wall. With this, you can use any SMTP email-capable library that supports either HTML emails or attachments. An added bonus is that you can also cross-post to twitter and a number of other places from Posterous by altering the destination Posterous email.
Incidentally, Posterous also has an API too, but I don't remember off the top of my head if you can redirect where posted materials are sent through the API. I've only used it for image uploads, myself.
Here is a strait forward out of the box wall feed example using Javascript SDK
SDK connection, just change the appId to your Applications own ID.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
if (window!=window.top) {
FB.Canvas.setAutoResize();
}
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Post Script, notice the to: parameter, change this to the page you wish to post to. You can edit all other fields as needed.
<script language="javascript" type="text/javascript">
//<![CDATA[
function feedthis() {
FB.ui({ method: 'feed',
message: 'Testing Feed',
caption: 'This is the Caption value.',
name: 'Testing JS feed dialog on ShawnsSpace',
link: 'http://shawnsspace.com?ref=link',
to: '391793380398',
description: 'Testing property links, and action links via Feed Dialog Javascript SDK',
picture: 'https://shawnsspace.com/ShawnsSpace.toon.nocolor..png',
properties: [{ text: 'Link Test 1', href: 'http://shawnsspace.com?ref=1'},
{ text: 'Link Test 2', href: 'http://shawnsspace.com?ref=2'},
{ text: 'Link Test 3', href: 'http://shawnsspace.com?ref=3'},
{ text: 'Link Test 4', href: 'http://shawnsspace.com?ref=4'}
],
actions: [
{ name: 'Shawn', link: 'http://ShawnsSpace.com'}
]
});
};
//]]>
</script>
<button onclick="feedthis();">Post to Wall</button>
There are two steps required to do this:
Create a custom Facebook App and add it as a tab to your page
Set this newly added tab as the default when a new user visits your page
Details:
Create a custom Facebook App and add it as a tab to your page
This step is tricky but manageable for an average HTML programmer. To illustrate it best, I will point to a great tutorial on this:
http://how-to-create-facebook-app.koliber.com/
Set the tab as default
As the admin, go to your page
In the upper-right corner click on "Edit Page"
Under the heading "Default Landing Tab", select the tab which
contains the application you created earlier.
Well, I found there is a REST-like api:
This means that our Facebook method calls are made over the internet by sending HTTP GET or POST requests to the Facebook API REST server (http://api.facebook.com/restserver.php) . Nearly any computer language can be used to communicate over HTTP with the REST server.
Documentation here: http://wiki.developers.facebook.com/index.php/API