Pre-Populating Social Sharing Messages

Sharing buttons on a site can be configured to pre-populate content through various sharing channels such as email, Facebook and Twitter, though unfortunately this doesn’t seem to be that well documented.

The below examples show how to pre-compose a message to be sent by Outlook.com, Yahoo, Gmail and Twitter with the content passed by URL and for a Facebook post to be generated using their API with parameters passed in meta tags. For the URLs your content should obviously be URL encoded using something like encodeURIComponent in javascript.

Outlook.com


https://outlook.com/?path=/mail/action/compose&to=to_address&subject=subject&body=body

This also works for Office365 emails if the domain is changed to outlook.office.com

Yahoo


https://compose.mail.yahoo.com/?to=to_address&subject=subject&body=body

Gmail


https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=to_address&su=subject&body=body

Facebook

Sharing a message to Facebook can’t be done directly using URL parameters but rather needs to be done by calling their social graph API and posting site details to it through custom meta parameters.

To do this you need to register an app using the Facebook Developers site. Within this app add the “Facebook Login” product and within the Quickstart path choose to add a web platform and set the site URL to be the address of the site you will be posting content from.

Once that’s done you can add the following code near the top of your page to load required javascript. The appId should be that of the app you just created, the version and language can also be updated if required.


<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '<YOUR_APP_ID>',
            cookie: true,
            xfbml: true,
            version: 'v2.12'
        });

        FB.AppEvents.logPageView();

    };

    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_UK/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

I then had a custom onClick action for the Facebook sharing link which called the below javascript function to post to pre-populate a post to the users wall.


<script type="text/javascript">
	// Facebook post
	function shareOnFacebook() {
		var img = '<IMAGE_URL>';
		var desc = '<SHARING_BODY>';
		var title = '<SHARING_TITLE>';
		var link = '<SHARING_LINK>';

		// Open FB share popup
		FB.ui({
			method: 'share_open_graph',
			action_type: 'og.shares',
			action_properties: JSON.stringify({
				object: {
					'og:url': link,
					'og:title': title,
					'og:description': desc,
					'og:image': img
				}
			})
		},
		function (response) {
			// Action after response
		});
	}
</script>

Twitter


'https://twitter.com/share?text=body&url=url'

Leave a Reply

Your email address will not be published. Required fields are marked *