Social Buttons Facebook, Twitter, Pinterest, and Google Plus

social-buttons.html

<iscomment>
Social Media Buttons
All dependent libary files to make these buttons work are included once per page
as socialmedia.js. This template may be included multiple times per page
so long as the following exist in the pdict :

--Required--
SitePreference FacebookAppID
pdict.Product
</iscomment>
<isscript>
importScript("product/ProductImageSO.ds");
var FacebookAppID : String = dw.system.Site.getCurrent().getCustomPreferenceValue('FacebookAppID');

//PDP Url for current product
var shareURL : dw.web.URL = dw.web.URLUtils.http("Product-Show", "pid", pdict.Product.ID);
var encodedShareURL : String = dw.crypto.Encoding.toURI(shareURL.toString());

//PDP main image
var imageURL : dw.web.URL = new ProductImage('pdp', pdict.Product, 0).getURL();
var encodedImageURL : String = dw.crypto.Encoding.toURI(imageURL.toString());

//Text to display for Product Sharing
var productText : String = dw.crypto.Encoding.toURI(pdict.Product.name);
	
</isscript>
<!--- Facebook iFrame --->
<iframe src="//www.facebook.com/plugins/like.php?href=${encodedShareURL};width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=${FacebookAppID}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 132px; height:21px;" allowTransparency="true"></iframe>

<!--- Twitter JS --->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="${productText}" data-url="${shareURL}">Tweet</a>

<!--- Pinterest JS --->
<a href="//www.pinterest.com/pin/create/button/?url=${encodedShareURL}&media=${encodedImageURL}&description=${productText}" data-pin-do="buttonPin" data-pin-config="beside" data-pin-zero="true" ><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

<!--- Separator for the Pinterest count to prevent stacking --->
<span class="social-buttons-separator"></span>

<!-- Google Plus JS -->
<div class="g-plusone" data-size="medium" data-href="${shareURL}"></div>

social-buttons.js

/**
 * @function
 * @description Explicitly render social buttons that depend on a document load
 */
 var initSocialButtons = function(){
 	//Render Twitter Button
 	if(typeof window.twttr != "undefined" && twttr.widgets){
		window.twttr.widgets.load();
	}

	//render Pinterest Button
	if(typeof window.parsePinBtns != "undefined"){
		window.parsePinBtns();
	}

	//Render Google+ Button
	if(typeof window.gapi != "undefined" && gapi.plusone){
		window.gapi.plusone.go();
	}
 };
 /**
 * @function
 * @description Reload buttons based on new variant url
 * @param anchor {String} URL of Variant selected
 */
 var updateSocialButtons = function(anchor){
 	var params = app.util.getQueryStringParams(anchor.split("?")[1]);
 	var options = {
 		url : app.urls.updateSocialButtons,
 		data : params,
 		callback : initSocialButtons,
 		target : ".add_this_list"
 	};

 	app.ajax.load(options);
 };

social-media.js

//Include this file once per page to add Social media js files
//The social media buttons themselves are located in product/components/socialmediabuttons.isml
//Facebook loaded through iFrame, no JS required

//Twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

//Pinterest
(function(d){
    var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
    p.type = 'text/javascript';
    p.async = true;
    p.src = '//assets.pinterest.com/js/pinit.js';
    p['data-pin-build'] ='parsePinBtns'; //exposes window.parsePinBtns()
    f.parentNode.insertBefore(p, f);
}(document));

//Google+
(function() {
	var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	po.src = 'https://apis.google.com/js/platform.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();