%[if %("%id=sharebutton%" == "true")% ]%
<div id="socialPopupTriggerButton%id%" class="socialPopupTriggerButton">
	<a href="#" id="socialPopupTrigger%id%" class="socialPopupTrigger" data-modal="socialPopup-%id=uniqueid%"></a>
	<div id="socialPopupTriggerButtonBorder%id%" class="socialPopupTriggerButtonBorder">
		<div id="socialPopupTriggerButtonContent%id%" class="socialPopupTriggerButtonContent">
			<span id="socialPopupTriggerButtonIcon%id%" class="socialPopupTriggerButtonIcon">%id=sharebuttonicon%</i></span>
			<span id="socialPopupTriggerButtonText%id%" class="socialPopupTriggerButtonText">%id=sharebuttonlabel%</span>
		</div>
	</div>
</div><!--/socialPopupTriggerButton-->
%[endif]%

%[if %("%id=sharebutton%" == "custom")% ]%
%[if edit]% 
<div class="socialPopupConfig" style="margin-bottom: 5px;"><strong>Custom share button:</strong> You can either drag and drop a suitable button or graphic into the placeholder below. Alternatively create a new link somewhere on your page with a destination of <code>#</code>, a <code>class</code> attribute with a value of <code>socialPopupTrigger</code> and a <code>data-modal</code> attribute with a value of <code>socialPopup-%id=uniqueid%</code>.</div>
%[endif]%
<div class="socialPopupTrigger" data-modal="socialPopup-%id=uniqueid%">
	%slice%
</div>
%[endif]%

<div id="socialPopup%id%" class="socialPopup sociable">
	<div id="socialPopup-%id=uniqueid%" class="socialPopupModal-%id=uniqueid% socialPopupModalEffect-%id=modalanimation%">
		<button id="sociableCloseButton%id%" class="md-close">%id=closebutton%</button>
		
		%[if %("%id=radioactiveglow%" == "true")% ]%
		<div id="radioactiveScrollIndicator%id%"></div>
		%[endif]%
		
		<div id="socialPopupModalContent%id%" class="socialPopupModalContent">
			<div id="sociableIconWrapper">
				<div id="socialIconArray" class="socialIconArray">
				
%html="<div>
	<i class='fa fa-500px' style='background: #555555; color: #ffffff;'></i>
	<a href='http://500px.com'></a>
	500px
</div>

<div>
	<i class='fa fa-amazon' style='background: #ffffff; color: #FA9415;'></i>
	<a href='http://amazon.com'></a>
	Amazon
</div>

<div>
	<i class='fa fa-android' style='background: #ffffff; color: #79c25b;'></i>
	<a href='https://www.android.com/'></a>
	Android
</div>

<div>
	<i class='fa fa-angellist' style='background: #333333; color: #ffffff;'></i>
	<a href='http://angellist.com'></a>
	AngelList
</div>

<div>
	<i class='fa fa-apple' style='background: #ffffff; color: #999999;'></i>
	<a href='http://apple.com'></a>
	Apple
</div>

<div>
	<i class='fa fa-paw' style='background: #ffffff; color: #0000FF;'></i>
	<a href='#' class='baiduHelper'></a>
	Baidu 百度
</div>

<div>
	<i class='fa fa-behance' style='background: #000000; color: #eaeaea;'></i>
	<a href='http://behance.com'></a>
	Behance
</div>

<div>
	<i class='fa fa-bitbucket' style='background: #ffffff; color: #1C4679;'></i>
	<a href='http://bitbucket.org'></a>
	BitBucket
</div>

<div>
	<i class='fa fa-bitcoin' style='background: #999999; color: #ffffff;'></i>
	<a href='https://bitcoin.org'></a>
	Bitcoin
</div>

<div>
	<i class='fa fa-cogs' style='background: #F3881F; color: #ffffff;'></i>
	<a href='#' class='bloggerHelper'></a>
	Blogger
</div>

