Share widget

Share a page

View code 
<div class="wb-share" data-wb-share='{"pnlId": "pnl1"}'></div>

Share a video

View code 
<div class="wb-share" data-wb-share='{"type": "video", "title": "Video title", "url": "https://video.url", "pnlId": "pnl2"}'></div>

Share an audio file

View code 
<div class="wb-share" data-wb-share='{"type": "audio", "title": "Audio file title", "url": "https://audio.url", "pnlId": "pnl8"}'></div>

Share a custom type

View code 
<div class="wb-share" data-wb-share='{"custType": " this comment", "title": "Comment title", "url": "https://comment.url", "pnlId": "pnl3"}'></div>

Add additional links

Second link:
View code 
<div class="wb-share" data-wb-share='{"pnlId": "pnl4"}'></div>
<div class="text-right">
	<strong>Second link:</strong>
	<div class="wb-share link-only text-right" data-wb-share='{"pnlId": "pnl4"}'></div>
</div>

Filter the displayed sites

View code 
<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter"], "pnlId": "pnl5"}'></div>

Add custom CSS to the share link

View code 
<div class="wb-share" data-wb-share='{"pnlId": "pnl6", "lnkClass": "btn btn-default"}'></div>

Add a site to the share panel

View code

HTML

<div class="wb-share" data-wb-share='{"pnlId": "pnl7", "sites": "demosite": {"name": "Demo site", "url": "https://www.example.org/?to=&subject={t}&body={u}%0A{d}"}}'></div>

SCSS

.wb-share {
	.demosite {
		&:before {
			background: url("demosite.png") no-repeat;
		}
	}
}

With X instead of Twitter

View code 
<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "x"], "pnlId": "pnl5a"}'></div>

When X and Twitter are defined

When X and Twitter are both configured, only X will be displayed.

View code 
<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter", "x"], "pnlId": "pnl5b"}'></div>
Date modified: