Facebook share button code snippet - facebook

Does anyone know how to create facebook share button? I need it to be the horizontal version at about 15-20 pixels high. They seem to have dropped any documentation in favour of the like button but I would like both. I can only seem to find wordpress plugins but i simply need the code snippet.
Any help would be appreciated... thankyou
Glynn
Roco Clothing

if you want to do it using javascript sdk :
window.fbAsyncInit = function () {
FB.init({ appId: appId, status: true, cookie: true,
xfbml: true
});
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
$("#Pst").click(function shareWithFacebook() {
FB.ui({ method: 'stream.publish',
message: 'message',
user_message_prompt: 'message',
attachment: {
name: 'message',
caption: 'message',
description: ('message'),
href: 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg',
media: [{ 'type': 'image', 'src': 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg', 'href': 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg'}]
},
action_links: [{ text: ' Name ', href: 'http://www.destination360.com/europe/sweden/images/s/sweden-visby.jpg'}]
},
function (response) {
if (response && response.post_id) {
// Do some custom action after the user successfully
// posts this to their wall
alert('Thanks for sharing!');
}
}
);
return false;
});
<div id="fb-root">
</div>
<a href="#" id="Pst" onclick="return shareWithFacebook();" >
Share
</a>
if you want to do it using plugin and would you please mark it as answered :) :
http://developers.facebook.com/docs/reference/plugins/like/
you will find the code like that :
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=137344766349901&xfbml=1"></script><fb:like href="www.eslamsoliman.uk.cm" send="true" width="450" show_faces="true" font=""></fb:like>
change your link :)

The Share button is deprecated although still functional.
The current recommended way to implement sharing from a website is via the Like button or Send button (which is also usually paired with the Like button but works standalone).
If you must use the old share button for some reason, the documentation is no longer available on the Developer site, but there's a third party example here: http://www.wpcode.net/add-share-button.html/ (it should work on any site, not just Wordpress blogs)

Related

How can I change Facebook "Like" button (or perform "Like" action via API)?

Facebook has a great plug-and-play "Like" button, which I am using to let a user "Like" my company's official FB page (not an OpenGraph object or something on my company's web site, but http://facebook.com/MyCompanysFacebookPage).
This all works fine, but the "Like" button itself is quite small, so I'd like to replace it with a different graphic. Is this possible? And-- if not-- is it possible to do this "Like" action via the API? (It's fine if I have to ask the user for some kind of special permissions to perform this task, since I am already asking them for other permissions earlier in the UX flow). Thank you.
if its just a standard "like" button something like this?
http://jsfiddle.net/c7rAN/
(it will give you a error until you fill in the fields properly.)
html:
<div id="fb-root"></div>
<img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSsRdeyOrORG3mjpsal3tMEzG3hzIl6zkfNnTKm61hJ_h3TL3OQ" id = "share_button">
jquery/js
window.fbAsyncInit = function() {
FB.init({appId: 'vvv', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'nameit',
link: 'linkit',
picture: 'logo or whatever',
caption: 'caption',
description: 'desscription',
message: 'whatever'
});
});
});

How Can I Capture an Event When I Login / Logout from Facebook Comment Box?

Is there any way to capture a Facebook event when I login or logout from any Facebook social plugin, like comment box or like button? I want to refresh my page whenever a user logins into a Facebook plugin. Because when I login with comment box it doesn't show that I am logged in and so I can't use the "Like" button. But when I refresh my page it shows I am logged in to both plugins.
Here is my code:
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: 'My App ID', status: true, cookie: true, xfbml: false });
setTimeout(aaa, 6000);
FB.Event.subscribe("xfbml.render", function (targetUrl) {
$("#myh1").html("Facebook Loaded");
alert('edge.create');
});
FB.Event.subscribe('auth.authResponseChange', function (response) {
alert('The status of the session is: ' + response.status);
});
};
(function () {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
} ());
function aaa() {
FB.XFBML.parse(document.getElementById('fbDiv'), function () {
alert('I rendered');
});
}
</script>
<div id="fbDiv">
<div class="fb-comments" data-href="http://www.facebook.com/AiLiveCaptions" data-num-posts="2" data-width="470">
</div>
</div>
the way i see it, this could be the default behaviour when you are using two separate plugins weather they are of facebook or any third party website i.e.facepile/commentbox.
your browser needs to reload in order to update the session on page across multiple plugins on same page, just like the difference when you are open any mail id across multiple tabs with opening same id on different browsers.