<div>
	<i class='fa fa-delicious' style='background: #0c83e8; color: #ffffff;'></i>
	<a href='#' class='deliciousHelper'></a>
	Delicious
</div>

<div>
	<i class='fa fa-deviantart' style='background: #455749; color: #C2D929;'></i>
	<a href='http://deviantart.com'></a>
	DeviantArt
</div>

<div>
	<i class='fa fa-digg' style='background: #000000; color: #ffffff;'></i>
	<a href='#' class='diggHelper'></a>
	Digg
</div>

<div>
	<i class='fa fa-dribbble' style='background: #EE5891; color: #BC0D59;'></i>
	<a href='http://dribbble.com'></a>
	Dribbble
</div>

<div>
	<i class='fa fa-dropbox' style='background: #ffffff; color: #158de2;'></i>
	<a href='http://dropbox.com'></a>
	Dropbox
</div>

<div>
	<i class='fa fa-smile-o' style='background: #ffffff; color: #000000;'></i>
	<a href='http://ello.com'></a>
	Ello
</div>

<div>
	<i class='fa fa-facebook' style='background: #406fac; color: #ffffff;'></i>
	<a href='#' class='facebookHelper'></a>
	Facebook
</div>

<div>
	<i class='fa fa-flickr' style='background: #ffffff; color: #fd028e;'></i>
	<a href='http://flickr.com'></a>
	Flickr
</div>

<div>
	<i class='fa fa-foursquare' style='background: #eb4c7b; color: #ffffff;'></i>
	<a href='http://foursquare.com'></a>
	Foursquare
</div>

<div>
	<i class='fa fa-git' style='background: #f6f6f6; color: #191919;'></i>
	<a href='http://github.com'></a>
	GitHub
</div>

<div>
	<i class='fa fa-gitlab' style='background: #5244A7; color: #EA9535;'></i>
	<a href='https://gitlab.com/'></a>
	GitLab
</div>

<div>
	<i class='fa fa-glide' style='background: #3B9AF6; color: #ffffff;'></i>
	<a href='https://www.glide.me/'></a>
	Glide
</div>

<div>
	<i class='fa fa-book' style='background: #6B3103; color: #ffffff;'></i>
	<a href='https://www.goodreads.com/'></a>
	Goodreads
</div>

<div>
	<i class='fa fa-google' style='background: #3c77f5; color: #ffffff;'></i>
	<a href='http://google.com'></a>
	Google
</div>

<div>
	<i class='fa fa-google-plus' style='background: #e15540; color: #ffffff;'></i>
	<a href='#' class='googleplusHelper'></a>
	Google+
</div>

<div>
	<i class='fa fa-google-wallet' style='background: #ffffff; color: #2E59E6;'></i>
	<a href='http://wallet.google.com'></a>
	GoogleWallet
</div>

<div>
	<i class='fa fa-gratipay' style='background: #5D2C01; color: #EFEFEF;'></i>
	<a href='https://gratipay.com/'></a>
	Gratipay
</div>

<div>
	<i class='fa fa-instagram' style='background: #33759d; color: #ffffff;'></i>
	<a href='http://instagram.com'></a>
	Instagram
</div>

<div>
	<i class='fa fa-jsfiddle' style='background: #406FB8; color: #ffffff;'></i>
	<a href='https://jsfiddle.net/'></a>
	JSFiddle
</div>

<div>
	<i class='fa fa-lastfm' style='background: #de031d; color: #ffffff;'></i>
	<a href='http://lastfm.com'></a>
	Last.FM
</div>

<div>
	<i class='fa fa-linkedin' style='background: #0182bd; color: #ffffff;'></i>
	<a href='#' class='linkedinHelper'></a>
	LinkedIn
</div>

<div>
	<i class='fa fa-pencil' style='background: #083B51; color: #15A0E5;'></i>
	<a href='#' class='livejournalHelper'></a>
	LiveJournal
</div>

