Well, I have implemented a very simple demo of the first steps. So far, the script only makes sure to add some extra text to the current selection when ever the mouse button is released (which is how most users select most text) and it only works in Firefox (tested in 3.6). Next steps include making the link direct to the actually selected content, record text copying in Google Analytics, add cross-browser checks etc.

The script is published under the same license as these ideas, CC-BY 3.0.

Why?

Copy-paste is another quite common way of interacting with websites and allowing people to easily spread the word about your website in a new way ensures you credit where such is due. Creating a full-featured jQuery-plugin from this should be fairly easy and then making sure it integrates with Google Analytics if present – and then we’re actually done.

What’s next?

Do with this idea whatever you like – expand, implement, trash or forget. Just remember, that if you use it in anyway make sure to attribute me according to the Creative Commons Attribution 3.0 License, that all these 365 Social Ideas are published under.

Related posts:

1. Social Traffic Analyzer – January 2010 Ideas
2. Comment On Everything – January 2010 Ideas
3. App Idea Store – January 2010 Ideas

It is a “simple” case of “click-jacking” and the site tricks you to click a Facebook share button, but disguises this as some other button. Please read on for full description.

UPDATE 2009-12-2: “Press the button or dog dies”/”Push the button or this dog dies” (located at pressthebuttonordogdies.com, but don’t go there) is a new such site. The target website is “thisblogrules.com” and the measures used are a little different but all in all the same anyway.

Furthermore, I have used bit.ly for tracking how much these links have been used so far on Facebook – it is pretty inflicting: The “hot” girl has been shared almost 59,000 times and the poor dog has been shared 5,309 times as of this writing. You can see the direct stats from the Facebook link.getStats API here: Somthing Hot and Or Dog Dies

The original post looked like this (taken from my own feed):

Don't go to this page if you see this post

The page it linked to was http://3dvv.com/somethinghot/ (don’t go there, nothing to see) and looks like:

The page tricking you to share the link

When you press the “button” you actually press this (opacity on iframe set to 1 instead of 0):

The real button that you actually press kind of looks like a Facebook button, right?

The trick here is, that they have used the layout of this page about sharing the link (safe to go to, just don’t actually press the share button): http://www.facebook.com/share.php?u=http://3dvv.com/somethinghot/. Then, they included this page inside an iframe that was offset the right amount negatively to the left and to the top, to leave just the share button visible in the corner here (no need to visit): http://3dvv.com/somethinghot/ngr.php, which looks simply like:

How to only show the share button by iframing the share.php page

If we on this page remove the constraints, we can see the whole bottom corner of the page like this:

The rest of the share cutout with the button in the corner

Well, this is not all. In order not to have the page simply redirect to what facebook normally would after having shared a link, this page with only the share button visible is wrapped in another iframe, that steals the redirect Facebook creates and make their own redirect to the actual target (porn) site.

All in all, it is a very clever albeit strictly illegal way of using the Facebook sharing functionality for viral spamming purposes.

What can Facebook do about it? One thing would be to not allow share.php to be embedded in iframes via a simple javascript, but that might break desired functionality in other places. Otherwise, they could shift the placement of the sharebutton slightly of different page loads, but that could probably be circumvented by detecting the position of the button via script and isn’t a viable solution. Or they could require that the user had to type some captcha before being able to post links to new sites not posted before, but that creates a lot of other problems (and a good scammer could simply require the user to answer the captcha as well as click the button – users would do that). I’m sure Facebook can think of something, though.

What can you as a user do about it? Nothing really. Only click on “links” on foreign pages that you know for sure are legitimate and that you trust that your friends really did post on their own. But it is pretty hard to protect against. It really is Facebook’s job to make sure this doesn’t happen.

Please share this with everyone!

Update 2009-11-24: Several sites report this as an example of CSRF/XSRF (Cross-Site Request Forgery) and most use this AVG blog post as source. Not that it really matters, but it is not XSRF – it is clickjacking. There is a slight difference, the main difference being, that the countermeasures are very different.

Related posts:

1. I like Facebook
2. 100,000 spam comments fought off
3. Private Comment Sharing – January 2010 Ideas

With HTML 5 and the introduction of datasets, we can do something new. The main advantage and the really huge application area for datasets are, that you can include custom attributes in the serverside-rendered HTML, that the client-side script will use to enhance the browsing experience.

A common example: You have a gallery page, which has an area for displaying a large image and one for a list of thumbnails. In the serverside-rendered HTML you render the first picture in the large image and a list of thumbnails below. In javaScript you hook a function for each thumbnail to change the large image. But where do you supply the path for the large image? It could be done via several methods:

• from the server render a JavaScript-array that do the mapping,
• have a strict naming-convention, and e.g. always remove “-thumb” from the thumbnail path to obtain the large image path,
• hide it on the node by abusing some existing legal property – e.g. hide it in the title-field of the thumbnail, or
• add it is a new property on the node, that will make your document non-compliant with the standard.

But with datasets, the server simply includes the large image path on the thumbnail image node (or the surrounding link node) via a custom data-attribute here named data-fullpath:

<img
  id="large-image"
  src="images/large/picture1.png"
  alt="Large Picture 1"
/>
<ul id="thumbnails">
  <li>
    <a href="gallery_with_picture1_enlarged.html" title="View Picture 1">
      <img
        src="images/thumbs/picture1.png"
        data-fullpath="images/large/picture1.png"
        alt="Picture 1"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture2_enlarged.html" title="View Picture 2">
      <img
        src="images/thumbs/picture2.png"
        data-fullpath="images/large/picture2.png"
        alt="Picture 2"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture3_enlarged.html" title="View Picture 3">
      <img
        src="images/thumbs/picture3.png"
        data-fullpath="images/large/picture147_no_conventions.png"
        alt="Picture 3"
      />
    </a>
  </li>
</ul>

Of course, in live implementation the links above would link to pages, where the other thumbnails where shown in the large area to allow for graceful degradation, but this is just to show the idea. The above example have now been updated to provide actually interesting links in the surrounding <a>-tags and not just link to the image as several have suggested.

The JavaScript that went with this would be something along the lines of (asuming jQuery.dataset functionality):

$("ul#thumbnails a").click(function(e) {
	$("#large-image").attr("src", $(this).find("img").dataset('fullpath'));
	return false;
});

See full example here – it works in all browsers, and is valid HTML 5. The JavaScript works in non-HTML5 browsers, as it includes a little jQuery plugin I wrote adding the method dataset, which includes a fallback if the DOM attribute “dataset” is not available.

I personally find this to be a very clean way of implementing this feature over the many hacks, that we need to use today. And this is of course not limited to galleries, but can be used for anything, where the script needs to know extra information about the objects in the document in order to add additional functionality through scripts on the page – this could include having a reference to “previous” or “next” image in the above gallery, meta-information about rows in a table to use for client-side searching, filtering or sorting, meta data for link previews and many other possibilities.

NB: This is not to be used as meta-data for external entities – only for scripts on the page enhancing the browsing experience. For providing meta-data for external entities, use microdata, which is completely different from datasets – but the two could be used to convey the same meta information, just with different recipients in mind.

Related posts:

1. Web Sockets in HTML 5 might solve the http pull problem once and for all

But with the dawn of HTML 5, this worry is irrelevant, because with HTML 5 and the greatly improved JavaScript API, we also get a brand new Web Sockets API. This will have the same basic low-level access to bi-directional communication as ActionScript got with the XMLSocket API – it wasn’t XML only, it was just the (widely used) default transport method, but it could easily be circumvented.

Quite stunning though, how such a simple mechanism arrives in JavaScript 10 years later than it did in ActionScript!

When this becomes standard in new browsers across vendors, we will see it implemented in so many popular applications, that currently use all sorts of tricks to achieve the same results – like Facebook, who uses Comet to “push” JavaScript notifications. With this API, doing stuff like that becomes much easier and much cleaner. Or Google Docs, who use Comet as well as HTTP pulling. Or NFL live match view, who use a Flash object in the document to receive events about the match being watched.

And this of course also increase the opportunity for creating new multi-user applications – and games – in HTML and JavaScript. And given the extra computational strengths, that most JavaScript engines are being equipped with currently (Chrome started the race and IE8 perform surprisingly well), and given some of the other fun things in HTML 5 like canvas, things will really start to get interesting.

Go HTML 5 – get yourself final as soon as possible! Give us JavaScript programmers the same tools that we ActionScript programmers have had for a decade.

Related posts:

1. Datasets in HTML 5 and what they’re good for
2. Flash development and the practice of Scripted Layout

This feature does currently not work – see list of updates below

ShareThis is a great service for adding shareability to your website in a very simple way. It even includes the “tip a friend” option, so you don’t need to code that for your own site. I will describe how to embed it from flash.

Note 2009/05/19: Due to changes in the ShareThis API popup-functionality is broken currently (both in my example and in some of my live projects). I have filed a bug with ShareThis to fix this ASAP.

Note 2009/05/21: ShareThis have now fixed the above bug but there is still a minor JavaScript error thrown. The popup works now though as it should from both JS and Flash.