redirect user after share facebook

i want to redirect users to a specific page after they share on facebook, i have found a good answer here at:
redirect user after facebook share and publish
here's the script
<script type="text/javascript">
FB.init({appId: "YOUR_APP_ID", status: true, cookie: true});
function share_me() {
FB.ui({
method: 'feed',
app_id: 'YOUR_APP_ID',
link: 'SHARE_URL',
picture: 'PIC_URL',
name: 'SHARE_NAME',
caption: 'SHARE_CAPTION',
description: 'SHARE_DESCRIPTION'
},
function(response){
if(response && response.post_id) {
self.location.href = 'SUCCESS_URL'
}
else {
self.location.href = 'CANCEL_URL'
}
});
}
</script>";
<div onclick="share_me()">Share</div>
but when i used the script ,there's no redirect at all, even if the user click "cancel"
please help me with this as am searching for a method like this since 1 week!
Try using another javascript function for redirecting like window.location = "YOUR_PAGE"

Adding a post-purchasing share following an order

I'm attempting to add a 'Share your order with your friends' option to our retail based website, and am following the faq based here: https://www.facebook.com/help/?faq=201527026558981
I have managed to manipulate the code as I think is correct, however in the FAQ answers the setup on the App is vague at best.
When testing in dev (on localhost) I'm receiving the following error:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.
In the basic settings of the app I have no idea what settings need entering around the auth domain, site url, canvas url etc - I'm new to the facebook dev side of things. As far as I can tell I shouldnt need a site URL, as am not using facebook login. Does the canvas URL need to be populated, and if so, does that mean I then need to create a new page for the content of this app?
The code I'm running is:
<script>
window.fbAsyncInit = function() {
FB.init({appId: '1111111111111', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
function stream_publish(publish_text) {
var publish = {
method: 'stream.publish',
message: publish_text,
attachment: {
name: 'xxxxxxxx',
description: (
'xxxxxxxxx' ),
href: 'http://www.mydomain.com',
media: [
{
type: 'image',
href: 'http://www.mydomain.com',
src: 'http://www.mdomain.com/image',
}
]
},
action_links: [
{ text: 'Buy Now', href: 'http://www.mydomain.com', }
],
user_prompt_message: 'Tell your friends'
};
FB.ui(publish);
}
</script>
Can anyone advise how this should be done and what I'm missing?
Many thanks
Piers
From the error message, you don't have mydomain.com setup in your app settings.

Load Facebook Sharer in iFrame

I'm just trying to load the facebook sharer page into an iframe which is in a positioned div with no success.
Here is the code I'm using for the iframe,
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here"></iframe>
When I view the page its blank and the iframe source is
<iframe src="http://www.facebook.com/sharer.php?u=http://www.website.com&t=Title Hoes Here">
<html>
<body></body>
</html>
</iframe>
If I view the url directly, everything appears properly.
Does facebook block loading the sharer in an iFrame? and what are my alternatives to have the facebook sharer appear in a modal window?
Thanks
Yes, Facebook pretty much blocks all loading of screens inside of iFrames.
If you are using Facebook connect there is some simple javascript methods you can execute to get a dialog on your page, and to boot Facebook will take care a lot of the work it takes to make the screen look nice.
See this link ( http://developers.facebook.com/docs/reference/javascript/FB.ui/ ) or use the code below:
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
If you are not using Facebook connect then really your only option to get that exact screen is to throw a pop-up.
Another option would be to use the like/send button plugin, this isn't quite the same functionality but is easier to integrate. http://developers.facebook.com/docs/plugins/
Cheers!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
The above line in the head.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: '',
link: '',
picture: '',
caption: '',
description: '',
message: ''
});
});
});
</script>