Passing custom text to new Facebook Sharer button - javascript

I need to pass some AngularJS variables from my application to the new Facebook sharer button, I'm using:
<div id="fb-root"></div>
<script>(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/es_LA/all.js#xfbml=1&appId=1438439249728371";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And this:
<div class="fb-share-button" data-href="http://mySite" data-type="button"> </div>
Where can I place my custom text to share in the dialog?
Thank you!

Sharer wont allow that. It'll fetch the og tags from the link and fill the contents in the dialog.
If you want to add cutomized description/picture/caption you should instead use Feed Dialog.
You can use the direct URL to invoke feed dialog:
https://www.facebook.com/dialog/feed?
app_id=1438439249728371
&display=popup
&caption={caption}
&link={link-to-share}
&description={description}
&redirect_uri={redirect-url-to-your-site}
You can check all available parameters here

If you use the Facebook SDK for JavaScript you have to use the parameter quote
FB.ui({
method: 'share',
display: 'popup',
href: window.location.href,
quote: "Your Custom Text"
}, function(response){});

Related

FB-Javascript API

I am implementing Facebook feed functionality in my website using 'FB-like-box' I was able to replicate it similar to that shown in Facebook developer site.
But when I again started testing the code(no change has been done) today I am getting additional link in the like box and I am not able to get rid of it.
You can see the additional links 'Like Page', 'Boom Post' in the screenshot. Can some one please advice me how to get rid of the additional links. Please find the code below.
<div id="fb-root"></div>
<script>
(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 = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=515052318562357&version=2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-container">
<div class="fb-like-box" data-href="https://www.facebook.com/NayaCompLtd" data-width="300" data-ajax="false" height="360" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false">
</div>
The Like Button is there because it´s a major element of the Like Box.
The "Boost Post" Button is only visible for you, and i highly doubt that you can remove it either.

Including facebook event on page throws errors

I'm trying to embed a facebook event on my website. I got the code from facebook with the 'embed event' button, but it keeps throwing errors: Invalid App Id: Must be a number or numeric string representing the application id., FB.getLoginStatus() called before calling FB.init(). and This Facebook post is no longer available. It may have been removed or the privacy settings of the post may have changed.
This is the code:
<div id="fb-root">
</div>
<script>(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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="#" data-width="466">
<div class="fb-xfbml-parse-ignore">
Post
by
User.
</div>
</div>
Note: I replaced all href's with "#" for the sake of my privacy :P
If your website is based on a Wordpress installation please double check your post page source code. If the <script> tag was stripped probably it's caused by the user's permissions. Try to embed a facebook post as Wordpress administrator and it'll work. In my case that was the stupid problem...

Send FB Private Message to multiple people using Facebook API

I would like to send private message to multiple people using FB API, but I want it to received by the recipients individually not as group message, this is the code given by fb:
<div id="fb-root"></div>
<script>(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="http://developers.facebook.com/docs/plugins/" data-colorscheme="light"></div>
this is how it looks like:
I found this code but it seems outdated or deprecated by fb
FB.ui({
method: 'send',
to: sendUIDs,
name: "xxx",
description:'xxx',
link: 'http://www.mysite.com',
});
what I want to achieve is make a fb message notif to my website users,
any idea guys how to achieve it? is it even possible?
thanks!
I only can do it with images. Send the picture to your self, click on the picture, on the bottom right click on forward. Facebook will show you a list of friends with boxes where you can choose the recipients you want to "Forward in separate messages"
P.S. You make want to take a screen picture of your text in order to "Forward [the message] in separate messages"
I hope it helps.

share button without app id

Can i have a facebook share button without an app id? I have a facebook page, not an app and no associated app.
i have a div
<div class="fb"></div>
and the js file
$('.op-blackfb').click(postToFeed);
var postToFeed = function() {
var share = {
method: 'feed',
u: 'http://mylink.goes/here'
};
FB.ui(share, function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
});
}
This used to work, but now it fails with an error in the popup dialog, i'm guessing after facebook changed the API. Does anyone know a workaround for this? I want to have a custom share button? I have the normal fb share button, but i want to have an image that doesn't break the design.
This works without an app id but has the standard fb button
<script>(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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<div id="fb-root"></div>
<p id='msg'></p>
<fb:share-button type="button" style="display:inline-block;" share_url="http://my.link/here"></fb:share-button>
Thank you,
How about a modal iframe? You can use facebooks sharer. You can use any button you want to open up the dialog. The problem is that this uses a facebook page, so you have to merge it into you design with some iframe or you must use a popup
https://www.facebook.com/sharer/sharer.php?u=[the-link-you-want-to-share]
Also facebooks documentation is also very well done
https://developers.facebook.com/docs/reference/dialogs/feed/

commenting in asp.net

Ok..so here's the problem..i want to have facebook commenting on my productsDescription page..there are many products so when we click on a particular product it redirects to the productDescription page with the itemID in query string..now what i want is all the products have there own specific comment box.Now when i use the below code , with different itemID in query string the same comment box opens.
For Eg: If a user comments on a mobile(www.tc.com/gyjd.aspx?itemID=55) , and then navigates to view a laptop(www.tc.com/gyjd.aspx?itemID=77) he sees the comments he gave for the mobile. But what i want is with different itemID in query string the comment box should be new.Hope am not confusing.
<div id="fb-root"></div>
<script> (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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="tc.com/gyjd.aspx" data-num-posts="5" data-width="500"></div>
I've solved that by doing a div called fbBtns.
Then I set it's innerHtml property on page behind:
fbBtns.InnerHtml = "";
Simply add the proper querystring to the data-href attribute:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString["itemID"]%>" data-num-posts="5" data-width="500"></div>
For VB.NET:
<div class="fb-comments" data-href="tc.com/gyjd.aspx?itemID=<%=Request.QueryString("itemID")%>" data-num-posts="5" data-width="500"></div>
You need to have unique urls for the page (Facebook ignores the query string). You could tell Facebook to use fake urls by setting the data-href to be something like "tc.com/qyjd/4" etc. With .net 4, you can easily set up page routes.
to do this as well.

Categories