Custom Facebook share button does not work - javascript

Can somebody explain why my custom Facebook share button does not work?
Whenever I click the button it the share window just does not show up.
I've tried it as html file on an actual webserver, and I've read everything in the facebook docs regarding the share button.
When using the same code provided by facebook it does work.
I do get this error though when clicking on the button.
This is my code. (Without the CSS because its a bit more, If you need it I can add it.)
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1"></script>
<div class="page-header">
<h1>Share Dialog</h1>
</div>
<p>Click the button below to trigger a Share Dialog</p>
<button class="fill" id="fb-share-button">Share on Facebook</button>
<script>
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: 'https://nureinberg.de',
}, function(response){});
}
</script>

You need to initialize the FB SDK,
This includes the FB.init function and having the <div id="fb-root"></div> element.
Check out this pen - it works just fine minus the App ID of course, but the popup portion works:
https://codepen.io/xhynk/pen/MVKerM
I also added the version ID to the sdk.js script (https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7)

Try adding a version and the App ID to the JS SDK source:
https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=<your-app-id>
Although, i would recommend using the asynchronous way to load the JS SDK:
https://developers.facebook.com/docs/javascript/quickstart
If you do not want to create an App, use sharer.php with a standard anchor-tag:
https://www.facebook.com/sharer/sharer.php?u=<encoded-url>

Thank you for all your answers. It works now with the following code.
I've also created a codepen for it.
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
cookie : true,
xfbml : true,
version : 'v2.7'
});
FB.AppEvents.logPageView();
};
document.getElementById('fb-share-button').onclick = function() {
FB.ui({
method: 'share',
display: 'popup',
href: window.location.href,
}, function(response){});
}

Related

magnific popup not working In shopify

I am working on custom magnific popup with shopify site.In my header.liquid file am calling the magnific popup content.
<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
popup content here.
</div>
Here i have added the script in theme.js.liquid
$('#open-popup').magnificPopup({
items: [
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
But It shows the following error
TypeError: $(...).magnificPopup is not a function
If anyone please tell me if am i miss something like js library files.
Thanks in advance.
I am found the actual problem for this issue.Some of the themes having default magnific pop-up library in theme.js.liquid file.
My new theme brooklyn was having magnific pop-up library already.So it was working fine now.
So check with theme.js.liquid file having magnific popup library present or not.
are you sure that jQuery is included? if so, is it imported before magnificPopup?
I had a similar issue even though the magnificPopup code was included in my theme.js.
Don't ask me why - after wrapping the magnificPopup call in the window.onload it started working.
<script>
window.onload = function() {
$('.open-popup').magnificPopup({
type:'inline',
midClick: true
});
}

Custom social share not working correctly

JSFIDDLE
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.google.com&p[images][0]=http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Audi-A1.jpg&p[title]=Sharing%20custom%20title&p[summary]=Custom%20text%20description">Share on Facebook</a>
When posted on Facebook, why won't the custom title,description and image work? It just automatically takes that from the link and ignore custom settings when posted on FB.
Is there any other working JS/Jquery solution for this perhaps?
The only way to force overwriting og meta tags is by using FB.ui with feed method which requires an app id and limits a lot of features like ability to choose post to friend's timeline, group or a fan page you administrate, however, I recommend using Open Graph as the best solution tags!
HTML
<div class="container">
<a id="shareOnFB" class="shareBtn">Share on Facebook</a>
</div>
JS
window.fbAsyncInit = function () {
FB.init({
appId: 'XXXXXXXXXX', // Your App ID
status: false,
xfbml: false,
logging: false
});
$('#shareOnFB').on('click', function (e) {
e.preventDefault();
FB.ui({
method: 'feed',
name: 'Retrogram',
link: 'https://www.facebook.com/Retrogram',
picture: 'http://i.imgur.com/SKwsQM2.png'
});
});
};
Fiddle

Facebook share not bringing picture

I am trying to make a facebook share button, using the Javascript SDK, and this is the code I am using:
$(function() {
$('.facebook-share').click(function(e) {
e.preventDefault();
FB.ui({
method: 'feed',
link: SOME_VALID_LINK,
picture: "https://netstars-production.s3.amazonaws.com/uploads/staging/image/artwork/185/Screen_Shot_2013-06-25_at_2.07.21_PM.png?AWSAccessKeyId=AKIAJPC2ZNIXV535QU6A&Signature=lKS8UdWSDd8k5iFJxCFThTJnp8Y%3D&Expires=1380217515",
name: "Screen",
caption: "Please star my Image on Netstars.",
description: "Some "
}, function(response){});
});
});
Everything is working as expected (link, description, name, caption), except for the picture (it is not being shown). If I copy and paste the link on a browser, the image is there.
What I am missing?
Thanks!
I've checked the live demo on Is there any Facebook share plugin? and the image sharing isn't working neither.
If you want to get the facebook share link, I would recommend you to use the Facebook Share Dialog that facebook offers. Try this,
<html>
<body>
<div>
<a href="https://www.facebook.com/sharer/sharer.php?u=www.google.com" target="_blank">
<img src="http://www.turtlegardens.org/blog/wp content/uploads/2012/10/FBShare.jpg" width="150px" height="60px"/>
</a>
</div>
</body>
</html>
JsFiddle :
http://jsfiddle.net/codeSpy/EYxTJ/133/
For more details :
https://developers.facebook.com/docs/plugins/share/

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

How to get Facebook Login Button To Display "Logout"

I apologize ahead of time if this is clearly documented somewhere on the FB developer site - but I can't find it (so please link me if appropriate).
I've implemented the FB login button on a website using GAE + Python. Here is the HTML:
<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'ad16a806fc10bef5d30881322e73be68', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Currently the behavior is - if I click on the "login" button, I am asked to allow the application access to FB. Which I then choose, "OK". But then the login button is still showing "login" and not "logout". How do I implement that? On the server or client side?
Its not documented on the FB SDK login-button page for some reason, but you can add the autologoutlink="true" attribute to the tag and it will show a logout button if you are logged in rather than just making the button invisible.
<fb:login-button autologoutlink="true"></fb:login-button>
Warning: it will ignore that tag if you are using custom text on the login button like
<!-- This will always display the button, whether you are logged in or out -->
<fb:login-button autologoutlink="true">Login To My Service!</fb:login-button>
Thanks to user "haha" the solution is:
1) Grab the Facebook Python SDK: https://github.com/facebook/python-sdk/tree/master/examples/appengine
2) Implement the HTML example: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.html
3) Update your main request handler and models: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.py
This has now been documented at https://developers.facebook.com/docs/reference/plugins/login/ . You may also want to check out onlogin for your callback.
Derek did not mentioned the HTML5 alternative which is he recommended way:
<div id="fbloginbut" scope="user_birthday" onlogin="checkLoginState();" class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>
The following page will generate the code for the login/logout button that you like the most:
https://developers.facebook.com/docs/plugins/login-button

Categories