There are some Blogger gadget for sending reader to a random post, but they are gadgets, you need to put them into layout. Sometimes, it might not look good, especially you have a custom template.
For me, I am not fond of such thing, so you won’t see this on my blog, but it’s easy to code. Here is a quick result:
And the code
<script> /* Simple Random Posts function for Blogger * Copyright 2012 Yu-Jie Lin * Licensed under the MIT License */ function blogger_random_post(){ // You can replace the value with your blog ID var blogID = $('#blogID').val(); // for example: // blogID = "3803541356848955053"; var BLOGGER_POSTS_API = "http://www.blogger.com/feeds/blogID/posts/summary"; // appending necessary parameters BLOGGER_POSTS_API += "?alt=json-in-script&max-results=1&callback=?"; // replacing blogID with value BLOGGER_POSTS_API = BLOGGER_POSTS_API.replace('blogID', blogID.toString()); $('#btn-blogger-random').text('Tossing dice...'); // retrieving posts count $.getJSON(BLOGGER_POSTS_API, function(data){ var posts_count = parseInt(data.feed.openSearch$totalResults.$t); // index is 1-based var index = Math.floor(Math.random() * posts_count) + 1; // retrieving post link $.getJSON(BLOGGER_POSTS_API + '&start-index=' + index, function(data){ $.each(data.feed.entry[0].link, function(idx, link){ if (link.rel == 'alternate') // redirecting document.location.href = link.href; }); }); }); } $(function(){ $('#btn-blogger-random').click(blogger_random_post); }); </script> <label>Blog ID <input id="blogID" value="3803541356848955053"/></label> <button id="btn-blogger-random">I'm Feeling Lucky »</button>
It is not quite efficient for retrieved data from Blogger API, it makes two requests, one for posts count, another for the random post’s link. Blogger will send a huge list of labels if your blog has a lot of labels. However, it is still not too bad.
It only requires jQuery library and you can pretty much put that button anywhere you like with CSS. Even use an image or text line, etc. That’s something gadgets can not give you. Of course, you need to know one or two things about webpages.
If you are interested in putting this into your stuff, feel free to leave questions in comments if you have any problems.
Hi!
ReplyDeleteI'd like to know how you make this script works with AJAX on blogger?
Thanks
I am not quite sure what you are asking. Could you be more specific with more details?
ReplyDeleteWhen I click on your random button, there's no "blank screen" so I supposed you used AJAX on your blogger, no?
ReplyDeleteI'd like to have the same effect on my blogger! It could be great!
I am not sure what "blank screen" is. But I would briefly explain what's behind that button.
ReplyDeleteWhen you click on the button, the JavaScript behind it makes a request to Blogger API v2 to get the total number of posts. Then it makes another request with specific index, which is a random number between 1 and the number of post. So, it gets the random post's URL, then open it.
The transferred data is JSON, and made possible to be retrieved via JSONP.
I saw you blog and you didn't use the original code, and I don't know why you add $.Ajaxify, which only seems to cause strange behavior. The "blank page," perhaps?
Hope this helps.
Thank you very much for your answers.
ReplyDeleteI put your original code but the "problem" is still the same.
On my blogger, you can navigate through pages without experiencing flickers or blank screen.
But when I click on my random button (Aléatoire) or yours, the page refreshes.
On your blogger, I can click on your random button without experiencing flickers or blank screen. I wonder why?
Does your blogger is in AJAX?
We use same piece of code, so it's the same. There is nothing about AJAX in this regard.
ReplyDeleteThe page loads in the same fashion, that is the URL is opened like your type in address bar, sort of.
I don't see flickers or blank screen (the white page, which browser uses to clear out before loading new page doesn't count) on your blog or mine.
I think you may have some mis-perception on my blog. I would say that my blog is fairly lightweight, therefore page loads much faster. So it happens quicker when the page started to be shown to user.
Or maybe it's browser difference. I use Firefox. I notice that I used location to load URL, you may try the most common window.open method. Don't know why I chose that at the time. But I don't think that would change anything.
Ok! Thanks!
ReplyDeleteI was searching a way to "Ajax-ify" a random button on blogger because I have a music player on it and it's pretty cool to let it play during browsing pages so it could be even cooler with a random button!
Anyway, If you don't use Ajax on this blog you must be right!
Thanks again for your answers!
Cheers from France
If you had mentioned the music play, then I would've understood why you kept throwing out AJAX.
ReplyDeleteFirst, it's still nothing about AJAX when I talk about page loading. Which simply uses location or window.open. But the URL is retrieved via AJAX method.
Second, many people so like to imply AJAX with dynamic rendering, and usually AJAX = rendering for those people, though it's one point that whey data retrieved via AJAX is used. But it's not always. The retrieved data may never be rendered out.
When I was replying to you, AJAX only means the method of retrieving data and hence it's full name.
Anyway, the code doesn't replace page (which is what you want) but simply open the URL. It may be doable for what you want since Blogger does return the HTML, but it may require too much effects to ensure everything is correct.
Personally, it would be nice to have un-interrupted music, but I don't think it's really worth. For what's worth, I have seen this https://github.com/cshum/SCM-Music-Player/ I have not used it and not sure how it achieve.
The random script isn't what you should look into for the solution of your music issue. Any internal link clicking can also interrupt. Go check out the link and see how it does it.
Actually, it works pretty fine for the moment except for the random button.
ReplyDeleteYou can check it here : http://www.julienlussiez.com
You can navigate through the site using "Avant" and "Après" without any interruption. But it stops when I use random button.
I wonder why and I'd like random button works like any internal links on my blog.
I don't know how it is done and honestly ain't interested in it. But if you try your Comment link, it also interrupts.
ReplyDeletewait a second...
ReplyDeleteIf you replace
document.location.href = link.href;
with
$.Ajaxify.openURL(link.href);
It may work. (Note: I can't remember exact case in method name)
Thanks anyway. I tried to replace the code with your proposition but It still doesn't work.
ReplyDeleteI know that there's also the same problem with disqus! I hope I'll manage to do what I want one day!
I guess you don't actually possess knowledge of JavaScript. If you don't, although it may take time, but eventually you can figure out how it's done.
ReplyDeleteAnyway, one thing I can't figure out is why Disqus is one instance that interrupts. Take my comment loading button as example, it renders dynamically, it should have worked perfectly. The coding in your Blogger template isn't doing right with Disqus script.
I've already tried your code but the problem is that disqus load comments in relation to the active link and I don't know how to specify the article link when the page loads.
ReplyDeleteThe problem is that there are differents links leading to the same page.
Example: When someone comments on the home page, the link is "http://www.julienlussiez.com" but it will be different if user comment directly on the article like http://www.julienlussiez.com/2013/01/le-repos-du-fou_21.html.
You're right, I don't possess the knowledge of Javascript. I just try different script to do what I want but it's not easy.
A good practice is you should never let user to comment on the URL isn't the page even the content is shown on different page where user's at. It may cause confusion under some circumstance.
ReplyDeleteBut you can use disqus_url to specify the URL of the page when it's not the same of current URL. I have noticed a problem with mobile page if the embedding Disqus code doesn't deal with the issue.
Finally I found a way to do that! It's not perfect because sometimes user has to click two times on the link to show comments but now, there are just specific links for commenting.
ReplyDeleteWhen user clicks on "commentaires", the link changes to the article link and comments load.
There's just a little problem. Comments load quicker than the link changes.
I have something like this : Commentaires
Anyway, I prefer that even with this little problem.