I have two problems with my facebook comment box:
One is that when I post a comment, I can't view that comment from a different account.
The second problem is that my comment box looks different to the most other. For example the "Add comment" button and the number of posts (which should be at the top of the comment box) are missing. Also there is a button missing that says something like "show more comments" at the bottom of the comment box.
What I have done so far:
I have already made my Facebook App
I have placed the SDK with my App_ID
I have placed the code for the facebook comment box
Here's a pic of my comment box as it looks so far
I have googled this problem so many times but there was nothing helpful and I really want to solve this problem. I'd appreciate every tip!
For point 1: I post a comment, I can't view that comment from a different account
Only approved comments can be view by other users on particular post
For Point 2: Also there is a button missing that says something like "show more comments"
In comment box you have to provides "Number of Posts" to display, after reaching this limit it will display "view more comments" button at bottom
When you are logged in and posting any comments, it will not display "view more" comments button for your not approved comments
first create your app and use js code as facebook provide. and use that code as they mentions.
for ex. . place the below code after body tag. only replace the app id.
<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=XXXXXXXXXXXXXXX&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
after that the configration code of ur comment box should be like this.
<div class="fb-comments" data-href=" here is ur page url link" data-width="500" data-numposts="3" data-colorscheme="light"></div>
paste above code below your page..
thats all... done.
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.
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 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/
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/