I added the following Facebook Like code in my blog.
But when I clicked on the button, it showed up a small dialogue window which looks like this:
http://www.badongo.com/pic/13928565
I don't want this dialog window. I simply want the count of like button to increase.
Someone please help me, thanks!
<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/all.js#appId=189257097820759&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="imobile.tw" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
In your CSS:
.fb_edge_comment_widget.fb_iframe_widget { display: none !important }
None of these CSS workarounds seem to be working as of now (December 2012), so I advise you to use a more reliable solution: Simply place the fb:like into a div with overflow: hidden. If the div will be small enough (just to display the Like button), it will work.
Put this into your html file:
<div id="fbLikeContainer">
<fb:like send="false" layout="button_count" width="70" show_faces="false"></fb:like>
</div>
And this into your CSS file:
#fbLikeContainer {
overflow: hidden;
}
If you check the official Like button reference on Facebook developers, particularly the section When I click the Like button, the popup window (or "flyout") doesn't show. Why?, you'll see that that's what Facebook suggests you to do (though unintentionally)
After reading the Facebook developer page, I think the new style of a URL "Like" includes the flyout / dialog. You could possibly hide the flyout with a div around the Like button set to the correct size and with the overflow: hidden CSS property assigned to it. The other option is to use the Like button with Facebook pages. This is called the Like Box, but again, only works with Facebook pages / URLs. Perhaps you could create a Facebook page for your site and have all the Like buttons link to that?
Here is the Facebook Like Box generator, which you can turn off most of the features to get just the Like button and not all the extra stuff:
http://developers.facebook.com/docs/reference/plugins/like-box/
Here is the Facebook Like Button generator, that has a flyout also, and they mention the flyout might get hidden although don't talk about it as though you might want to hide it:
http://developers.facebook.com/docs/reference/plugins/like/
Related
What do I need to do to get a FB like counter working for a website - not a FB page/app/anything else.
I've followed the dev guide here https://developers.facebook.com/docs/plugins/like-button
I've read the following questions & comments Facebook Like Button doesn't increment https://stackoverflow.com/questions/13211964/cannot-make-standard-facebook-like-button-code-work Like button action not showing on user's walls and others.
I've put this at the top of the page so it's just after the body tag when it's rendered
<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>
I've put this where I want the like counter to go (website name changed to avoid unnecessary accusations):
<div class="fb-like" data-href="http://mywebsite.com" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
Result:
Button appears as expected.
When clicking like a (appears to be) JS window appears asking to add a comment - cancel and comment buttons are disabled.
When I enter text, buttons are enabled.
Click comment
Like increments from 0 to 1
refresh page - counter resets to 0
Subsequent clicks flash up the JS dialog and it disappears and counter stays at 0 (can just about see that it flashes up 'You like this' with further comment box but disappears before I can do anything)
No message on FB user's wall to indicate any like or anything about the website
Do I need to create a FB app? I see some references to appId but not on the FB 'like' developer page.
Frustrated!
A dummy's guide would be appreciated.
You need to create an FB app at https://developers.facebook.com/ for the like button to work. Once you have created your app, make sure that you select your app in the Get Code window when creating your like button.
I have currently implemented a vertical social-share plugin bar similar to one shown here.
http://www.socialmediaexaminer.com/10-ways-to-add-facebook-functionality-to-your-website/
I have used the same code generated for the like button from Facebook. I am using the HTML5 code generated. When using the Chrome browser, the Facebook like button displaces from its position slightly when the back button is pressed. I am not sure what is causing this to happen and how to resolve it.
Used code for the Facebook like button:
<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=504480219635937";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
When I look at your source, I see that you are using tables(that could be a potential problem). At a normal page load the span width and height are set. After you click on the back button these properties aren't set(these will be automatically calculated).In normal situations this will work, but I guess the data isn't refreshed/reloaded when you hit the back button and so the width and height will not be recalculated. You could try to set data-width="122" data-height="20".
eg. <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-width="81" data-height="20" data-show-faces="true" data-share="true"></div>
or force by CSS:
.fb-like iframe {
width: 81px !important;
height: 20px !important;
}
Also read following article: Ajax, back button and DOM updates
Edit: After doing some research another possible reason why this happens is related to the cache of WebKit browsers(strange, because it works on my iPhone). The solution they provide is to disable the onunload function:
window.onunload = function(){};
See The Safari Back Button Problem
Probably fix : After some deeper investigation I found out that Chrome gives an error in the console: fb:like failed to resize in 45s.
Following code would be a temporary fix(fb:login_button failed to resize in 45s):
#fb_login_button {
width: 80px;
}
#fb_login_button span,
#fb_login_button iframe {.
width: 80px !important;
height: 25px !important;
}
Again, I'm not sure about this
Yup, this seems to be a long-documented problem (applying to other plugins like login) which Facebook weren't able to fix for the like button.
One fix suggested on the dev forums is a very reasonable one: set data-show-faces="false" but does nothing for me.
Apparently
When the bug is triggered fb js fails to assign the iframe (.fb_iframe_widget_lift) a width/height. As a result the iframe has an auto width/height of 300px/1000px.
Ideally this would be an easy bug to patch around, as we could give
the iframe a min/max width/height. However, since all Like button
clicks show the post comment modal, this solution is less viable. In
the case of the box_count button layout part of the modal is displayed
atop the button, therefore constraining the iframe size looks extra
janky.
I don't know how to use PHP (and it's blocked on the site I'm editing actually) but in case it can help anyone else here's the final comment so far (posted yesterday)
Use the iframe version of the code, which you can get here:
https://developers.facebook.com/docs/plugins/like-button/ You need
the Javascript SDK loaded as well.
On the parent page, you need to use PHP to capture and store in a
session variable the complete URL of the parent page:
<?php $fburl = (#$_SERVER["HTTPS"] == "on") ? "https://" : "http://"; if ($_SERVER["SERVER_PORT"] != "80") {
$fburl .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"]; } else {
$fburl .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]; } session_start(); $_SESSION['savedurl'] = $fburl; ?>
Then, make the code to show the button(s) in the iframe like this:
<iframe src="//www.facebook.com/plugins/like.php?href=<?php session_start(); echo $_SESSION['savedurl']; ?>&width&layout=standard&action=like&show_faces=false&share=true&height=20&appId=your-app-id-goes-here" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:20px; width:330px;" allowTransparency="true"></iframe>
Change "your-app-id-goes-here" to your own appID.
This works because Facebook's iframe code is now contained within your
properly sized iframe, and therefore has no choice but to fit and stay
where it belongs...
There are names like Nike on the dev forum and it's still getting updated so hopefully further resolution's on the way – just thought I'd provide links and the latest available info here.
Just today I noticed on our Wordpress blog that the Facebook iframe is showing up as a blank, bordered box in the middle of my page.
The problem is that when Facebook's JS injects the content, it ends up with a div:
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -2000px;">
...iframes here...
</div>
</div>
That "top: -2000px" is not enough to get it off of the visible screen, so it's stuck in the middle of my page.
Is there some way to fix this? I can do something hacky like hide the #fb-root element or shove it way off the screen. That's the one div that's actually in my code -- the rest, including the offending style attribute, are injected by FB's code.
My code just looks like:
<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>
<div class="fb-like" data-href="(actual URL here)" data-send="false"
data-layout="button_count" data-width="150" data-show-faces="false"></div>
Looks like Facebook fixed the bug, because the problem has disappeared.
I noticed this bug too. But isn't fixed yet.
This bug is not related to wordpress. I see the same behaviour in magento. When the placement of the facebook iframe is at the bottom of the page and the page is longer than 2000px, this occurs. That's also the reason I didn't mention it on any page.
Has anyone an idea how to fix this? I don't want to wait for a solution from Facebook.
Last week I noticed the same problem in a vBulletin Forum, but today I checked again and the iframes completely disapeared. The empty div "fb-root" still exists.
I too had this problem. I had placed inside an element with relative position and below my blog posts. But when I moved it right after the opening tag the problem was solved.
I currently have a view page displaying fields containing images or videos from each node. I also am utilizing colorbox to see each image and video.
My Goal:
Add a like button to each node on the view.
The post on facebooks wall needs to link back to the view page which (This is where it start to get complex) will dynamically open the colorbox (last on my priority list for now)
I have used http://drupal.org/project/fb_social which works wonderfully with views but that og:url is going back to http://localhost:8888/node/100. I can continue down this route but I need finer grain control of that url.
I also discovered this post: drupal views facebook like button
which is a little vague. If I simply add the like button code to a view customfield, all views will do is duplicated the button instance over and over. If I click like once on node/4 then all other nodes on the page are also liked...
I really like the Facebook social plugins integration module but out of the box, it points to the full node page. Any advice on how to customize that url? I even thought about using a Path Redirect module but i don't think its a viable solution.
Setup:
Drupal 6.22
Views 6.x-3.0-rc3
fb social plugins 6.x-1.0-beta9
Easiest way to do this is going to be by overriding the template for your specific view and you'll also avoid the added overhead of another module load. You want to add the Facebook like js code into the top of your page somewhere (ex. in the view header) (from: http://developers.facebook.com/docs/reference/plugins/like/)
<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/all.js#xfbml=1&appId=132294920190866";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then in the specific row template for each of your rows, add the output code
<div class="fb-like" data-href="http://localhost:8888/myurl" data-send="true" data-width="450" data-show-faces="true"></div>
For theming the row template, check out the views 2 theming guide:
http://drupal.org/node/352970
or try the semantic views module if you expect to be doing more theming or don't want to mess with template files:
http://drupal.org/project/semanticviews
I have a like button on each page in a wallpaper site. There is an option to edit the title of the wallpaper. Hence, the URL of the page changes as well, like it happens in Stack Overflow. In Stack Overflow, when the title of the question changes, the old URL is redirected permanently to the new URL. The same logic is implemented in my site.
The problem is, say if there are 10 likes for a wallpaper page
http://www.example.com/1/old-title-wallpaper
If the title is changed slightly to 'new title', the URL changes to
http://www.example.com/1/new-title-wallpaper
In the new page, the like count becomes 0. Is there a way to make the Like button detect 301 redirection.
The like button uses the og:url tag. On your new page you need to keep the old og:url value.
This means you are not giving an explicit url for the like button code..
Hence the FB server picks the current url of the page where the like button is placed..
Check the iFrame of like button and see that you mention the data-href there ..
Sample 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/all.js#appId=xxxx0&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://xxx.com" data-send="true" data-width="450" data-show-faces="true">
</div>
Link to Like Pluggin
http://developers.facebook.com/docs/reference/plugins/like/
Also, you can use Metadata tags to explicitly make the FB server pick the url as desired by you .. Use Open Graph tag og:url for that
See http://developers.facebook.com/docs/opengraph/