A user comments on the page, the comment is posted to their facebook wall. When another facebook user clicks the link to see the comment it links back to the page but with a massive string of numbers on the end.
http://canofclouds.com/thought/?fb_comment_id=fbc_10150505683457013_20914817_10150507783662013#55
The original url was: http://www.canofclouds.com/thought/#55
This is all fine so far though, until the user clicks a button to go to
http://www.canofclouds.com/thought/#56
Instead, it goes to:
http://canofclouds.com/thought/?fb_comment_id=fbc_10150505683457013_20914817_10150507783662013#f25e670a6c
Which is not good - because it doesn't exist. Ideally it would just go to http://www.canofclouds.com/thought/#56
Normally, when the user clicks the next button a flurry of javascript grabs the hash key (in this case #55) then adds 1 to it (to make #56 - yay) and executes an ajax call to grab the new content. This facebook stuff is making things a little complicated though.
Any ideas?
Edit: Even more ideally i could disable the 'fb comments id' altogether.
You shouldn't use hash keys to link to your page. You should use a canonical URL to do so.
There are a few questions here on stack overflow about how to deal with this.
The only way around it if you choose not to make canonical urls, is to do URL Rewriting at the network or web server level.
Related
Okay I do not know how to explain this to you, It may be just my internet, or maybe my site is slower, or they really have a technique for doing this.
If you visit Facebook, Reddit, Youtube, Twitter, and if you click on links or any actions on those websites, the url changes but the browser tab doesn't show any loading circle.
How do they do that?
I am pretty sure my website is fast enought and at times it loads even faster than the bigger sites, but mine shows the loading circle on the browser tab.
Okay so I found the answer. Here is the technique for changing the url without reloading the page.
Updating address bar with new URL without hash or reloading the page
How do I modify the URL without reloading the page?
I am still trying to figure out though how to redirect the actual page without reloading the entire page. I am guessing they are loading it via ajax or something similar upon url change. I'll update this once I figure it out.
Edit: I am currently working on this feature for my site. The technique is to use ajax to load the content based on the url. I'll update this thread more as I update my site with this feature.
Edit 2: Damn, you will probably face the same problem I had trying to detect the url change without using onhashchange. If so, here you go:
How to detect URL change in JavaScript
This literally took me 4 hours just to figure that one out.....
Edit 3: I have now integrated this feature on my site. You can check it at
Grandweb
It is quite simple, but lots of work in appending the content once retrieved via ajax. So here is the process:
I am using pushState(); to change the url without reloading the page.
var url = $(this).attr('href');
var split_url = url.split('/');
var new_url = url.replace('https://grandweb.net/','');
window.history.pushState("object or string", "Title", "/write");
Using 'mouseup' was a bad idea, I changed my mind.
I then have to trigger the first function using 'mouseup' to retreieve the content via ajax, and then listen to succeeding onpopstate() for the next ones, because some mouse actions such as Mouse 4 or Mouse 5 are bound to the browser's Back and Forward button, and does not trigger via 'mouseup'.
$(window).on('mouseup', function(evt) {
get_content();
}
window.onpopstate = function(event) {
get_content();
}
The first one is responsible for triggering the function on first try because onpopstate only listens only when the browser's history API is populated.
Using mouseup was a bad idea, basically, don't use it unless you really want to detect mouse action from anywhere on the document.
I instead use the anchor tags/links to trigger the first function for retrieveng content.
example:
<a class="dynamic_btn" href="website.com/post">Home</a>
then
$(document).on('click','.dynamic_btn',function(e){
e.preventDefault();
get_content();
});
Using onhashchange is possible IF you have hashes on your url. I do not use hashes on my url so basically onhashchange is useless in my use case, unless I do not know something.
After retrieving the contents, I append them via creating DOM elements to existing containers from the page.
This is much easier to do if you are planning to change few elements or containers in your pages. If you plan on doing this to change a full page layout, goodluck. It's doable, but it's a really pain in tha *ss.
Upon observing Facebook, I learned that they do not implement this technique in all of their links/features. It makes sense because this is harder to maintain most especially because most of the work here is being done client side. It is very nice though because the page doesn't load.
I have implemented it on a few 'essential' functions of my website such as the viewing of posts and returning to the homepage. I can implement it on the whole site, but I am still deciding on that. That is all, thank you very much for reading internet stranger.
I have just one trouble adding fb comments box in my site. I use kust one url and read the content of the site using js. I put in the head the init of my fb app but I have three post in the main page and I want one comment box for every post. To load the comments of my post I use ((myurl)){{post.id}} to make unique the comment box. This url dosen't exist. But show me up difference comment for every. But don't let me moderate.. I mean dont show the moderation tool. But if i change the href of the post to my url real. Show me the noderstion tool but the same comments in every posts. Any idea???
The page is by ajax bwcause is a radio station and need to listwn the station y all contwnt. There is any way to assign thw url "manualy" in thw api of fb?
Okay, I have seem similar questions around Stack sites, yet some of them were asked as far back as four years ago, so given the recent developments in HTML, jQuery and PHP, I'm convinced there are new workarounds.
Suppose I have a domain www.mysite.co.uk, which has an ajax that, once triggered, clears the default on-load content #0, and replaces it with content #1.
(This content can also be accessed by going to www.mysite.co.uk/1)
Then a user may trigger another ajax that will clear content #1 and populate with content #2.
This is where I have a problem. Because clicking the Back button will not send the user back to content #1 (in fact if there is no history, the Back button is greyed out).
What I want to do, is when user triggers an ajax that populates the page with content #3, I also want it to change the URL bar to www.mysite.co.uk/3, so this way the same content will load when the page is refreshed, instead of going back to the default content #0.
Hope this makes sense.
I know that www.asana.com do it, but not sure how.
I'm already developing grey hair by trying to sort this out.
Edit: I've seen some examples where they do that by #anchoring, or with a ?get_variable, but I'd rather do it by changing the URL-proper, like Asana.com does it.
You're looking for JavaScript's pushState() method in the history API:
Manipulating the browser history
Note: you can check compatibility with browsers on Can I use...
I have a simple form that searches through the 2000+ issues of a 3rd party webcomic. (Easy, it's like xkcd: http://url/number
That form is as easy as possible, is like this:
What number do you want?
User writes a number, clicks ok, and goes on the 3rd party website on a new tab
Then, my form asks a question: "Did you find that issue memorable? Enter the name here, and we will add it to the "best issues" in home page"
When the user will write the name of the issue, it is added to the database (pending moderation by me)
So, I supposed this design is the easiest and convenient that users can find.
Unfortunately, NONE of the users (maybe a 2% behaved correctly) will actually read what I asked. Some of the issues are offline, and gives a 404. On that issues users will write in the textbox a completely wrong title, and correctly capitalized!
It's like if i would name http://xkcd.com/627/ as "The Great Adventures of Jack Smith"
Users are from around all over the country, with different browsers, and have a different cookie.
I cannot believe that my users will not read what I ask, it is a WHITE PAGE with a button that disappears when clicked and a textbox.... easier than that???
Maybe i should put a checkbox with "I acknowledge that this form is for submitting memorable issues, not for fun"? Oh, who will read that?
Or maybe i could enable the textbox only if the user has effectively clicked the link?
Do your users understand your site/service?
I, for one, don't remember (web-)comics by their issue number, but by their content. When asked what xkcd comic number I would like to see, I'd probably input random numbers like 42, 123 or 666 or something.
After you make me guess for a number you ask me if the associated comic is particularly epic, then you ask me to do some data entry for it to put it on some kind of hall of fame. Honestly I do not understand what the logic is behind inserting titles for non existing comics -- are you sure they don't actually land them on the comic page for "The Great Adventures of Jack Smith"? The 2% of your userbase probably noticed the issue in the URL you generated for them, addressed it and typed in the right title. Or, maybe, they are typing the name of the comic they actually wanted to see instead.
There's a simple way to know. Have your mom use it and do not correct her if she makes mistakes. All mistakes she makes are your fault, not hers.
Without having the text of the labels you have put it's harder for us to second guess what's going wrong than it is for you.
Try it!!
You could try parsing the title of the page and obtaining the title yourself
OR you might want to request the username/handle.
Once the user enters the details and clicks SUBMIT, Show a confirmation page ( preview of how the submission will be listed). Make sure to include the username/handle as the person who submitted it (This brings a sense of responsibility to the guy who submits). Remember to keep a back button to allow the user to go back and make the necessary changes ans submit again.
Allow users to create profiles on ur site (they maybe as simple as stackoverflow's profile system. here's mine for example). Unless he is logged-in, submissions posted as anonyomous. Rest same as above.
NOTE: There might be a slim possibility that, U are be being targetted by spam / captcha bots. Hence the random text entries. still. do implement the above. A better UI never hurt anyone. Right??...
I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs