Gigya Job Openings

postBookmark Working Example

Skip to end of metadata
Go to start of metadata

Implementing the socialize.postBookmark API

This page gives you an example of how to utilize the socialize.postBookmark API as a standalone API on a webpage, in this case sharing a bookmark to a page from the Gigya Demo site.

For more information please review the socialize.postBookmark documentation.

Take a look at the code below for the complete source of this example. To implement this example on your site, be sure to change the apiKey to your company's active apiKey.

Facebook        Twitter

postBookmark Documentation

Code Example

To get started immediately, copy the code from the block below and create a new webpage on your site, then customize it with the data specific to the page you wish to share.

<html>
	<head>
        <title></title>
        <!-- Open Graph Tags -->
		<meta property="og:url" content="https://gigyademo.com/recipe3.php">
		<meta property="og:title" content="postBookmark Demo">
		<meta property="og:type" content="article">
        <meta property="og:description" content="postBookmark API call demo.">
		<meta property="og:image" content="https://gigyademo.com/images/recipe3.png" />
		
        <!-- Load Gigya's Web SDK -->
		<script type="text/javascript" lang="javascript" src="https://cdns.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">	
		</script>	
	</head>

	<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: auto; display: block; height: auto;"> 
 <style>
        .demo_main {
            width: 90%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            text-align: center;
        }
    </style>
        <div class="demo_main">
            <h4>Take a look at the code below for the complete source of this example.  To implement this example on your site, be sure to change the apiKey to your company's active apiKey.</h4>
            <!-- Script for defining variables for the postBookmark instances -->
            <script>
				// Define an image media item:
				var image = {
					type: 'image',
					src: 'https://gigyademo.com/images/recipe3.png',
					href: 'https://gigyademo.com/recipe3.php'
					};
				// Define a UserAction object
				var ua = new gigya.socialize.UserAction();
				ua.setLinkBack("https://gigyademo.com/recipe3.php");
				ua.setTitle("postBookmark Demo");
				ua.setDescription("postBookmark API call demo.");
				ua.addMediaItem(image);
				// Define a UserAction object specific for Twitter
				var uatw = new gigya.socialize.UserAction();
				uatw.setLinkBack("https://gigyademo.com/recipe3.php");
				uatw.setTitle("postBookmark API call demo");
				// Variable definition for Facebook share
				var FBParams ={
					provider: 'facebook',
					url: 'https://gigyademo.com/recipe3.php',
					userAction: ua,
					cid: 'Facebook share from Gigya postBookmark demo.'
				};
				// Variable definition for Twitter share, note the Twitter specifica UA object
				var TWParams ={
					provider: 'twitter',
					url: 'https://gigyademo.com/recipe3.php',
					userAction: uatw,
					cid: 'Twitter Shares from Gigya postBookmark demo.'
				};
            </script>
            <div>
                <a href="" onclick="gigya.socialize.postBookmark(FBParams)"><img alt='Facebook' src='https://gigyademo.com/images/follow_bar/Facebook_on_follow.png' height="50px" width="50px" /></a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" onclick="gigya.socialize.postBookmark(TWParams)"><img alt='Twitter' src='https://gigyademo.com/images/follow_bar/Twitter_on_follow.png' height="50px" width="50px" /></a>
            </div>
            <p>
                <a target="_blank" href="//developers.gigya.com/display/GD/socialize.postBookmark (JS)">postBookmark Documentation</a>
            </p>
        </div>
</div>
	</body>
</html>

Notes:

In order to make the above code work in your environment, please note:

  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained from the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.
  • If you are using https, be sure to further adjust the JS API url to: https://cdns.gigya.com/js/gigya.js?apikey=<Your_API_Key>.