I have integrated a Facebook Share button in my website. The one that you can generate here:
https://developers.facebook.com/docs/plugins/share-button/
But how can I tell it what title, message to show and what url to redirect to? It now all "tries" to automatically resolve this from the web page.
It uses the right title from the <title> tag. But the meta description tag is not working. And I also have no clue how to set a custom URL and image.
All I have now is:
This right below the opening of 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/nl_NL/sdk.js#xfbml=1&appId=19158xxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And this on a product detail page:
<div class="fb-share-button" data-type="button_count"></div>
How can I customize everything here?
You need to specify the og:title and og:description meta tags as per http://ogp.me.
Those are the tags that Facebook will initially scrape for the share info.
Alternatively you can use the javascript sdk and specify the title, URL, description, etc manually as described in the documentation
Related
I am trying to set up the comments box on my site.
I have created an app for doing that.
On site I have the meta code for fb app id
<meta property="fb:app_id" content="1000000000000000" />
inside the head tags.
And I have this piece of code for facebook:
<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=1000000000000000 ";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
At the right place of the page I have a div with fb-comments class. The comment plugin works BUT the comments are not shown at https://developers.facebook.com/tools/comments.
When I go to debug at https://developers.facebook.com/tools/debug/sharing
and insert there my page link I get some strange warnings saying among other things that
The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
But I have this meta tag with fb:app_id property!
What am I doing wrong?
Cheers.
I have implemented the Facebook comments plugin to a page on my site. In addition to this I would like to be bale to moderate the comments. I followed the instructions on the Facebook developer section and implemented as described. I wanted to use the inline moderation tool rather than create an app. So I placed the following meta data.
<meta property="fb:admins" content="533551342"/>
Where the content is set to my Facebook profile ID.
I have then placed the script code as per Facebook developer instructions.
<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_GB/sdk.js#xfbml=1&appId=672941899483225&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Once that is in place, I added the comments section to the site using the code instructed.
<div class="fb-comments" data-href="http://www.microspot.com/case-studies/boat_design.htm" data-width="540" data-numposts="10" data-colorscheme="light"></div>
So with all this in place the comments section shows and works, but the moderate link does not appear next to the number of posts text (which is what should happen according to face books documentation).
The web page is http://www.microspot.com/case-studies/boat_design.htm
Thanks in advance.
It seems the issue was not with the code but with Facebook re-indexing my changes. There is a tool on the Facebook developer page for debugging and indexing your changes.
Any update you make to the Facebook code on your webpage, especially the meta data, you should always use the following debug tool.
https://developers.facebook.com/tools/debug/
Simply paste your webpage link (should be a live page not local) into the box and follow the instructions each time you make a change.
<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_GB/sdk.js#xfbml=1&appId=672941899483225&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am using facebooks's share button, exactly as specified in https://developers.facebook.com/docs/plugins/share-button/.
I tried the HTML5 and XFBML versions, but both generate the link below, which returns http error 500 when the user submits. If I manually remove the app_id parameter (which I did not inform anywhere), it works perfectly.
https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&sdk=joey&u=http%3A%2F%2Fg1.globo.com%2Feconomia%2Fnoticia%2F2014%2F05%2Fministro-da-fazenda-diz-que-nao-vai-faltar-energia-no-pais.html&display=popup
I am using this from my company's intranet, to share a link from the company's external website.
This is my code:
<!-- Facebook -->
<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/pt_BR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button href="<SHARED_URL>" type="button_count"></fb:share-button>
<!-- <div class="fb-share-button" data-href="<SHARED_URL>" data-type="button_count"></div>-->
So where does this app_id comes from? How do I get rid of it? I want to use the button with the share count, therefore I wouldn't like to call sharer.php directly.
With the new "comments edge" implementation, does somebody know if I can let people to add comments to my website page using my own "add comment" form?
According to documentation you can publish a comment to any object_id (and an object_id could be a website url I think).
Couldn't you just use the Comments Plugin (https://developers.facebook.com/docs/plugins/comments), or do you need to create something custom by all means?
After a research, is not possible to use an external form to add facebook comments to a page, so we are using a "mix" with the facebook comments plugin to submit a comment, and our display comments view to show them. You can check it here: http://www.gemsmoda.com/p44026-ref-55.html (down bellow)
<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_GB/sdk.js#xfbml=1&version=v2.8&appId='your-app-key'";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://stackoverflow.com/questions/19050121/how-can-i-moderate-facebook-comments-posted-in-my-website" data-numposts="5"></div>
i need to add facebook comment to each of my Products page
i'm using asp.net
and my Products page url like this (mydomail.com/Products.aspx?id=5)
is there any way to do this
Similar to the Facebook Like button, the Facebook comments plugin is associated with a URL -- it's what makes it unique.
Since you're using an id parameter in your URL, simply pass in your URL to the comments plugin. That should make it so that every page has a unique set of comments.
For example, on products page 5 you could do:
<div class="fb-comments" data-href="<?php echo 'http://myurl.com?id=' . $_GET['id']; ?>" data-width="470" data-num-posts="2"></div>
You'll of course want to make sure that you've dropped in the Facebook Javascript SDK snippet (I'd recommend loading this into the top of your HTML body dynamically):
<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=336176363148369";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
There are other types of plugins that you can use (XFBML, IFRAME), and everything is documented here.
use
FB.XFBML.parse()
after your new facebook plugin