<div>
	<i class='fa fa-medium' style='background: #ffffff; color: #000000;'></i>
	<a href='http://medium.com'></a>
	Medium
</div>

<div>
	<i class='fa fa-users' style='background: #032087; color: #ffffff;'></i>
	<a href='#' class='myspaceHelper'></a>
	MySpace
</div>

<div>
	<i class='fa fa-odnoklassniki' style='background: #f68d22; color: #ffffff;'></i>
	<a href='#' class='odnoklassnikiHelper'></a>
	Одноклассники
</div>

<div>
	<i class='fa fa-paypal' style='background: #ffffff; color: #042A56;'></i>
	<a href='https://paypal.com'></a>
	PayPal
</div>

<div>
	<i class='fa fa-pinterest' style='background: #d0252d; color: #ffffff;'></i>
	<a href='http://pinterest.com'></a>
	Pinterest
</div>

<div>
	<i class='fa fa-get-pocket' style='background: #ffffff; color: #E72645;'></i>
	<a href='#' class='pocketHelper'></a>
	Pocket
</div>

<div>
	<i class='fa fa-reddit' style='background: #d3e6f8; color: #000000;'></i>
	<a href='#' class='redditHelper'></a>
	Reddit
</div>

<div>
	<i class='fa fa-renren' style='background: #ffffff; color: #0164b4;'></i>
	<a href='#' class='renrenHelper'></a>
	Renren 人人网
</div>

<div>
	<i class='fa fa-skype' style='background: #ffffff; color: #02b7f1;'></i>
	<a href='http://skype.com'></a>
	Skype
</div>

<div>
	<i class='fa fa-slack' style='background: #ffffff; color: #5d3c59;'></i>
	<a href='http://slack.com'></a>
	Slack
</div>

<div>
	<i class='fa fa-slideshare' style='background: #0684bd; color: #ffffff;'></i>
	<a href='http://slideshare.com'></a>
	Slideshare
</div>

<div>
	<i class='fa fa-snapchat-ghost' style='background: #FFFF0A; color: #000000;'></i>
	<a href='https://www.snapchat.com/'></a>
	Snapchat
</div>

<div>
	<i class='fa fa-soundcloud' style='background: #fd8800; color: #ffffff;'></i>
	<a href='http://soundcloud.com'></a>
	SoundCloud
</div>

<div>
	<i class='fa fa-spotify' style='background: #ffffff; color: #33c463;'></i>
	<a href='http://spotify.com'></a>
	Spotify
</div>

<div>
	<i class='fa fa-steam' style='background: #000000; color: #ffffff;'></i>
	<a href='http://store.steampowered.com/'></a>
	Steam
</div>

<div>
	<i class='fa fa-stumbleupon' style='background: #ed5328; color: #ffffff;'></i>
	<a href='#' class='stumbleuponHelper'></a>
	StumbleUpon
</div>

<div>
	<i class='fa fa-tencent-weibo' style='background: #31a2ca; color: #fef18c;'></i>
	<a href='http://t.qq.com/'></a>
	Tencent Weibo
</div>

<div>
	<i class='fa fa-tripadvisor' style='background: #599d48; color: #ffffff;'></i>
	<a href='http://tripadvisor.com/'></a>
	TripAdvisor
</div>

<div>
	<i class='fa fa-tumblr' style='background: #3c4f67; color: #ffffff;'></i>
	<a href='#' class='tumblrHelper'></a>
	Tumblr
</div>

<div>
	<i class='fa fa-twitch' style='background: #6f49ad; color: #ffffff;'></i>
	<a href='http://twitch.tv/'></a>
	Twitch
</div>

<div>
	<i class='fa fa-twitter' style='background: #44A6FD; color: #ffffff;'></i>
	<a href='#' class='twitterHelper'></a>
	Twitter
</div>

<div>
	<i class='fa fa-vk' style='background: #557fab; color: #ffffff;'></i>
	<a href='#' class='vkontakteHelper'></a>
	ВКонтакте
</div>

