Monthly Archives: September 2012

Song: Social Network B


I want to introduce my child to online social networks but how best to explain some of the risks involved? Thought I’d start with a song…

This is a rewrite of the traditional folk song “Sloop John B”, famously covered by the Beach Boys (www.youtube.com/watch?v=nSAoEf1Ib58) although Cap’n Tom Jones deserves a mention for his singing attire: www.youtube.com/watch?v=fyQeHavCfPg

Video URL (with captions): Social Network B song

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

We joined a social network.
Me and my best friend, Bert.
Around that walled garden
we did roam.
Surfing all night.
Got into a fight.
I had so much fun,
I don’t wanna go home.

I got a message from Jen,
my girlfriend from way back when,
but now she just won’t
leave me alone.
What did I say?
Why does she haunt me this way?
She’s nice ‘n’ all but
I wish she’d go home.

Then there’s that guy named Ray.
He took me to a crazy partay
and he took lots of photos
with his cell phone.
Now everyone’s seen
me doing that… thing.
I’m tired of getting laughed at.
I wanna go home.

Then there’s those men in black.
They won’t get off my back,
ever since they gave me
that emergency loan.
How do they know
every place that I go?
I’m getting kinda scared now.
I gotta go home.

But now my whole family
has signed up, just like me.
It’s the only way
I keep in touch with my mom.
It’s part of our lives.
How did we ever survive?
Now we’re in the network,
we’re not going home.
Once you’re in the network,
you can never go home.

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