As discussed on the mailing list, use of URI query strings, also called URL parameters, will allow us to replace JavaScript-based social media widgets with plain anchor tag (`<a>`) hyperlinks.

<https://en.wikipedia.org/wiki/Query_string>



## Generating links to "follow us on X"

The different social media platforms have varying support for URL parameters. For example, Facebook and Google+ only support URL parameters for *sharing* or posting a link, so for the Follow/Subscribe buttons, we will have to just link to the normal profile page, and from there, let users make the second click to actually subscribe.

Replace {ACCOUNT_ID} with the numerical ID or human-readable account name.

    https://plus.google.com/{ACCOUNT_ID}

    https://www.facebook.com/{ACCOUNT_ID}

Twitter has better support for URL parameters. We could use either the `screen_name={NAME}` or `user_id={NUMERICAL_ID}` parameters. `screen_name` asks for the human-readable username on Twitter -- however, you can change your username at any time, so the Twitter documentation actually recommends `user_id` parameter instead, using the numerical account ID.

    https://twitter.com/intent/follow?user_id={NUMERICAL_ID}
    -or-
    https://twitter.com/intent/follow?screen_name={NAME}

Tumblr makes this one even easier, because it's formatted like a regular URL rather than a query string.

    https://www.tumblr.com/follow/{TUMBLR_USERNAME}



## Generating links to easily share GIMP blog posts, tutorials, etc.

In all these, replace {URL} with the address of the current page on the GIMP site. Technically, the URL is supposed to be percent-escaped <https://en.wikipedia.org/wiki/Percent-encoding> -- however, in my experience, entering the literal colon and slashes of the initial `https://` works fine. If there are ever any URL parameters in the *GIMP* web address, though, those will definitely need to be escaped before adding to the Share links.

Google+ keeps it simple.

    https://plus.google.com/share?url={URL}

For Facebook, you must connect the Share link to the publisher's Facebook account (it's required, but also gets you better analytics). {ID} is the numerical account/page/profile id. Your facebook name (e.g., "gimp" if the the page's address is facebook.com/gimp) WILL NOT WORK! If you don't know the GIMP page's Facebook ID, try reading this how-to: <http://www.ehow.com/how_5753004_facebook-id.html>

    https://www.facebook.com/dialog/share?app_id={ID}&href={URL}

Twitter gives us some more options, allowing you to even suggest the text which appears in the tweet when users share the GIMP content: {TEXT} is text that appears in the tweet. {HASHTAGS} is a comma-separated list of hashtags to append to the tweet (the hashtags list should have no `#` symbol, and no spaces after the commas). {URL} is of course the URL of the GIMP page we want the tweet to link to.

Users can change all this before posting, and since they aren't available for all the other platforms, I'm inclined to leave them out altogether. But it's an option if we want to recommend a specific message. Again, the text for all these parameters would need to be percent-escaped.

    https://twitter.com/intent/tweet?text={TEXT}&url={URL}&hashtags={HASHTAGS}
    -or simply:-
    https://twitter.com/intent/tweet?url={URL}

Tumblr does it like this:

    https://www.tumblr.com/widgets/share/tool?canonicalUrl={URL}



## JavaScript for sharing

I will recommend one little bit of JavaScript. On a desktop or laptop, this small snippet of code opens the social Share page in a pop-up mini window, and in mobile devices, it opens the Share page in a new tab, so users don't have to navigate away from the GIMP site to share. Since it doesn't call a remote script, it doesn't add any special user-tracking on GIMP.org.

The HTML `<a>` tag for each share link will need an `id` attribute. We then attach an event listener to each element, which opens the window or tab when clicked.

Here's what it would look like for the Google+ link.

The HTML:

    <a id="share-google-plus" href="https://plus.google.com/share?url={URL}">
        TEXT OR ICON HERE.
    </a>

And the event listener, in the JavaScript file:

    // Get the Google+ share link element.
    var shareGooglePlus = document.getElementById( "share-google-plus" );

    // Open link in new mini window instead.
    shareGooglePlus.addEventListener(
        "click",
        function ( event ) {
            event.preventDefault();
            window.open(
                this.href,
                "",
                "menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=600, width=600"
            );
        },
        false
    );

Perhaps a simpler alternative to the JS would be to open the link in a new tab using the anchor tag `target="_blank"` attribute. This is what would happen anyway for mobile devices, but on desktop, opening the mini window looks better to me.