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/
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.
so I've tried every solution to add a like button for my facebook page to by website (local, not published). But for some reason none of the solutions have worked. Here's the code I'm trying in a blank html file. And by blank I mean the head, title, and body are empty, other than the below code in the body section.
<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="http://www.facebook.com/ResumeBuildingVolunteering" data-send="false" data-width="450" data-show-faces="true"></div>
Because you're working on your local system the
//connect.facebook.net/en_US/all.js#xfbml=1
will not work. This is because the link is a "Protocol-relative URL" which takes the current protocol you're using.
So if you're working locally on a Mac, that URL will look for a file at file:///en_US/all.js#xfbml=1 which doesn't bring up anything. You will need to change the url to
http://connect.facebook.net/en_US/all.js%23xfbml=1&status=0
This script should be put at the bottom of your HTML, just before it's closing </body> tag. Reason being, when it's invoked it parses the page and renders Facebook's elements. If it's invoked prematurely, like in your case, this elements won't be found (because they don't exist yet) and therefore not rendered. Another option is to invoke the script only after the DOM is ready, using jQuery $(function(){...} or by other techniques, or use an async load of the FB page like explain here
I had the same problem. Try using the actual button div like this first:
<div class="fb-like" href="https://www.facebook.com/mypage"> </div>
Notice the s on https.
It worked for me.
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/