Singpolyma

Archive of "Hack"

Archive for the "Hack" Category

Facebook Nofitications in GMail

Posted on

This script now integrates properly with both GMail and Google Reader. Reinstall and enjoy 🙂

“What?” you say, “You don’t use Facebook, Stephen, you’re so cool and geeky!” Ah, but unfortunately not all of my friends are, and I have been drawn in to the service. Mind you, I don’t spend hours reading the profiles of people I don’t know 😉 I do use it, however.

There’s one thing I’ve always hated about Facebook — the notifications system. Many too many emails flooding my inbox about what is happening, either that or I have to check the site regularly. No RSS on the things you actually want notifications of. Worst of all messages, the one thing you REALLY need notification of, won’t even send you an email.

The ‘official’ solution is to install the Facebook toolbar. I tried it, it’s nice, but I don’t use the service enough to warrant that screen real-estate OR that memory usage.

My solution is a Greasemonkey script. It integrates notifications of messages, group invites, event invites, and friend requests into the side of your GMail view. Install the script, go to GMail, click the Facebook logo and log in. For best results, check the ‘remember me’ checkbox (funny, you can’t have it remember you for logging in to the site, but for a third-party script you can…). Go back to your GMail and click the link that appeared where the Facebook logo used to be. Voila. If you checked the box, next time you go to GMail it should just display the notifications without intervention from yourself.

Die email notifications!

Userscripts.org entry

Static Pages in Blogger

Posted on

This is a long-standing feature/hack request from much of the Blogger community. Pages that are not posts. This hack is a little messy and not the be-all solution, but I feel it is mature enough to publish as a start.

The pages are all addressed as http://yourblog.blogspot.com/?page=pagename

As always there are multiple options for this hack, but the basic starting is the same:

  1. Go to Google Pages (you’re on the new Blogger, you have a Google Account) and create the page you want.
  2. Click the ‘View live’ link from the Google Pages editor (after publishing the page)
  3. Note the URL in the location bar / address bar, you will need it later

You will need to add this code to the <head> section of your blog first time only, subsequent pages you can skip this:

<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2999987' type='text/javascript'/>

In code that follows, replace the red pagename with the what you want used as pagename in the URL (See above) and the red URL.

If you want to just redirect to the other page (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’redirect’
};
</script>

If you want the other page superimposed in an IFRAME (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’iframe’
};
</script>

If you want the other page superimposed (example) use this code:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL
};
</script>

If you want the other page included in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL
};
</script>

If you want the other page included as an IFRAME in a DIV so that it fits better into your page (you must style the DIV so that it works well. The example simply styles it to fill the page), use this code and put a DIV in your code with an ID the same as pagename:

<script type='text/javascript'>

//make sure the WidgetData object and staticpage section are defined
if(typeof(WidgetData) != ‘object’) WidgetData = {};
if(typeof(WidgetData[‘staticpage’]) != ‘object’) WidgetData[‘staticpage’] = {};

WidgetData[‘staticpage’][‘pagename‘] = {
‘url’:’URL‘,
‘type’:’iframe’
};
</script>

Microsummaries in Blogger

Posted on

I recently learned of the Microsummaries feature of Firefox 2.0 from Aditya.

Basically, when you bookmark a site that supports it there is an option to have Firefox automatically pull in the title of the most recent article (or similar) as the title/label on the bookmark. Like simplified Live Bookmarks. So I created a quick hack to let us generate these with Blogger. If you have marked up your blog with hAtom put this in your <head> section:

<link expr:href='"http://xoxotools.ning.com/extract_by_class.php?xn_auth=no&amp;amp;class=entry-title&amp;amp;url=" + data:blog.homepageUrl + "&amp;amp;_microsummary"' rel='microsummary' />

Otherwise use this code, which should work for 90% of new Blogger blogs:

<link expr:href='"http://xoxotools.ning.com/extract_by_class.php?xn_auth=no&amp;amp;class=post-title&amp;amp;url=" + data:blog.homepageUrl + "&amp;amp;_microsummary"' rel='microsummary' />

Asynchronous Peek-a-boo Comments

Posted on

I have made some minor, optional changes that just make the code cleaner. I have removed support for my old comment photo hack from this code. I have added support for my new comment photo hack. Please re-install if you are going to use the new hack. Check out my casino website www.top10slotgames.com for how these codes work.

I have added the ability to limit the number of comments displayed (requested by kca) and fixed the Jose problem.

Many people have benefited from my peek-a-boo comments hack for the new Blogger. It has one serious downfall however. Loading all that extra data inline can be slow. This version of the hack is designed so that the comments are not loaded until after you click the link to display them. This fixes some minor issues and improves speed like no one’s business.

  1. Go to the layout on your BETA blog and select ‘Edit HTML’.
  2. Check the ‘Expand Widget Templates’ box.
  3. Paste the following code into the <head> section of the template:

    <script type='text/javascript'>
    //<![CDATA[
    var comment_form_template = '<div class="commentelem" style="clear:both">\n'
    + '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
    + '<div class="comment-poster">[[AUTHOR]]</div>\n'
    + '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
    + '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
    //]]>
    </script>
    <script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'/>
  4. Find the code that looks something like:

    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>

    And replace that second line with:

    <div class='comments' expr:id='"comments" + data:post.id'>
    <b:if cond='data:blog.pageType != "item"'>
    <script type='text/javascript'>
    document.getElementById('comments<data:post.id = 'none';
    </script>
    </b:if>
  5. Right below this, find the code that looks like <dl id='comments-block'> and just before it, insert <div expr:id='"commentsul" + data:post.id'> </div>
  6. Next, find the post-generating code. It will look start something like this:

    <b:includable id='main' var='top'>
    <!-- posts -->

    In this section there will be a block of code that looks something like:

    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>

    Replace it with this:

    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comments'/>
    </b:if>
  7. Find the post template section, which starts something like this:

    <b:includable id='post' var='post'>

    And then find the link to the comments area, which looks something like:

    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>

    And replace it with:

    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <b:loop values='data:post.feedLinks' var='f'>
    <a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#comments","max comments");toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:loop>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
    </b:if>

    Replace the red max comments with the maximum number of comments to display asynchronously (or replace with false to display all comments).
  8. Click ‘Save Template’ and, if it appears, ‘Confirm & Save’, then view your blog.

To make my comment author photos and highlighting work with this you will need to make sure you have the latest version of that hack installed.

Peek-a-boo Widgets

Posted on

I now have eight variations of my original peek-a-boo widget. (See also peek-a-boo HTML and peek-a-boo scrolling.) I was then asked for yet another variant. I realised that keeping these strictly in posts is insane and disorganised. So I have added the variant (open links in new window) and created a wizard. Just follow the steps and generate the code for your widget, just the way you like it!

Peek-a-boo Widget Generator