Insert your FB js SDK code in your doc
window.fbAsyncInit = function () {
FB.init({
appId : '<your Facebook app id>',
xfbml : true,
version: 'v2.5'
});
};
(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'));
In your JS code, call the FB.ui method:
FB.ui({
method : 'feed',
link : 'http://your-url-here.com',
name : 'Share title',
description: 'Share description, yadda',
picture : 'http://image-url-here.com'
}, function (response) {
//Do something with the response
});
Twitter sharing is way easier than Facebook
//These are variables because in real life, you'll likely automatically create these elsewhere in your app.
var share_url = encodeURIComponent('http://whatever.com');
var share_text = 'Your share text with marketing speak in it, preferably.';
var url = 'http://twitter.com/share?url=' + share_url + '&text='+share_text;
function openWindow(url) {
let winWidth, winHeight;
winWidth = 600;
winHeight = 400;
var winTop = (screen.height / 2) - (winHeight / 2);
var winLeft = (screen.width / 2) - (winWidth / 2);
var w = window.open(url, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
return (!w); // opens in new window/tab if allowed
}
//Assuming jQuery is around, I mean, why wouldn't it be?
$(".my-share-link").on("click", function(){
openWindow(your_url_from_step_one);
});
Similar to Twitter. Example below is for posting a photo, but you can change the posttype param to one of the other types,
//These are variables because in real life, you'll likely automatically create these elsewhere in your app.
var share_url = encodeURIComponent('http://whatever.com');
var share_text = 'Your share text with marketing speak in it, preferably.';
var share_title = 'Your share title';
var post_type = 'photo'; //this can be any standard tumblr post types (https://www.tumblr.com/docs/en/api/v2#posts)
var photo_url = encodeURIComponent('http://your-photo-url.com/example.jpg');
var tumblr_url = 'https://www.tumblr.com/widgets/share/tool?url='
+ share_url + '&posttype='
+ post_type + '&title='
+ share_title + '&caption='
+ share_text+ '&content='
+ photo_url;
Just like for Twitter, open a new window on click
$(".my-share-link").on("click", function(){
openWindow(tumblr_url);
});