Share Bar Plugin Demo

Skip to end of metadata
Go to start of metadata

 

See it in Action

Please click on one of the buttons in the Share Bar below to open the "Share" dialog:



 

Read More

Developer Guide
API Reference

Check Out the Code

<html>
<head>
<title></title>
<script type="text/javascript">
        // Helper function to create the language cookie
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        // Helper function to read the cookie for examples that need it.
        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return "en"; // This is the users first time here - default to English
        }
    </script>
<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">
 {
lang: readCookie('demolang') // When the page loads, the language cookie is read and the global configuration set accordingly
} 
</script>
<meta property="fb:app_id" content="208351582528147">
<meta property="og:url" content="http://demo.gigya.com/recipe1.php">
<meta property="og:title" content="GATEAU A LA ROYALE">
<meta property="og:type" content="article">
 
 
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 700px; display: block;">
    <script type="text/javascript">
        // Function to create the cookie containing the language code. This runs anytime a user changes
        // the language in the drop-down list
        function genCookie() { 
            // Retrieve tha language code
            var selectedLang = document.getElementById("langList");
            // Set the cookie so we keep the last selected language as the default
            createCookie('demolang', selectedLang.value, 365);
            
            // Reload the page with the global conmfiguration object set to the new language
            window.location.reload(false);    
        }
       </script>
<form onchange="genCookie()">
        <!-- Set up the list of languages -->
        <select id="langList">
            <option>Please select a language</option>
            <option value="en">English (Default)</option>
            <option value="ar">Arabic</option>
            <option value="ca">Catalan</option>
            <option value="zh-cn">Chinese (Mandarin)</option>
            <option value="zh-hk">Chinese (Hong Kong)</option>
            <option value="zh-tw">Chinese (Taiwan)</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="nl">Dutch</option>
            <option value="nl-inf">Dutch Informal</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="fr-inf">French Informal</option>
            <option value="de">German</option>
            <option value="de-inf">German Informal</option>
            <option value="el">Greek</option>
            <option value="he">Hebrew</option>
            <option value="hu">Hungarian</option>
            <option value="id">Indonesian (Bahasa)</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="ko">Korean</option>
            <option value="ms">Malay</option>
            <option value="no">Norwegian</option>
            <option value="fa">Persian (Farsi)</option>
            <option value="pl">Polish</option>
            <option value="pt">Portuguese</option>
            <option value="pt-br">Portuguese (Brazil)</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="sl">Slovenian</option>
            <option value="es">Spanish</option>
            <option value="es-inf">Spanish Informal</option>
            <option value="es-mx">Spanish (Lat-Am)</option>
            <option value="sv">Swedish</option>
            <option value="tl">Tagalog (Philippines)</option>
            <option value="th">Thai</option>
            <option value="tr">Turkish</option>
            <option value="uk">Ukrainian</option>
            <option value="vi">Vietnamese</option>
        </select>
        <label><script type="text/javascript">document.write('<br/>Current language code: '+ '<strong>' + readCookie('demolang') + '</strong><br/>')</script> </label>
    </form>

        
    <h4>Please click on one of the buttons in the Share Bar below to open the "Share" dialog:</h4>
    <div id="divButtons"></div>
    <br><br>
    <script>
	// Define an image media item:
	var image = {
		type: 'image',
		src: 'http://demo.gigya.com/images/recipe1.png',
		href: 'http://demo.gigya.com/recipe1.php'
		}
	// Define a UserAction onject
	var ua = new gigya.socialize.UserAction();
	ua.setLinkBack("http://demo.gigya.com/recipe1.php");
	ua.setTitle("GATEAU A LA ROYALE");
	ua.addMediaItem(image);
	// Define Share Bar plugin's Parameters
	var shareBarParams ={
		userAction:ua,
		shareButtons:
		[
			{ // General Share Button
				provider:'share',
				tooltip:'General Share Button',
				userMessage:'default user message'
			},
			{ // Google +1 button
				provider:'google-plusone',
				tooltip:'Recommend this on Google',
				userMessage:'default user message'
			},
			{ // Facebook Like button
				provider:'facebook-like',
				tooltip:'Recommend this on Facebook',
				action:'recommend',
				font:'arial'
			},
			{ // Twitter Tweet button
				provider:'twitter-tweet',
				tooltip:'Share on Twitter',
				defaultText: 'Twitter message'
                
			},
			{ // Email button
				provider:'email',
				tooltip:'Email this'
			},
			{ // Pinterest button
				provider: 'pinterest-pinit'
			}
		],
		containerID: 'divButtons' // location of the Share Bar plugin
	}
	// Load Share Bar plugin
	gigya.socialize.showShareBarUI(shareBarParams);
       
    </script>
</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>.