Facebook Share button conflict with Facebook JSSDK. How to resolve? - facebook

I can't seem to get both scripts working. I am using the jssdk and fb.share to get facebook like box plus facebook share button. But they do not work together. Any idea why? How to fix this?
I have this in header:
<div id="fb-root"></div>
And this code in footer:
<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>
This is my Fb.share code:
<div class="shr-fb">
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
They make conflict with each other and I do not know how to resolve this situation.
Thank you.

Makes sense.
The facebook share is deprecated and no longer supported, as you can read in the docs:
The Share button has been deprecated in favor of the Like button, and
will no longer be supported. Please use the Like button whenever
possible to drive maximum traffic to your apps.
(reference: http://developers.facebook.com/docs/share/)
And:
What happened to the old Share button?
We deprecated the Share Button when we launched the Like button,
because the Like button improves clickthrough rates by allowing users
to connect with one click, and by allowing them to see which of their
friends have already connected.
(reference: http://developers.facebook.com/docs/reference/plugins/like/)
Instead, use the Like button and you won't run into conflicts.

Meanwhile, you can still combine both Like and Share buttons together with FaceBook JSSDK Api and the html snippet for that is;
<div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
</div>
It will display both the Like and Share buttons functioning as required.

Related

Facebook share widget creates broken WIDGET_LIKE_LOG_APP link

I created a Facebook share widget on my page. When I use the widget to share the page to my own Facebook account, I find that the box that gets created on my timeline contains a link "WIDGET_LIKE_LOG_APP".
When I click that link, it takes me to a page
https://www.facebook.com/games/?app_id=107599262613689
with the error message :
Sorry, WIDGET_LIKE_LOG_APP hasn't been approved for display in App
Center.
How can I prevent Facebook from creating that WIDGET_LIKE_LOG_APP link?
Code on my page to create the share widget:
<div id="fb-root"></div>
<script type="text/javascript">
(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/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="#Model.Url" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
Looking at your code it seems you are using the Like Button instead of the Share Button.
Anyway the problem is that you are not specifying an appId on the widget definition (on the js.src parameter). You can use the wizard on the Like Button page to get the specific code that you should embed in your page.
I reported this issue to Facebook. They confirmed this was a bug. They've now come back to me saying the bug has been fixed.

Like a specific post of the timeline of a Facebook page from an external website

I've some trouble with the Like Button. I would like to like a specific post like this one from a external website but it doesn't work:
https://www.facebook.com/236086869778323/posts/597301643656842
For this button I used the following code, which is given by Facebook Developers
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/236086869778323/posts/597302473656759" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
When you read the documentation about the Like Button it states
A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.
These pieces of content are external. That is the Like Button is intended to be used for webpages outside of Facebook to share in Facebook.
You will need to use Embedded Posts instead https://developers.facebook.com/docs/plugins/embedded-posts/

Facebook Send/Like buttons not working on my site page

When I clicked the LIKE or SEND buttons on my site for this link, I get this error:
The page at http://aftersqool.com/a?id=C217EE could not be reached.
Strangely, the page is loading without any issues. The page even has the og tags that Facebook requires.
Anyone know why Facebook is giving this error? What should I do to get the buttons working?
Thanks!
Gus Collazo
AfterSqool.com
You can’t use the Send Button if you’re using Facebook as a Page instead of a Personal Profile.
The Send Button only works with XFBML version of the Like Button; it doesn't work with the iFrame version of the Like Button, per Facebook’s announcement
One more important thing is to provide your facebook page's URL in send and like button. It will defiantly fix it.
If your facebook page URL is: http://www.facebook.com/aftersqool
put this code in it
/*put this code in body*/
<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>
/*put this code in site where you want to add it*/
<div class="fb-like" data-href="http://www.facebook.com/AfterSqool" data-width="450" data-show-faces="true" data-send="true"></div>
I could not get Smit Shilu solution to work. I had to remove xfmb=1 to get my buttons to work. Full solution here.
http://metadataconsulting.blogspot.ca/2013/09/facebook-likesend-button-not-working.html

facebook like button with message

Can anybody tell how is it possible to create a facebook like button with the option to add a message? example can be found here http://www.familycircle.com/style/beauty/hair/summer-hairstyles/
If user does not write anything as a message, the button behaves like normal like button. If user writes a message, it will appear on his/her wall. Thank you.
As Facebook says:
When will users have the option to add a comment to the like?
If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the iframe version of the button, users will have the option to comment if you are using the standard layout. If users do add a comment, the story published back to Facebook is given more prominence.
Like Button
that's the normal behavior of facebook's like button. You have the option of writing a comment or message, and here's how I do it, with HTML5
put this after the body tag
<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&appId=YOURAPPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
put this where you want to see the button
<div class="fb-like" data-href="http://someurl.com" data-send="true" data-width="450" data-show-faces="true"></div>
Or create yours here

facebook like box wont except "like" on WordPress site and FB login box keeps popping up

Any assistance will and is greatly appreciated. Thank you in advance!
I used code generated by Facebook Developer and inserted the code into this WordPress site page:http://www.stilehair.com/studio code is below. When I open the page it looks right, BUT when I click on the "Like" button a pop-up appears and asks me to log into FB (even though I am already logged into FB.)
The box shakes and asks me again and never excepts my correct log in info, Nor does it except the "like".
This happens on all my browsers, iphone and ipad.
All software is up to date.
I've cleared the Cache'.
Tried numerous attempts at altering the code and/or method of inserting box.
Ran it through the FB Debugger
Searched the boards for answers and no solution is working.
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(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-like-box" data-href="http://www.facebook.com/Stilehair"
data-width="292" data-colorscheme="dark" data-show-faces="false"
data-stream="false" data-header="false"></div>
I've researched several other questions with no results to help rectify my challenge.
Adding a like box seems like such an easy thing to do from all I've read on Facebook and Forums.
Thank you.
I used this code on my clients wordpress sites.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450" send="true"></fb:like>
the above code is working fine on all of my clients wordpress blogs. For example view any post page [link]