Note 2009/06/08: ShareThis now broke it again. And this time their support staff doesn’t answer. Please see an example implemented with AddThis instead.

Note 2009/06/19: ShareThis finally fixed it again. They wrote a mail on the 17th to me stating the bug was reintroduced when they implemented CDN, but would be fixed in the next release. Let’s hope it stays that way.

Note 2009/08/14: ShareThis has recently implemented a brand new version of their service – and surprise: it is not backwards compatible. Thus my popup example is broken again. I will investigate and fix soon.

Note 2009/08/17: ShareThis has promised to deliver a flash API within a few weeks. Let’s see what happens then…

You can do that in two ways, either by using a overlay div in HTML or creating a popup (that might get blocked). The prettiest and most user friendly is of course the overlay, but in order to have HTML overlays on top of Flash elements, you need to set the Flash wmode to transparent. This has a strange and unfortunate side-effect (which has been bug-reported to Adobe), that the keyboard defaults to standard US layout. For US websites, this is not a big problem, but for a Danish website it matters a lot. There are many differences between US and DK keyboard layout including Danish special characters and the location of the @-sign. Thus, wmode-transparent cannot be used for Flash-objects having input fields requiring users to enter text (which could contain special characters) or an email address (which contains the @-sign). Thus we need to use the popup-solution.

First, simply go to sharethis.com publisher section and customize your widget. Instead of placing the widget code snippet where you want the button, put it in the <head>-section of your website. The code snippet I got was:

<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=636e055b-a4a2-4f9c-872c-b7aa9a701bb0&amp;type=website&amp;send_services=email&amp;post_services=facebook%2Clinkedin%2Cmyspace%2Cdigg%2Cdelicious%2Ctwitter%2Creddit%2Ctechnorati%2Cwordpress%2Cblogger%2Cgoogle_bmarks%2Cwindows_live"></script>

Then create a little javascript function like:

  function share(url, title) {
    var s = SHARETHIS.addEntry({
      url: url,
      title: title
    }, {button:false,popup:true});
    s.popup()
    return false;
  }

Finally, simple call this function from Flash using ExternalInterface:

var url:String = "http://www.barklund.org/blog/2009/05/06/using-sharethis-with-flash/";
var title:String = "Barklund.org - Using ShareThis with Flash";
import flash.external.ExternalInterface;
ExternalInterface.call("share", url, title);

See an example here – the javascript function is invoked both from a regular HTML link and from a simple Flash file using just the above ActionScript.

Related posts:

1. Using AddThis with Flash
2. Minor change in handling NaN positions in Flash Player 10,0,22
3. Announcing MXHR4AS3: Multipart/mixed-file download by Flash clients

Well, all this I did not have much to do with, that concerns the concept department. But concretising, technically verifying and realizing this concept is very much my job. The project has taken many months but it is now finally complete. Or well, such is never complete, but the first version has been launched at least. And this site is (technically) amazing if I should describe it. The amount of JavaScript used is huge and much of it uses MochiKit heavily. The JavaScript is used to enliven the page in a very interesting way.

The whole page works without JavaScript in the classical fashion (clicking links, reloading the whole page with the new page), but with JavaScript enabled, all links are caught and handle via Ajax instead. This technique was introduced to me by Jeremy Keith and his somewhat cute term Hijax. In order to do this, but not combine markup with content, large portions of the HTML (very large in fact) are built in JavaScript. For this need MochiKit.DOM is really handy.

Other features of the site, that makes this a very satisfying job to have completed:

• It is of course search engine optimized (Hijax preserves this)
• It uses a very concise, readable markup and works as mentioned without JavaScript (the properties of Progressive Enhancement)
• The URL is modified on every major page change using fragments in order to allow deep-linking and bookmarking (this is partly self-developed, partly borrowed from SWFAddress)
• And given the above, that “back” and “forward” buttons of the browser works (unlike many other full-Ajax websites)
• The site includes Google Maps (you can’t go wrong with that!)
• The site is tested and optimized for Internet Explorer 6 and 7 as well as Firefox 2 (and friends).

Enough talking, here is the site: http://www.totalkredit.dk – “unfortunately” most of the site is in Danish except for a small investor-part.

Related posts:

1. Password-friendly Website Certificate – January 2010 Ideas

Personally, the Web Forms 2 specification really gets me excited, and the overall proposal seems sane and the most interesting and logical way to go. The HTML 4.01 and XHTML 1.1 recommendations are getting old and certainly does not reflect modern web content.

Thus I strongly support the adoption as do so many others. And it will come – just hang in there.

Related posts:

1. Datasets in HTML 5 and what they’re good for
2. Web Sockets in HTML 5 might solve the http pull problem once and for all