Tag Archives: Google

Static social media “share” buttons without JavaScript

Hand-shaped cursorSometimes you want a “share” link in your website or email newsletter but you don’t want the extra JavaScript and iframes that come with the standard social media buttons. Here’s how to do it, giving your users faster page loading times and a bit more privacy.

Twitter

Firstly Twitter, who like to make it easy for us. It’s possible to use twitter.com/home or twitter.com/share but the most useful sharing URL is this:

https://twitter.com/intent/tweet?
  • Parameters: url, text
  • Encode parameters? Yes

The difference is that the user will see a friendly “Share a link with your followers” heading rather than the usual “What’s happening?”. Not only that, but the text within the Tweet is highlighted to make it immediately editable. Nice touch.

Example

<a href="https://twitter.com/intent/tweet?text=Static%20social%20media%20%22share%22%20buttons&url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Twitter
</a>

Try it out here: Twitter buttonShare on Twitter

Documentation


Facebook

Despite having an official “Share” button in the past, Facebook have now deprecated it in favour of the ubiquitous “Like” button. For backwards compatibility, however, the “Share” URL still works:

https://www.facebook.com/sharer/sharer.php?
  • Parameters: u (URL)
  • Encode parameters? Yes

Example

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Facebook
</a>

Try it out here: Facebook buttonShare on Facebook

Documentation


LinkedIn

Apparently sharing links on LinkedIn is very good for SEO so this could be an important one to include. The base URL is:

http://www.linkedin.com/shareArticle?
  • Parameters: url, title, summary
  • Encode parameters? Yes

Example

<a href="http://www.linkedin.com/shareArticle?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&title=Static%20social%20media%20%22share%22%20buttons&summary=How%20to%20build%20social%20media%20sharing%20links%20without%20JavaScript%20and%20iframes.">
    Share on LinkedIn
</a>

Try it out here: LinkedIn buttonShare on LinkedIn

Documentation


Pinterest

The relatively new kid on the block is Pinterest. Note that for it to work properly, you should include the media parameter and point it to an image at least 750 pixels wide. The base URL is:

http://pinterest.com/pin/create/button/?
  • Parameters: url, description, media
  • Encode parameters? Yes

Example

<a href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f&description=Static%20social%20media%20%22share%22%20buttons&media=http%3a%2f%2fdaniemon.com%2fblog%2fwp-content%2fuploads%2f2012%2f09%2fstatic-social-media-buttons.png">
    Share on Pinterest
</a>

Try it out here: Pinterest buttonShare on Pinterest

Documentation


Google+

Let’s not forget Google who have a bookmarking service, however this has now largely been usurped by Google+ which uses this URL:

https://plus.google.com/share?
  • Parameters: url, hl (human language, e.g. “en”, “ja”, etc. – optional)
  • Encode parameters? Yes

Example

<a href="https://plus.google.com/share?url=http%3a%2f%2fdaniemon.com%2fblog%2fstatic-social-media-share-buttons%2f">
    Share on Google+
</a>

Try it out here: Google+ buttonShare on Google+

Documentation


Hatena Bookmarks

Hatena Bookmarks is a popular bookmarking site in Japan, particularly among the tech crowd. It uses this URL:

http://b.hatena.ne.jp/entry/
  • Parameters: None – just append your target URL
  • Encode parameters? No

Example

<a href="http://b.hatena.ne.jp/entry/http://daniemon.com/blog/static-social-media-share-buttons/">
    Share on Hatena Bookmarks
</a>

Try it out here: Hatena Bookmarks buttonShare on Hatena Bookmarks

Documentation

Other similar resources

Goodbye Google Wave

So it’s so long Google Wave. I was lucky enough to see a presentation by the user interface designer and understand some of their design decisions. Not only did they put a lot of effort into the user experience, the technology behind the real-time, synchronous editing was particularly innovative. I feel sorry for the team who achieved so much, but I’m sure we’ll still see parts of Google Wave appear in other projects. In the meantime, here’s a parting song.

Video URL (with captions): www.youtube.com/watch?v=MwKaScNbWIc

Downloads

For your downloading pleasure, here are the video and audio–only files.

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

Goodbye Google Wave
Though we hardly used you at all
You had such potential
To change the way we talk

We begged for invites and Tweeted
“Ooh, shiny shiny!” and seconds later…
“Now how does this thing work?”

And it seems to me, you lived your life
Like an Apple Newton
A great idea, whose time hadn’t come

You’ve still got fans who say that Wave rocks
But I guess the world just doesn’t need
One more inbox

I guess the world can carry on
With one less inbox

What makes Google innovative

I was lucky enough to attend the first Information Science and Technology Christmas lecture at Tokyo University the other day and, although all the talks were interesting, I particularly enjoyed Kentaro Tokusei sharing Google’s ideas about innovation.

Kentaro Tokusei is currently Google’s Group Product Manager (and a nice guy, according to my colleague) and is clearly enthusiastic about the products his people create. Although, like many, my concerns about privacy increase with everything Google releases, it was still interesting to hear his 8 steps to innovation:

  1. A mission that matters
  2. Think big but start small
  3. Continual innovation, not instant perfection
  4. Ideas come from everywhere
  5. Share everything
  6. Data drives decisions
  7. 20% time
  8. Be a platform

Not much to disagree with there and arguably no real revelations, but still good food for thought. He finished with “Believe in the impossible and it can become true” – a suitable closing remark for a Christmas lecture.