I installed facebook comments on my website. My website is a dynamic website and pages are like this www.example.com/page?id=54, www.example.com/page?id=67.
If I post a comment in this page: www.site.com/page?id=54, it also appears in www.example.com/page?id=67. The comments are not unique for a page, but appear in every page
i saw the question : Facebook comments, for each page.
The answer in this question is that the problem is because of the "?" sign.
It seems that "?" sign in the URL make it broken for the Facebook plugin.
And I need to change form of URl writing.
Because my website is 7 years old have incoming links to it, I don’t want to change the method of the URl writing .
is there another way to fix it?
Firstly, copy comment div and script from Facebook, paste it to your product details page:
<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=114215202075258";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and
<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="3"></div>
Finally, simply add this code:
<script>
$(".fb-comments").attr("data-href", window.location.href);
</script>
If you're using PHP this is the code which will request the URL of the current page and then link Facebook comments to it:
<?PHP
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
echo "<div class='fb-comments' data-href='$url' data-num-posts='10' data-width='470'></div>";
?>
It works if your dynamic content has only one query string (for example ?product=). If it has more query strings for the same page, for example &sort= for sorting options, then it won't work properly as the Facebook comment which would appear on sorting option ascending wouldn't appear on the sorting option descending, for example.
You can solve this part by assigning a base URL for that product and then showing the FB comments for that URL on all dynamic pages with that product. For example, you're requesting FB comments for the page ?product=13&sort=asc&type=34 even if &sort and &type are different on that page.
When inserting the widget to your page you add something similar to the following code:
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
You need to replace http://example.com each time for the new page, once with ?id=54 and another time with ?id=67 for each relevant page.
Hmm, I'm confused. You say the site is 7 years old and you cannot change it, but somehow you recently inserted the like plugin into an unchangeable web site. Now you want ways to fix this unchangeable website.
But, if you could change the website, here's what you're going to need to do:
Put in the required og meta tags into the <head> section of each web page as described on the like plugin documentation web site. You can do this programmatically via the query string parameter using your .asp coding skills.
Test/QA the OG meta tags are correctly specified at https://developers.facebook.com/tools/lint
Add the required html code for the plug in and ensure the href correctly and fully identified in the data-href parameter of the like plug
Test/QA the like button by viewing source on the page being sent down.
EDIT
Take a look at what Facebook sees for your url
http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fwww.winebar.co.il%2Fproduct.asp%3Fproductid%3D567%26CatCode%3D182
Notice the plugin code
BAD: data-href="http://winebar.co.il/product.asp?productid="
If should look like the URL in the user's browser bar:
GOOD: data-href="http://www.winebar.co.il/product.asp?productid=567&CatCode=182"
Related
I'm quite puzzled here. I have facebook comments on this site and I can see in the moderation section that comments are going through fine. However when I load the page on desktop (or tablet, we server the same version of the page to tablets) it says 0 comments.
If you load the page on mobile (or even simulate phone on Chrome), the comments show up fine.
I have no idea how to even start to debug this, any ideas?
Example page with comments: removed due to solved
Has anyone had a similar problem? I mean probably the problem is somewhere in the code, but I just can't pinpoint it for the life of me. I have all the FB meta tags that are needed, I have the
<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/sdk.js#xfbml=1&appId=<?php echo($options["theme"]["facebook_app_id"]); ?>&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and then finally the form itself
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="50"></div>
all these copied straight from the developer.facebook tools except the app_id (I have multiple sites that use the same code). I even tried to hard code the appids in place but that didn't help.
All help really appreciated.
edit: Thought that maybe it's just me and went ahead and installed Facebook Comments by Fat Panda plugin, but the problem persists. No comments on desktop, only works on mobile.
When I emulate a mobile device (I chose Google Nexus 4 at random) in Chrome, the data-href attribute of the <div class="fb-like"> element is set to
http://www.suomikiekko.com/2014/08/ilja-kovaltshuk-ei-nimea-jokereita-pietarin-skan-paavastustajaksi/
– same address as the article I’m viewing.
When I view the site in desktop mode however, the data-href attribute of the comments plugin is set to
http://www.suomikiekko.com/2014/09/tassa-on-jokerien-historiallisen-khl-kauden-kapteenisto/
– so that seems to be the URL to a completely different article. The URL in the address bar is still the first one though, and the content seems to be the same as in the mobile view as well.
And of course, different URLs mean different Open Graph objects that the comments are associated with.
I can not actually look at the source code when in mobile emulation mode, so that data-href value is only what I see in DOM inspector – but I would assume that it is not the comments plugin that messes with this, but rather that your site is doing some kind of desktop/mobile detection and delivering different HTML based on that. So I’d suggest you investigate further in that direction – try and figure out what could possibly make your CMS deliver a wrong data-href attribute when the page is viewed on desktop.
I have this code to make Facebook share, but this doesn't read my og meta tags. Putting in the Facebook debugger it reads fine.
<h2 class="caixacsstitulo"><%# Eval("titulo") %>
<div class="fb-share-button" data-href="http://www.novaonda.no-ip.info:8080/detalhe_noticia.aspx?id=<%# Eval("id") %>" data-type="box_count">
</div>
<asp:Image ID="Image3" runat="server" Width="32px" ImageUrl='<%# Eval("destaque") %>' Height="32px" ImageAlign="Right" /></h2>
You can access it here
Facebook officially deprecated the share button in favor of the like button earlier this year. A few days ago, I realized that the share button no longer displays on sites I manage. Trying to figure out what could be wrong, I checked those sites using a different browser and it was the same. Still in doubt, I used a different PC and even checked other websites just to be sure.
Across the web, a certain version of Facebook share button stopped working. The Share Button has been deprecated already a while ago but not yet completely dead. If it stops working on your website or blog, you only need to update your code.
Facebook deprecated the Share button on February 28, which means they no longer recommend its use in applications or on external web sites. Also, a certain version of Facebook share button was deprecated several years ago, and Facebook switched to serving the new JS SDK in its place on Monday, July 16. Perhaps the old one will be brought back to life later, but then I guess it’s time to upgrade to the new version. Support has already been dropped for it so there’s no point complaining to Facebook.
How to fix your share button
I prefer using the share button because it lets me share to my fan pages, unlike the like button which Facebook now favors. I found three fixes to this which I think should do the trick.
1. Using the official JD SDK version
Search for http://ogp.me/ns/fb#” just after it. The resulting code should lok like this:
"
If this is already there, you don’t need to do it again.
- In the body of your website where you want the code to display, paste this:
<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=YOUR_APP_ID"; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button type="box_count">
</fb:share-button>
Hey, make sure you change these parameters for the code to work:
* YOUR_APP_ID – You must create a facebook application for this code to work. Don’t know how? I explained it on steps 1 and 2 of this post.
* You can change box_count to button_count if you want a smaller button instead of the large one with counter.
Those who have copied the code and pasted on the web page we need to add the class attribute "class="fb-share-button" " to the div that will show the Share button. The automatically generated code from the Facebook is missing this attribute, and that is it does not display the facebook button.
Also, the button appears when the page is loaded or viewed from a web server. If you preview web page on the local computer the while designing it does not show up.
Third thing that you need to check is that there are no errors in loading the js "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"//
I'm using bellow code, works well for me
<script src="//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.8"></script>
using above code instead of Facebook share-button step 2:
<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/zh_TW/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I have added basic Facebook "Like/Share" buttons to a webpage, using code copied directly from the Facebook Developers page. There are 2 parts to the code: a javascript block and a div tag with a class of "fb-like" Heres the javascript:
<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>
And here's the div tag for where I want the buttons to appear:
<div class="fb-like" data-href="http://www.bethcake.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
Here are the problems I'm encountering:
When the webpage loads, I get 2 javascript warnings. The warnings refer to the connect.facebook.net source code, line 233, not any code I've written. They are:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
Also on page load, I get a php error (like.php.1:948):
Blocked a frame with origin "http://www.facebook.com" from accessing a frame with origin "http://www.bethcake.com". Protocols, domains, and ports must match.
This error is puzzling. First of all, I'm not using frames. Second, the protocols do match and there is nothing here about ports. Of course the domains don't match: I'm not trying to collect "Likes" for a Facebook page; I want to get "Likes" for an external website page. Am I missing something?
I ran the URL through the Facebook Open Graph Object Debugger. It brought up a number of warnings I don't understand. They are:
fb:admins and fb:app_id tags are missing.
og:title, og:type, and og:image are missing.
og:url, go:title, go:description, and go:image properties should be explicitly provided
Okay, fine. But where and how am I supposed to add these? I've looked through the Facebook documentation and searched stackoverflow, without success. If these are supposed to be added to the data-href string in the div tag, please give me an example.
I was getting the same javascript warnings as you mention in your first issue and adding an appId parameter to the URL in facebook code resolved both of them. So just change this line:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
to
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567891234567";
To get a facebook appId, go to:
https://developers.facebook.com/apps
Hope you have already solved this problem.
But if this is help for someone, this answer helps about the "FB.getLoginStatus()" called before calling FB.init()" -> https://stackoverflow.com/a/16593474
As #smohajer pointed above you need to add the appId but with the new SDK you need to do some small changes otherwise you'll see some errors or warnings:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1234567891234567&version=v2.2";
You'll have to upgrade before April 30, 2015:
https://developers.facebook.com/docs/apps/upgrading
Here is what worked for me (found my answer here http://developwithguru.com/solve-invalid-app-id-must-be-a-number-or-numeric-string-representing-the-application-id/)
Basically,
1)go to developer page
2)create new app
3)get id
4)apply id to your code..e.g(js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=16digIdHere";)
Since July 17 the old share button stopped working on all the websites I manage.
I've read reports by other users that are facing similar issues, but I was not able to find anything official.
Do you know if there is any official source available for this?
Update:
As of May 2020, the Facebook documentation doesn't explicitly mention support for /sharer.php URLs, but the snippets generated by Share Button page still refer to that path.
Some time has past since this first was asked but some new information from the Facebook documentation has given us the possibility to see some official "proof" that the sharer.php method of sharing links still works, is still supported and is alive and kicking.
The reference is this page of the documentation and a few examples are also given:
This is what the simplest use of the share dialog looks like:
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
And also:
You can point to this URL in a new window or a popup. If you use
JavaScript to pop open a new window, you can also refer to the URL of
the current page being shared as location.href. That gives you code
you can use on all pages:
var sharer = "https://www.facebook.com/sharer/sharer.php?u=";
window.open(sharer + location.href, 'sharer', 'width=626,height=436');
To summarize, there was indeed a period of time when the behavior of the sharer.php was unpredictable. It was widely accepted that the method had been deprecated and that it was not wise to use it. This has now officially been busted as an example usage of sharer.php was added to Facebook's documentation.
UPDATE #3 (June 2016):
It's gone again: There are no more references to the sharer.php in the documentation. Though you have the option to use the share dialog without integrating with the facebook sdk in any form. An important difference is the required app_id parameter. Here is one example from the docs:
<a id="facebook" href="https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer" target="_blank">share me</a>
UPDATE #2:
See #Lix's answer.
UPDATE #1:
As Sean pointed out (for this credit to him) you can use the FBML version of the share button. A code snippet for the FBML version:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en" style="overflow:hidden;">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8">
<title>Test</title>
</head>
<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&appId=YOUR_APP_ID"; // appId must be valid
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button type="button_count" href="http://www.foobar.com">
</fb:share-button>
</body>
</html>
NOTE: This version of the share button (like all current social plugins by Facebook) creates a cookie with the datr parameter which is a potential threat to user privacy. You should keep this in mind if you must follow privacy policies.
A code snippet for the sharer.php version:
<a id="fb-share" style='text-decoration:none;' type="icon_link" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=foo&p[summary]=bar&p[url]=https://www.foobar.com/&p[images][0]=https://www.foobar.com/thumb.gif','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)">
<img src="img/share.gif" width="62" height="18" alt="Share"/>
</a>
ORIGINAL ANSWER:
The Share Button has been deprecated already a while ago. It might be dead completely now, or just temporarily, only Facebook knows. Officially it is deprecated.
From the documentation:
What happened to the old Share button?
We deprecated the Share Button when we launched the Like button [...]
The code used here,
<a name="fb_share" type="button_count" share_url="..." href="facebook.com/sharer.php" rel="nofollow">Share</a>
<script src="static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
was deprecated several years ago, and Facebook switched to serving the new JS SDK in its place on Monday.
The official version of the share button is to use the JS SDK and to use
<fb:share ..... />
That said, we are now serving the new SDK in it's place, and I plan on bringing the old <a name="fb_share" ... tag back to life today :)
Sorry about this.
But maybe time to update to the new SDK?
So to sum this up, it still works if you do this :
<a target="_blank" style='text-decoration:none;' type="icon_link" href="http://www.facebook.com/sharer.php?u=URL-TO-SHARE-HERE"><img style="width:26px;height:26px;" src=".../facebook2.png"%>"/></a>
It will open the share popup that will close itself once published.
But everyone should move asap to the new "like" and "send" buttons...
I think this seems to be a good future-safe compromise, as taken from the fb docs:
Direct URL Example
You can also bring up a Feed Dialog by explicitly directing people to
the /dialog/feed endpoint:
https://www.facebook.com/dialog/feed? app_id=458358780877780&
link=https://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg& name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Using%20Dialogs%20to%20interact%20with%20users.&
redirect_uri=https://mighty-lowlands-6381.herokuapp.com/
You DO have to make an app to get an app ID to use in this method, but you DON'T have to get permission from the user before prompting them to post, and you can use any image you like.
On 18 July Facebook released an update - all posts made to the page via external application now get a Share button. Previously people used a couple of hacks to add Share button themselves (using sharer.php) but this should be removed now as all posts made via an application automatically get a Share button.
First they had deprecated the share button in favor of like button,(and though share continued working, as far as I experienced, it was buggy). But it seems, now (November 10, 2013) facebook lunched new share button, and it works fine again
check these links
https://developers.facebook.com/docs/plugins/share-button/
https://developers.facebook.com/blog/post/2013/11/06/introducing-new-like-and-share-buttons/
I'm trying to add a Facebook "Like" button and I'm using a free extension for it but it's giving me an error as they are not compatible with Magento version 1.5.
I'm trying to do it manually but a little help which I found was to get a Facebook developer code and paste in static URL etc.
...but I didn't understand that.
So can you kindly tell me how to do what I want? From where do I get which code and where to paste please?
Go to http://developers.facebook.com/docs/reference/plugins/like/ and obtain the proper code for your site. (It will generate iframe HTML code that you need to copy)
Determine where you want to show the like button, options are: all pages, product view, category view, etc...(your choice)
For example if you want it on product page, then you need to add the previously generated HTML to the catalog/product/view.phtml template.
If you want the url that needs to be liked to be fixed:
<iframe src="http://www.facebook.com/plugins/like.php?href=http://yoursite.com?other_params_go_here"></iframe>
If you want the url to be the current one:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $this->helper('core/url')->getCurrentUrl(); ?>?other_params_go_here"></iframe>
you need login Facebook account panel & create your own code for your website
then you can paste code in any block template .
if you can not template you can login magento admin panel to enable development mode
I have written a full tutorial here that will show you the best way to add Like Buttons and automatically populate fb Open Graph meta tags with your Magento product information for every product (or category pages) using best practice methods with either XFBML or iFrames.
tested with all versions of Magento.
http://blog.gaiterjones.com/magento-social-media-marketing-facebook-like-button/
It is always advisable to use an module.
There is a 3-in-one module available for Social sharing. i.e. Google+1 Button, Facebook LIke and Twitter Share.
you can check it at magento connect
http://www.magentocommerce.com/magento-connect/Modulesoft/extension/7258/google_1_plus_button_with_facebook_and_tweet
Hope the information is helpful
<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/sdk.js#xfbml=1&version=v2.8&appId=157602984730324";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"></div>
I added a Facebook plugin at a front page, see it here: http://www.boardcorner.se on the right side.
By adding a piece of code in the TinyMCE javascript it allows the Facebook iframe to be inserted by a standard copy & paste.
You'll find the piece of code needed here: Magento - How to allow certain tags (iframe, embed) in Magento's CMS editor?
Try this for product detail page
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=181097698614858&xfbml=1"></script>
<fb:like href="<?php echo $_product->getProductUrl() ?>" send="false" show_faces="false"></fb:like>