WordPress Component Library
10up Engineering

Social Sharing Links

The social links component contains easy HTML, CSS, and JavaScript for outputting share buttons into a UI. It has added security and accessibility measures installed as well.

HTML

<div class="social-links">
	<ul class="social-links__list">
		<li class="social-links__item">
			<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&t=<?php echo urlencode( $post->post_title ); ?>" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					<?php esc_html_e( 'Share on Facebook', 'tenup' ); ?><span class="sr-text"><?php esc_html_e( '(opens new window)', 'tenup' ); ?></span>
				</span>
			</a>
		</li>
		<li class="social-links__item">
			<a href="https://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					<?php esc_html_e( 'Share on Twitter', 'tenup' ); ?>  <span class="sr-text"><?php esc_html_e( '(opens new window)', 'tenup' ); ?></span>
				</span>
			</a>
		</li>
		<li class="social-links__item">
			<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					<?php esc_html_e( 'Share on LinkedIn', 'tenup' ); ?> <span class="sr-text"><?php esc_html_e( '(opens new window)', 'tenup' ); ?></span>
				</span>
			</a>
		</li>
		<li class="social-links__item">
			<a href="http://www.pinterest.com/pin/create/bookmarklet/?url=<?php echo urlencode( esc_url( get_permalink( get_the_ID() ) ) ); ?>&media=<?php echo urlencode( esc_url( $imgurl )); ?>&is_video=false&description=<?php echo urlencode( esc_attr( get_the_excerpt() ) ); ?>" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					<?php esc_html_e( 'Share on Pinterest', 'tenup' ); ?> <span class="sr-text"><?php esc_html_e( '(opens new window)', 'tenup' ); ?></span>
				</span>
			</a>
		</li>
	</ul>
</div><!--/.links__share-->
<div class="social-links">
	<ul class="social-links__list">
		<li class="social-links__item">
			<a href="https://www.facebook.com/sharer/sharer.php?u=http://google.com&t=Google" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					Share on Facebook <span class="screen-reader-text">(opens new window)</span>
				</span>
			</a>
		</li>
		<li class="social-links__item">
			<a href="https://twitter.com/share?text=Google&url=http://google.com" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					Share on Twitter  <span class="screen-reader-text">(opens new window)</span>
				</span>

			</a>
		</li>
		<li class="social-links__item">
			<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://google.com&title=Google" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					Share on LinkedIn  <span class="screen-reader-text">(opens new window)</span>
				</span>
			</a>
		</li>
		<li class="social-links__item">
			<a href="http://www.pinterest.com/pin/create/bookmarklet/?url=http://google.com&media=" target="_blank" rel="noopener noreferrer" class="social-links__link">
				<span class="social-links__text">
					Share on Pinterest <span class="screen-reader-text">(opens new window)</span>
				</span>
			</a>
		</li>
	</ul>
</div><!--/.social-links-->

SCSS Download SCSS

// Variables
$color-white: #fff;

$color-facebook: #3b5998;
$color-twitter: #1da1f2;
$color-linkedin: #0077B5;
$color-pinterest: #c92228;

// Mixins
@mixin social_link( $service, $color ) {

	&[href*="#{$service}"] {
		background-color: $color;
		border-radius: 2px;
		color: $color-white;
		transition: background-color linear .2s;

		&:hover {
			background-color: darken( $color, 15 );
		}

	}

}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.social-links {

	&__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	&__item {
		display: inline-block;
	}

	&__link {
		display: block;
		padding: 6px 12px;
		text-decoration: none;

		// If you want to add an icon with CSS
		&:before {
			// content: "";
		}

		// Style hooks into each link
		@include social_link( facebook, $color-facebook );
		@include social_link( twitter, $color-twitter );
		@include social_link( linkedin, $color-linkedin );
		@include social_link( pinterest, $color-pinterest );

	}

	&__text {
		// Style hook into the text
	}

} // .social-links

JS Usage | Plugin

TenUp.socialLinks( {
	'target' : '.social-links',
	'window_height' : 450,
	'window_width'  : 625
}, function() {
	console.log( 'Amazing callback function!' );
} );

JavaScript API

This is the main method to call the plugin. It currently takes two arguments, an options object and callback function.

options

Currently recognizes the following: target, toggle, sub_menu_open. To request more options, please file an issue.

target : '.social-links'

The target option should contain the ID or class of the social links wrapper.

window_height : 450

This option allows you to dictate the height of the popup window.

window_width : 625

This option allows you to dictate the width of the popup window.

callback

Accepts a function that will be executed upon completion.

Resources