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/
Related
I try to make a customer voice survey, after i have made my survey, i want to add it into a marketing email. On the send tab inside customre voice i get options: Generate a direct link or code to the survey - embeded code, link or qr code.
I chose embede code, and get this code:
<script src="https://fefweafewacdnweu.azureedge.net/vdvwvwvwu/Embed.js" type="text/javascript"></script><link rel="stylesheet" type="text/css"href="https://fefweafewacdnweu.azureedge.net/fefweafewacdnweu/Embed.css" /><script type = "text/javascript" >function renderSurvey(parentElementId,FirstName, LastName, locale){var se = new SurveyEmbed("iu1XS1e8Q0GCKbaMfefweafewacdnweuSF10DpJRUMzI3MzRKWDFRTEg5M1BGRUZMME9FNzc3NS4u","https://customervoice.microsoft.com/","https://fefweafewacdnweu.azureedge.net/fefweafewacdnweu/","true");var context = {"First Name": FirstName,"Last Name": LastName,"locale": locale,};se.renderInline(parentElementId, context);}</script>
type="text/css"href="https://fefweafewacdnweu.azureedge.net/fefweafewacdnweu/Embed.css"
/>function
renderSurvey(parentElementId,FirstName, LastName, locale){var se = new
SurveyEmbed("iu1XS1e8Q0GCKbaMfefweafewacdnweuSF10DpJRUMzI3MzRKWDFRTEg5M1BGRUZMME9FNzc3NS4u","https://customervoice.microsoft.com/","https://fefweafewacdnweu.azureedge.net/fefweafewacdnweu/","true");var
context = {"First Name": FirstName,"Last Name": LastName,"locale":
locale,};se.renderInline(parentElementId, context);}
Then i follow this guide: https://learn.microsoft.com/en-gb/dynamics365/customer-voice/embed-web-page
That says i need to add also this code something like this:
<div id="surveyDiv" style="height: 400px">
<script>
window.addEventListener('load', function () {
renderSurvey("surveyDiv");
}, false);
</script>
</div>
Then i go over to my marketing email, and try to past this codes inside "html" code in the email, but then it stops. I do not get any data innside, i think the marketing "html" code will not take the script, because when i try to test, and look at the marketing email code again, the scripts are gone.
Hopes this give a good overview over what i try to do. Does anybody see something i do not see?
Thanks in advance.
I don’t think the script inside the div should be there. Try placing this part outside of the div:
<script>
window.addEventListener('load', function () {
renderSurvey("surveyDiv");
}, false);
</script>
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){});
}
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
I display a popup to ask confirmation of delete a record, the popup displays but with a "system message" like "the page at the address mywebsite show:" follows by my message "are you sure ....".
I want to display only my message 'Are you sure ?'Not the message 'the page at the address mywebsite show:' just above my message.
How can do this please ?
Thank in advance.
<img src="images/Cancel16x16.png">
The Title for the JavaScript confirm() is unfortunately unchangeable (See this SO question: Changing the default title of confirm() in JavaScript?) , That's the same for the changing any of the style & looks for it too.
To allow you to use common scripts such as callbacks, change of text or event changes etc. on JavaScript confirm()s. These better left for helpers such as jQuery UI Dialog (There are many others too) which uses <div>s to mimic the confirm() behaviour and provide much, much more control for a Web Developer.
<script>
$(function() {
$( "#userconfirm" ).on('click', function() {
$('#dialog').dialog({
title: "Your new Title"
});
});
</script>
<a href="php/Delete.php5?" id="userconfirm">
<img src="images/Cancel16x16.png">
</a>
<div id="dialog" title="Basic dialog">
<p>Are you sure?</p>
</div>
You can use jquery ui dialog for such purposes
You could able to use jquery-ui modal to perform this message instead of javascript's confirm().
The following link shows you how to get it from the official documenation of jquery-ui: http://jqueryui.com/dialog/#modal-confirmation
Edit
You are able to checkout this demo which is a modification from the official docs example:
http://jsbin.com/iBApeKe/2/
I had successfully implemented the pinterest pin it button on my site, but it has recently stopped working. Could anyone tell me why?
My website is http://www.lookbookcookbook.com and I am using the following code
<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
Looks like you have managed to sort out your issue?
If not this link may be helpful or to others that want to implement it in their Blogspot site.
http://www.way2blogging.org/2012/06/add-dynamic-pinterest-pin-it-button-for-blogger-blogspot.html