Neil Hillman

We’ve all seen them, the Tweet this, Like this, Share this social media buttons. They give end users an easy way to share content, whilst providing webmasters with an important promotional service for their sites.

But adding them to your sites can be a bit of a pain. You have to visit a seperate generator page for each social network button, (Twitter buttons, Facebook Like buttons and Google +1 buttons), and fill in all the same details on each one, (your site URL, page URL, text). You then have to cut and paste the three different Javascript snippets into your source code, and if you want to do this on multiple pages, you have to repeat the process to generate unique Javascript code snippets for each URL, which can be incredibly tedious and time-consuming.

This is why I wrote a jQuery function that enables you to quickly and easily add these three buttons to all your pages. It employs the lesser-known iframe method for displaying the buttons, and can be added site-wide to your templates or scripts by including a jQuery function and a couple of lines of code.

Firstly, include your copy of the jQuery library in your document’s header:

<script src="/js/jquery.min.js" type="text/javascript"></script>

… or better still, link to the copy in Google AJAX Libraries, (as using Google’s network of datacenters instead of hosting locally will decrease latency, increase parallelism and improve caching on your site!):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript"></script>

Secondly, include the following jQuery function, either in your document’s header, or in a linked external javascript file. You don’t need to change anything in this script.

<script type="text/javascript">
function social_media_buttons(site,text,page) {
    // First, check if 'social-media-buttons' div exists...
    if ($('#social-media-buttons').length) {

        // Create Twitter button
        $('#social-media-buttons').append('<div id="twitter-button"></div>');
        $('#twitter-button').attr("style","float: left;");
        $('#twitter-button').append('<iframe id="share-twitter"></iframe>');
        var twitter = $('iframe#share-twitter');
        twitter.attr("title", "Twitter Tweet Button");
        twitter.attr("frameBorder", "0");
        twitter.attr("scrolling", "no");
        twitter.attr("marginWidth", "0");
        twitter.attr("marginHeight", "0");
        twitter.attr("allowtransparency", "true");
        twitter.attr("vspace", "0");
        twitter.attr("hspace", "0");
        twitter.attr("tabindex", "-1");
        twitter.attr("style","width: 55px; height: 62px;");
        var src = 'http://platform.twitter.com/widgets/tweet_button.html?count=vertical';
        src = src + '&enableNewSizing=false&lang=en&original_referer=' + site;
        src = src + '&size=m&text=' + encodeURI(text) + '&url=' + page;
        twitter.attr("src", src);

        // Create Google button
        $('#social-media-buttons').append('<div id="google-button"></div>');
        $('#google-button').attr("style","float: left; margin: 2px 8px;");
        $('#google-button').append('<iframe id="share-google"></iframe>');
        var google = $('iframe#share-google');
        google.attr("title", "Google +1 Button");
        google.attr("frameBorder", "0");
        google.attr("scrolling", "no");
        google.attr("marginWidth", "0");
        google.attr("marginHeight", "0");
        google.attr("allowtransparency", "true");
        google.attr("vspace", "0");
        google.attr("hspace", "0");
        google.attr("tabindex", "-1");
        google.attr("style","width: 50px; height: 62px;");
        var src = 'https://plusone.google.com/_/+1/fastbutton?url=' + page;
        src = src + '&useSharedProxy=true&rcache=true&scache=true&size=tall';
        src = src + '&count=true&hl=en-US&parent=' + site;
        google.attr("src", src);

        // Create Facebook button
        $('#social-media-buttons').append('<div id="facebook-button"></div>');
        $('#facebook-button').attr("style","float: left;");
        $('#facebook-button').append('<iframe id="share-facebook"></iframe>');
        var facebook = $('iframe#share-facebook');
        facebook.attr("title", "Facebook Like Button");
        facebook.attr("frameBorder", "0");
        facebook.attr("scrolling", "no");
        facebook.attr("marginWidth", "0");
        facebook.attr("marginHeight", "0");
        facebook.attr("allowtransparency", "true");
        facebook.attr("vspace", "0");
        facebook.attr("hspace", "0");
        facebook.attr("tabindex", "-1");
        facebook.attr("style","width: 60px; height: 62px;");
        var src = 'http://www.facebook.com/plugins/like.php?action=like&href=' + page;
        src = src + '&layout=box_count&show_faces=false&width=450&colorscheme=light';
        facebook.attr("src", src);
    }
}
</script>

