im trying to implement a facebook share function with a callback.
I have found this example script
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script>
function fb_share() {
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( response );
// ajax call to save response
$.post( 'http://www.example.com/', { 'meta': response }, function( result ) {
console.log( result );
}, 'json' );
}
} );
}
$(document).ready(function(){
$('.share-btn').on( 'click', fb_share );
});
</script>
</head>
<body>
<button class='share-btn'>click</button>
</body>
</html>
However it doesn't seem to work, although some people say it works for them. When I click the button nothing happens. Is there an error somewhere? Or maybe someone could direct me to another sample. Would be very grateful!! Cheers.
It seems like you are missing a few things. I took a quick look at the Facebook JS SDK docs here, and it seems like you're missing a source for the SDK and an FB init method with your app credentials. For example:
function fb_share() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.0'
});
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( response );
// ajax call to save response
$.post( 'http://www.example.com/', { 'meta': response }, function( result ) {
console.log( result );
}, 'json' );
}
});
}
Here is a JSFiddle with all that included http://jsfiddle.net/bn7F7/.
Hope that helps!
Related
Lately i have discovered chrome coverage report that I find very useful.
https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
The weakness of this tools is that it is single page scoped. But in version chrome 73 there is an option to generate json file for page that can be stored for further processing.
I would like to collect json data for multiple pages, than merge it and visualize in the context of single file (in my case stylesheet).
It would be great if I could receive json file directly through chrome (Extenstion?) API. So far i have found only this example: https://gist.github.com/krisselden/2487706bcbf37da26d4a89d0f74df768. But it seems to work only for browser remote mode.
Do you know is there any way to get coverage json report over chrome API?
Best regards
It Man.
Heres what i got so far (snippets only):
Got extension template form https://extensionizr.com
Inside background.js script have placed this raw method:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request.command);
if (request.command === "getCoverage") {
chrome.tabs.query(
{currentWindow: true, active : true},
function(tabArray){
var activeTab = tabArray[0];
console.log("tabid: " + activeTab.id)
chrome.debugger.attach( { tabId: activeTab.id }, "1.2", function() {
console.log("attached");
chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.enable", undefined, function(result) {
console.log("ProfilerStarted:" ,result);
chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.startPreciseCoverage", { callCount: true }, function(result) {
console.log("coverageStarted:" ,result);
setTimeout(function() {
chrome.debugger.sendCommand( { tabId: activeTab.id }, "Profiler.takePreciseCoverage", undefined, function(response) {
console.log(response.result);
});
}, 4000)
});
});
});
}
);
}
});
Inside browser_action.js:
document.getElementById("getCoverageSnapshot").addEventListener("click", function() {
chrome.extension.sendMessage({
command: "getCoverage"
});
});
And in browse_action.html:
<!doctype html>
<style type="text/css">
</style>
<button id="getCoverageSnapshot">Get Snapshot</button>
<script type="text/javascript" src="/src/browser_action/browser_action.js"></script>
When button clicked Profiler.takePreciseCoverage result can be recieved inside background.js.
Still looking the way to receive css coverage data...
Here's code flow, first is the login and it's work good, but after that i want to immediately call feed function, that's probably the reason why browser blocked it, is there any other way how i can do this? Its work good if the display is set to iframe, but i really want it as a popup. Tahnks.
Share
function
function fblogin() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', {fields: 'last_name, first_name, gender, email, id'}, function(reslog) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
postToFeed(reslog.gender);
}
});
});
} else {
//console.log('X');
}
}, {scope:'email'});
}
postToFeed
function postToFeed(gender) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
}
});
}
You have to call FB.ui dialogs directly on user interaction (= in the callback function of a mouse event). FB.getLoginStatus is asynchronous, that´s why (good) browsers block it.
Use FB.getLoginStatus on page load instead, and store the status. Or better: remove it, because you don´t need to authorized a user for the FB.ui dialogs. And in your code it would not make any sense, because you only use it after FB.login and even after an API call - so the user is surely logged in.
FB.login is asynchronous too, and trying to present a share dialog to the user immediately after login is not only annoying for the user, it´s also against the rules imho. I would count that as "incentivizing":
Only incentivize a person to log into your app, enter a promotion on
your app’s Page, or check-in at a place. Don’t incentivize other
actions.
Source: https://developers.facebook.com/policy/
New code:
HTML:
Share
JavaScript function "postToFeed":
FB.ui( {
method: 'feed',
display: 'popup',
[...]
}, function( response ) {
console.log( 'before',response );
if ( response !== null && typeof response.post_id !== 'undefined' ) {
console.log( 'done',response );
}
});
when firefox extension is active, following SDK script sends me active status of the extension. here is the script...
worker.port.on("getAddonStatus", function( data ) {
var addonStatus = [];
AddonManager.getAddonByID( "jid1-Ek4rsiwaZyfJnw#jetpack" , function(addons){
//alert('addon script');
if ( !addons ) {
addonStatus.push({
status : 'failure',
id: '',
appDisabled: '',
});
} else {
addonStatus.push({
status : 'success',
id: addons.id,
appDisabled: addons.appDisabled,
});
}
worker.port.emit( "addonStatus", addonStatus );
});
});
why is not send me any response when firefox extension is disabled? please help me...
When your restartless/jetpack add-on is not enabled, it is not running either, simple as that. I.e your code that would perform the AddonManager.getAddonByID call is not running either.
I would like to see best way of posting to Facebook from a HTML 5 game I will need to pull data from my javascript file to post to facebook I tryed adding.
FB.init({
appId: "309749382423000",
status: true,
cookie: true
});
function postToFeed() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://google.com/',
picture: 'http://google.com',
name: ' Run!',
caption: 'I just got a highscore of' + points2,
description: 'Try to beat my score!.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
This was added to my index file and it will not pull the var points2 that changes each time you play the game so would like some help with trying to add Post to facebook in html5 canvus
EDIT: wanted to post the full code The post to facebook works but the game is HTML5 so the javscript file keeps running in the game and the code above is in my index file that does not loop so it loads but will not run pull the "points2" var in to the facebook code. So real question would be how to add facebook post to canvus HTML5 game.
Assuming the user is already authenticated with your app use:
FB.getLoginStatus( function ( response ) {
if ( response.authResponse ) {
FB.api(
'/me/feed',
'post',
{
message: '',
name: 'Run!',
caption: 'I just got a highscore of ' + points2,
description: 'Try to beat my score!.',
link: 'https://google.com/',
picture: 'https://google.com/pic.png'
},
function ( response ) {
if ( response.id ) {
//success
} else {
//failure
};
}
);
};
} );
Working on a project that has a website and a Facebook page. They both reference the same SWF file and JS code that the SWF file uses to interact with the website/Facebook.
The custom Javascript action, which invokes the FB.ui() method for sharing, works so much in that the dialog/popup appears, however Facebook results with an error ("An error occurred. Please try again later."). I get this error in all browsers.
Using a stream.share method works fine, however the stream.publish is giving me grief on the website. What's notable is that the exact same code works within Facebook.
I am loading the FBJS SDK through the same methods on both sites (The Facebook page is an iframe that's hosted on the same server) and also loading the scripts for the pages in the same order.
function connectFacebook(score) {
// No score, share link
if ( score == 0 ) {
FB.ui({
method: 'stream.share',
u: 'http://www.example.com/'
});
// Has score, publish to wall
} else {
FB.ui({
method: 'stream.publish',
message: 'I scored '+score+' at Game!',
attachment: {
name: 'Game',
caption: 'Game caption',
description: 'I scored '+score+'! Play and share to win the prize pack!',
href: 'http://www.example.com/'
},
action_links: [
{ text: 'Game', href: 'http://www.example.com/' }
],
user_message_prompt: 'Tell your friends about Game'
},
function(response) {
if ( response && response.post_id ) {
//alert( 'Post was published.' );
} else {
//alert( 'Post wasn\'t published.' );
}
});
}
}
I found out what the error was. When connecting to the FBJS SDK on the website, I had a Page ID entered instead of an App ID.