I'm struggling to create my first Facebook share feature on a website and the issue is a dynamically created link. I'm trying to share a referal link to (i.e. come checkout ecommerce site and get $20 back).
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Want $20 off Sailormade bracelets for summer? Shop now and thank me later',
link: '<?php echo $this->getReferrerLink();?>',
picture:'http://shop.sailormadeusa.com/media/wysiwyg/raf/refer_a_friend_static_block.jpg'
});
});
});
First timer on the Facebook app, and first timer posting here on stackoverflow. Go easy on me, and let me know if I can provide any additional information. THanks!
Related
I want to use facebook javascript sdk to share a page on facebook, and when a user share successfully I want to be able to track that on the current page without refreshing current page.
Now I have this code bellow, that opens the dialog successfully and share as well, but the popup doesn't close when I share or cancel. it only close when I use the cross in the top right corner.
Second problem is, I don't get notified when the user share successfully.
Note : if I use the code that fires the share dialog in $document.ready() instead of the click event on the open link, then it closes correctly, and call the attached functions as well where I console.log(response); but it has the same results for both successful share or cancel.
If I use feed dialog instead, the problem with closing the dialog stays, however the notifications is fine, I get notified back with the post_id, and that is perfect but I want to use share dialog not feed.
Bellow is all the code, sorry I couldn't make a jsfiddle, I tried but couldn't get facebook app work there.
Open
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="fb-root"></div>
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '905779996145989',
version: 'v2.3'
});
});
$('.share').click(function() {
/*FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/',
caption: 'An example caption'
}, function(response){
console.log(response);
});*/
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){
console.log(response);
});
})
});
</script>
I can post a photo IF I had the time to get an app approved. I can share a link that pulls in a photo from THAT page. The goal is to post a link that goes to X, but the image is hosted somewhere else.
Is this possible?
Yes, it's possible by using the JavaScript SDK and the Share Dialog. For example, I can do the following, which shares a link but with a custom image, name and caption. It basically overwrites all the OG data on my page.
function fb_share() {
FB.ui( {
method: 'feed',
name: "Facebook API: Tracking Shares using the JavaScript SDK",
link: "https://www.webniraj.com/2013/05/11/facebook-api-tracking-shares-using-the-javascript-sdk/",
picture: "https://stackexchange.com/users/flair/557969.png",
caption: "Tracking Facebook Shares on your website or application is a useful way of seeing how popular your articles are with your readers. In order to tracking Shares, you must used the Facebook JavaScript SDK."
}, function( response ) {
// do nothing
} );
}
$(document).ready(function(){
$('button.share-btn').on( 'click', fb_share );
});
You can do the same thing in PHP if you have the publish_actions permission approved by Facebook. Both would produce the following result:
Source
I have a YouTube video on my website and want to add Share button then users can share that video on Facebook. (Only video and not the whole site)
Here is my code, which doesn't seem to work:
<a name="fb_share" type="box_count" href="http://www.youtube.com/watch?v=5Fgsi9nw_ME" rel="nofollow" alt="Share">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
Any idea? Or any other method to add this button on the website?
Please refer in this .
First refer that link and its give copy then past some code.
Have you followed the instructions at the Facebook API page? Just follow the instructions there and you get nice clean code, which can be used to share the video URL and much more.
EDIT: Updated with send button, not like button
Create a button for you fb share e.g
$('ID OF YOUR BUTTON').click(function(e){
e.preventDefault();
FB.ui({
method: 'feed',
name: 'NAME OF YOUR VIDEO',
link: 'LINK OF YOUR VIDEO FROM YOUTUBE',
caption: 'YOUR CAPTION',
description: 'YOUR DESCRIPTION',
});
});
FB.init({
appId:'Application ID', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'apprequests', message: 'Here is a new Requests dialog...'});
How to redirect the user to my external website rather than the Canvas Page inside facebook?
There are a couple posts about this online that suggest making a dummy canvas page that sets
window.location.top = 'yoursiteurl'
... but this does not seem satisfactory to me. Facebook docs are wildly unclear about whether external website ("Facebook Connect") devs are encouraged to use requests.
I would like to allow users on my website to send invitations TO my website to their facebook
friends. What is the best way to do this?
Is there a simple snippet of FBML code I can attach to a button on my site?
Must the users first be logged into facebook?
In the developers documentation here:
http://developers.facebook.com/docs/reference/fbml/req-choice/
It says "Note: You can also send requests and invites through Inbox."
What does this mean?
Thanks.
In all honesty, the simplest way is to use Like. Add in the correct Open Graph tags and you will have your website published on their wall. By using Like, if the person isn't logged into Facebook, it handles all of that side of things for you.
EDIT
http://facebook-developer.net/2008/02/20/allow-your-users-to-invite-their-friends/
EDIT
You said you wanted to invite people to your page. Here is the code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'apprequests',
message: 'Here is a new Requests dialog...'});
</script>