I am trying to figure out how to add a facebook like button to all of the data that I am printing out from MYSQL. Right now it shows up under each data but the like button is the same for every data(If I like one, all of them are liked). Maybe there is away to connect each like button to a specific div id that will make the like button specific to that single data.
Here is what I have so far:
$msg=$row['msg'];
$id2=$row['msg_id'];
echo '<div class="box" id="'.$id2.'">
The like button
<div class="fb-like" data-href="http://bookdem.com/Bootstrap-Admin-Theme-master/update_delete.php" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
If anyone know if this is possible that would be great! Thanks!
Actually facebook is checking the 'data-href' (url ) attribute of the like button to identify separate like button. So if you want to make each like button separate you have to give seperate 'data-href' attribute for each like button.
You can see a working demo here:
<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=302752836532448&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"
data-href="http://bookdem.com/Bootstrap-Admin-Theme-master/update_delete.php"
data-layout="box_count" data-action="like"
data-show-faces="false" data-share="true"></div>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="box_count" data-action="like" data-show-faces="false" data-share="true"></div>
Related
Currently, I am using this code for login with Facebook link:
<?php Login With Facebook ?>
It works perfectly fine. But I am trying to use official login with facebook button
I placed this code, at the starting of 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/sdk.js#xfbml=1&version=v2.9&appId=15885xxxxx491691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And using this where i want the button to appear:
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
But when i click on the button, It pop-up a new window (to facebook), and then close itself within 1 sec. That's all.
Do i need to change the URL in Javascript or something?
I tried to change the URL in java script like this:
<?php echo'js.src = "'; echo htmlspecialchars($loginURL); echo '";'; ?>
But then even the login button do not show up
I am developing a website which has a Blog, with multiple articles and URLs.
I need to insert Facebook Like Button with auto-detect URL. Is that possible?
Tried this CODE, but shows an error in frontend.
<div class="itemFacebookButton">
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="<?php echo $this->item->link; ?>" data-width="450" data-layout="button_count" data-show-faces="false" data-send="true"></div>
</div>
Facebook has a tool for this or am I missing part of the question?
https://developers.facebook.com/docs/reference/plugins/like/
I have various pages like so:
www.mysite/directory/title?title=$title
So you can see that each page will be dynamic. As has been asked many times before I want to have my facebook like buttons generated for the dynamic url. I have notied that there were some changes to the like button at the end of last year and so have been trying to find recent posts about this.
The problem I have is either the Facebook error where it states it requires an absolute url or it simply refers the like button to what is setup with Facebook, in this case my login page.
I have tried the following:
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<script type="text/javascript">
var sUrl = "http://www.mysite.com/";
document.getElementById('fb').setAttribute('href', sUrl);
</script>
<div class="fb-like" id="fb" data-send="true" data-layout="button_count" data-width="60" data-show-faces="true"></div>
and:
<?php $url = basename($_SERVER['REQUEST_URI']);?>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
along with:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
FB.XFBML.parse(document.getElementById('fblikeblock'));
console.log(document.getElementById('fblikeblock'));
</script>
and not forgetting:
<fb:like></fb:like>
after invoking FB.XFBML.parse.
I am having no success, but as you can see have tried it with many methods now and am quite stuck. Any ideas?
Thanks!
EDITED:
The url is encoded, so today I tried the following - still the same result. Everywhere I have looked on Stack states that any of these ways should be working, but I am getting nowhere:
<div class="fb-like" id="fb" data-href="<?php urlencode($url);?>" data-send="true" data-width="450" data-show-faces="true"></div>
Any ideas?
use data-href for the like url.
https://developers.facebook.com/docs/reference/plugins/like/
I am using the Facebook Recommend button on my site and it doesn't appear to show up in FireFox browsers. It works in IE, Chrome, Safari, just not FireFox... I have it being shown next to a twitter button which shows up properly in all browsers. Any idea what could be happening?
Javascript:
<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=324704914260494";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Where it should display:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="fb-like" data-href="http://www.example.com/index/billdets.php?billnum=<?php echo $billnum?>" data-send="true" data-layout="button_count" data-width="200" data-show-faces="true" data-action="recommend"></div>
Like I said it works in every browser but Fire Fox... any idea? I tried turning on Fire Bug and I get this:
document.defaultView.getComputedStyle(a, null) is null
http://connect.facebook.net/en_US/all.js
Line 67
I have a feeling it could be that I am using Jquery and wowwindow to open this page in a pop-up window but not sure why it is only breaking in one browser.
I've added social media buttons on my sidebar using PHP and HTML syntax. However everytime I refresh the page, it takes 4-5 secs to load and during the last second it distorts all the context of the page, then it becomes normal and looks exactly the way I want it.
Is there a way to remove this time-lag and distortion of page?
Here 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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
And I've put this part of the code inside the body.
<div> <g:plusone></g:plusone> </div></br>
Tweet
<div class="fb-like" data-href="http://ph.one.un.org/omt" data-send="true" data-layout="button_count" data-width="800" data-show-faces="true" data-font="arial"></div></br></br></br>
Try and make it so you only have one request. I generally use AddThis for that kind of thing. It's pretty nifty.