Skip to content

franck-paul/socialShare

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

socialShare plugin for Dotclear 2

Summary

This plugin adds social share buttons to posts and/or pages, for:

Twitter, Facebook, Google+, LinkedIn, Mastodon social networks and by mail.

Markup

<div class="share">
	<p class="share-intro"><PREFIX></p>
	<ul class="share-links">
		<li>
			<a  class="share-twitter"
				target="_blank"
				title="Share this post on Twitter (new window)"
				href="https://twitter.com/share?url=<URL>&amp;text=<TITRE>&amp;via="<TWITTER-ACCOUNT>"
				rel="nofollow">
					Twitter
			</a>
		</li>
		<li>
			<a
				class="share-fb"
				target="_blank"
				title="Share this post on Facebook (new window)"
				href="https://www.facebook.com/sharer.php?u=<URL>&amp;t=<TITRE>"
				rel="nofollow">
					Facebook
			</a>
		</li>
		<li>
			<a
				class="share-in"
				target="_blank"
				title="Share this post on LinkedIn (new window)"
				href="https://www.linkedin.com/shareArticle?mini=true&url=<URL>&amp;title=<TITRE>"
				rel="nofollow">
					LinkedIn
			</a>
		</li>
		<li>
			<a
				class="share-mastodon"
				target="_blank"
				title="Share this post on Mastodon (new window)"
				href="web+mastodon://share?text=<TITRE>+<URL>"
				rel="nofollow">
					Mastodon
			</a>
		</li>
		<li>
			<a
				class="share-mail"
				target="_blank"
				title="Share this post by email (new window)"
				href="mailto:?subject=<TITRE>&amp;body=<URL>"
				rel="nofollow">
					email
				</a>
		</li>
	</ul>
</div>

Default style for social share links

.share {
	font-size: 0.875em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 0.5em 0px;
	text-align: right;
	clear: both;
}

.share p, .share ul, .share li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}

.share p {
	padding-right: 1.5em;
}

.share a {
	padding: 0.25em 0.5em 0.25em 2em;
	margin-right: 0.5em;
	background-position: 0.25em center;
	background-repeat: no-repeat;
	background-size: 1.5em auto;
	text-decoration: none;
}

.share ul li:last-child a {
	margin-right: 0;
}

.share a:hover {
	color: #fff;
}

.share .share-twitter {
	background-image: url("index.php?pf=socialShare/img/icon-twitter.png");
	background-image: url("index.php?pf=socialShare/img/icon-twitter.svg"), none;
}
.share .share-twitter:hover {
	background-color: #78cbef;
}

.share .share-fb {
	background-image: url("index.php?pf=socialShare/img/icon-facebook.png");
	background-image: url("index.php?pf=socialShare/img/icon-facebook.svg"), none;
}
.share .share-fb:hover {
	background-color: #547bbc;
}

.share .share-in {
	background-image: url("index.php?pf=socialShare/img/icon-linkedin.png");
	background-image: url("index.php?pf=socialShare/img/icon-linkedin.svg"), none;
}
.share .share-in:hover {
	background-color: #1686b0;
}

.share .share-mastodon {
	background-image: url("index.php?pf=socialShare/img/icon-mastodon.png");
	background-image: url("index.php?pf=socialShare/img/icon-mastodon.svg"), none;
}
.share .share-mastodon:hover {
	background-color: #3088d4;
}

.share .share-mail {
	background-image: url("index.php?pf=socialShare/img/icon-email.png");
	background-image: url("index.php?pf=socialShare/img/icon-email.svg"), none;
}
.share .share-mail:hover {
	background-color: #99c122;
}

Notes

  • the SVG icons will not be functionnal before Dotclear 2.8 (rev 3014)
  • the image URLs (png or svg) may vary depending on your configuration