Add share on facebook button on webpage - javascript

I am trying to add fb share in drupal site i want to do it with javascript so I followed following steps
Created on app page through Facebook developer
There I have created app and got appid and code to put on my template following is the code
<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.5&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I am getting:
Uncaught TypeError: Cannot read property 'fb_app_id' of undefined this error in
console
Do I need to link any other js file something I am missing because of that share button not coming

Related

Append style to facebook like button

I'm trying apply a custom CSS to fb like button using this code:
$("#fblike").css("background-color", "red");
But isn't working, I'm getting this error: Uncaught TypeError: Cannot read property 'css' of null
Is there any way to solve this? Here is my code:
<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 = 'https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v3.1&appId=XX&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<span class="fb-like">
<fb:like id="fblike" name="fblike" send="true" width="450" show_faces="true"
href="https://www.facebook.com/cocacola/"></fb:like>
</span>
Also, I've tried using CURL to parse my facebook page to handle elements, but still asking to login, so I'm not able to apply the CSS in this case too...
Thank you.

Add Facebook SDK Javascript code to Wordpress theme, to show that website ina Facebook Tab

This may be a dumb question but i'm not such a hacker (yet! hehehe)...
I have successfully developed a Facebook App to display my website in a Facebook tab inserting the following code right after the "body" tag to an HTML site:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID_NUMBER',
xfbml : true,
version : 'v2.4'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
You can see it here: https://www.facebook.com/jogojogomx/app_1096645967031976
You can see the original HTML site at jogojogo.mx
BUT NOW, I want to do the same with a Wordpress themed website. I have tried to put it in different .php files of the theme with no success...
See this link: https://www.facebook.com/Cochinita.YUKTK/app_1024054777627795
Can anyone help?
Thanks in advance!

fb share button not displayed with ajax file

I used the following script in my web page
In body tag i used the following 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/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
In my blog listing I used the following in each blog:
<div class="fb-share-button" data-href="http://test.com" data-layout="button"></div>
Its displayed fine. After 10 blogs while scroll the remaining data are loaded dynamically by using the ajax file.
Here also I used the above script and Div share button. But it is not displayed with the ajax loaded file.
I googled a lot and I couldn't find a right solution. Please help me to fix this.
after ajax, call function FB.XFBML.parse(); to force the refresh/rendering FB share buttons

Share button on my web application

I want to add a button to share a picture. This is my code in tag 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/it_IT/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="my_image"></div>
Don't work. When i run my page.html it show an error:
GET file://connect.facebook.net/it_IT/sdk.js net::ERR_FILE_NOT_FOUND
However I WANT TO SHARE WITHOUT ID_APP!
Since you're testing this locally using a file path, "file:" is prepended onto the URL for the facebook script, hence the "file://connect.facebook.net". If you change the url to use "http:" or "https:" in the script, it should work as desired.

Uncaught Error: No version specified facebook sdk

I'm updating the like facebook button in my website I just followed the instructions in the facebook developer page, I'm getting the following error:
Uncaught Error: No version specified
that's located in the line 82 of the facebook SDK (sdk.js)
the code is the following:
<div class="fb-like" data-href="https://www.facebook.com/fan-page-x" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
<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=xxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
The like button appears on the page but I get the error in the console.
make sure you don't have another FB JS SDK initialization code in your page.

Categories