JavaScript - facebook save to facebook button
on 2016-04-20
JavaScript - facebook save to facebook button
2016 F8
Facebook release new function - save to facebook
Then we can use it now
Step 1
Go to facebook developer Save Button - Social Plugins - Documentation - Facebook for Developers
Step 2
Build or use facebook application
If you had facebook application can skip this step
If you build facebook application and you can get this code
window.fbAsyncInit = function() {
FB.init({
appId : '<YOUR APP ID>',
xfbml : true,
version : 'v2.6'
});
};
(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'));
Put it in your website
Step 3(Finally
Add <div class="fb-save" data-uri="http://www.your-domain.com/your-page.html"></div>
data-uri
is your current page url
You can use this js code dynamic add url
document.querySelectorAll('.fb-save')[0].setAttribute('data-uri', document.location.href);
Demo
Then it can show on facebook saved
JavaScript - custom facebook share button
on 2014-05-23
JavaScript - custom facebook share button
Facebook support share API to people and it is easy to use. But sometimes we need customize share button style in our web. We can use 2 way.
1. Link share api link
Simple way
HTML
<a href="http://www.facebook.com/share.php" class="custom">Share</a>
and then you can use CSS custom a
style.
But this only can catch current url to share to facebook.
2. Use facebook JavaScript SDK
This way is powerful
HTML
<div id="fb-root"></div>
<a href="http://www.google.com/" data-image="Article img url" data-title="Article Title" data-desc="Some description for this article" class="fb_share">
<img src="http://www.synermous.com/data/images/fb-icon.svg" alt="" width="50" height="50">
</a>
JavaScript
window.fbAsyncInit = function() {
FB.init({
appId: <your facebook app id>,
status: true,
cookie: true,
xfbml: true
});
};
(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));
function postToFeed(title, desc, url, image) {
var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
function callback(response) {}
FB.ui(obj, callback);
}
var fbShareBtn = document.querySelector('.fb_share');
fbShareBtn.addEventListener('click', function(e) {
e.preventDefault();
var title = fbShareBtn.getAttribute('data-title'),
desc = fbShareBtn.getAttribute('data-desc'),
url = fbShareBtn.getAttribute('href'),
image = fbShareBtn.getAttribute('data-image');
postToFeed(title, desc, url, image);
return false;
});
This way can customize share url facebook og information
href
= url you want share, must have link
data-image
= image you want show on facebook, if not value it can catch origin og
data-title
= title you want show on facebook, if not value it can catch origin og
data-desc
= description you want show on facebook, if not value it can catch origin og