<div>
	<i class='fa fa-viadeo' style='background: #FF8000; color: #191919;'></i>
	<a href='#' class='viadeoHelper'></a>
	Viadeo
</div>

<div>
	<i class='fa fa-vine' style='background: #01ac84; color: #ffffff;'></i>
	<a href='http://vine.com/'></a>
	Vine
</div>

<div>
	<i class='fa fa-vimeo' style='background: #138AB7; color: #ffffff;'></i>
	<a href='http://vimeo.com/'></a>
	Vimeo
</div>

<div>
	<i class='fa fa-wechat' style='background: #5cbd52; color: #ffffff;'></i>
	<a href='http://wechat.com/'></a>
	WeChat
</div>

<div>
	<i class='fa fa-weibo' style='background: #db2f2d; color: #ffffff;'></i>
	<a href='#' class='weiboHelper'></a>
	Weibo 微博
</div>

<div>
	<i class='fa fa-whatsapp' style='background: #18a70a; color: #ffffff;'></i>
	<a href='http://whatsapp.com/'></a>
	WhatsApp
</div>

<div>
	<i class='fa fa-windows' style='background: #0382db; color: #ffffff;'></i>
	<a href='http://windows.com/'></a>
	Windows
</div>

<div>
	<i class='fa fa-wordpress' style='background: #f0f0f0; color: #4f4f4f;'></i>
	<a href='http://wordpress.org/'></a>
	Wordpress
</div>

<div>
	<i class='fa fa-xing' style='background: #0C5E5F; color: #CAD728;'></i>
	<a href='#' class='xingHelper'></a>
	XING
</div>

<div>
	<i class='fa fa-yahoo' style='background: #49009a; color: #ffffff;'></i>
	<a href='http://yahoo.com/'></a>
	Yahoo!
</div>

<div>
	<i class='fa fa-yelp' style='background: #ffffff; color: #c9321f;'></i>
	<a href='http://yelp.com/'></a>
	Yelp
</div>

<div>
	<i class='fa fa-youtube' style='background: #e02c29; color: #ffffff;'></i>
	<a href='http://youtube.com/'></a>
	YouTube
</div>"%
					
</div><!--/socialIconArray-->
				
<div id="sociableUtilityIcons" class="socialIconArray">
					
%html="<div>
	<i class='fa fa-envelope' style='background: #000000; color: #ffffff;'></i>
	<a href='http://example.com'></a>
	Contact Me
</div>
					
<div>
	<i class='fa fa-paper-plane-o' style='background: #000000; color: #ffffff;'></i>
	<a href='#' class='emailHelper'></a>
	Email This Page
</div>
					
<div>
	<i class='fa fa-print' style='background: #000000; color: #ffffff;'></i>
	<a href='javascript:window.print();'></a>
	Print This Page
</div>
					
<div>
	<i class='fa fa-rss' style='background: #000000; color: #ffffff;'></i>
	<a href='http://example.com/'></a>
	RSS Feed
</div>
					
<div>
	<i class='fa fa-map' style='background: #000000; color: #ffffff;'></i>
	<a href='http://example.com/'></a>
	Site Map
</div>"%
				
</div><!--/sociableUtilityIcons-->
				
			</div>
			
		</div>
	</div>
	<div id="socialPopupModalOverlay%id%" class="socialPopupModalOverlay"></div>
</div>

%[if !edit]% 
<script src="%assetPath%/SocialPopupAssets/modal.js" type="text/javascript"></script>
%[endif]%

%[if edit]% 
<div style="margin-top: 5px;"><strong>Note:</strong> All brand icons are trademarks of their respective owners. Always have smart quotes disabled when editing HTML markup (System Preferences > Keyboard > Text > Smart quotes and dashes). A bug in RapidWeaver 5 / Stacks 2.5 might prevent you viewing all the source code - resizing your RapidWeaver window often fixes this. Alternatively you can copy the code into a code editor to modify it.</div>
%[endif]%