Thirdly, on document ready, define your variables and call the function, (place this within the document’s header):

<script type="text/javascript">
$(document).ready(function() {

    var site = "http://www.yoursite.com/";
    var text = "Tell everyone about how great your page is!";

    // This is the url of the page you want to share
    // You can either populate this manually,
    // or let Javascript use the current page value:
    // var page = "http://www.yoursite.com/path/to/page.html";
    var page = window.location.protocol + "://" + window.location.host
             + window.location.pathname;

    social_media_buttons(site,text,page);
});
</script>

Finally, place the buttons where you want them to appear, by adding a <div> with the ID “social-media-buttons” anywhere on your page, like so:

<div id="social-media-buttons"></div>

That’s it, social media buttons! Let me know how you get on…
 

If, like me, you are a bit of a internet geek, then you too are probably desperate to get your hands on a Google+ invite. If you’re not an internet geek, you’re probably asking, “a Google what?“.

Last week Google launched Google+, their new Social Network a la Facebook, to just a select few. But Sign Up closed agin two days later, and now it seems that neither love nor money can get you in.

For the initial two days, those already signed up could invite others by “sharing” something, then adding their friend’s email address to the “Add more people” box below. The recipient would then recieve the shared content by email, with a red button inviting them to “Learn more about Google+” at the bottom. This button would take them to the Sign Up page.

But as of last Thursday, (30th June), no one has been alowed in. Vic Gundotra, Senior Vice President at Google posted “We’ve shut down invite mechanism for the night. Insane demand. We need to do this carefully, and in a controlled way. Thank you all for your interest!”

Visitors to the Google+ Sign Up page are greeted with a message, “Already Invited? We’ve temporarily exceeded our capacity. Please try again soon.“, and a “Keep Me Posted” button to enter your email address for updates.

Various loopholes and workarounds sprung up. For a short period you could still sign up from a Safari mobile browser, using either an iPhone, iPad, iPod Touch or Android phone, or from a Mac computer with Safari’s user agent set to mobile version.

Another loophole was to use Google’s Chrome browser, and install the Google Plus chrome app. Once installed, clicking on the Google+ icon in a new tab would take you to a functioning Sign Up page. But this and other loopholes have been plugged now, and as of time of writing, I was unable to find any way in. Let me know if you have better luck!

PS. 21-year-old singer / songwriter Taylor Swift obviously had more luck than me, she already has her Google+ profile setup, as does recording artist Soulja Boy and FaceBook founder and CEO Mark Zuckerberg!

It looks like Moola, (currently in beta), could be the next big thing since Gmail Invites. The Blogosphere isn’t reallt buzzing with this one yet, but if you dig around a bit you will find people looking for invites, selling invites etc.

From what I can gather, Moola, dubbed an “AdverTournament”, is kind of like a TV game show,  except based on the Internet. Currently their only game, (there are more to come), is called “Gold Rush!”, and involves playing “numbers” to trying to reach 32 by trumping your opponent. And, much like Gmail in the early days, registration is by invitation only.

The concept is fairly simple. Moola gives you a penny. You watch a short video advertisement, (to pay for that penny), then play against another member who also has one penny. If you win, you double your money, and if you lose, you go back to the start, and Moola gives you another penny. The theory is that if you doubled your penny 30 times in a row without losing, you could win 10 million dollars, (although in reality if you even got near the one million mark, would you risk all that on a “double-or-nothing” bet)? So far several players have won over $500, with the largest payout currently set at $3660.

A very funny website:  Things My Girlfriend and I Have Argued About.com

Examples include:

• Our telephone number.
• The best way to hang up washing.
• Which way, (the distances were identical), to drive round a circular bypass.
• Ownership of the TV Remote.
• Disappearance of the TV Remote.
• Those little toothpaste speckles you make when you brush your teeth in front of the mirror.
• I eat two-fingered Kit-Kats like I’d eat any other chocolate bars, i.e. without feeling the need to snap them into two individual fingers first. She accused me of doing this, “deliberately to annoy her“.
• Look, if you don’t understand the rules of Robot Wars by now then I’m just not going to continue the conversation, OK?
   

Perhaps the brightest star to emerge from Gulf War II is Iraq’s Information Minister Muhammed Saeed al-Sahaf, or “Comical Ali“.

“Our initial assessment is that they will all die. God will roast their stomachs in hell!“

He now has his very own fan site at: WeLoveTheIraqiInformationMinister.com