#6 Fixed Scrolling Social Buttons

Image may be NSFW.
Clik here to view.

Clearly the excitement of being able to make something fixed on a page has become one of my favourite things (see fixed navigation post) and being able to make the social media sharing buttons do the same is something I could not pass on! I even had fireworks going off outside when parts were working, a nice setting for a day to night of coding.

Not only will you learn how to do this yourself in this post but you become a ‘Facebook Developer’- tell me that doesn’t sound impressive?!

This is a long tutorial so get set-up with tea and biscuits and you will be ready to go! I managed to make it through 7 cups of tea whilst completing this task… don’t say I didn’t warn you! I do like tea a lot though…

We will start by creating an app on Facebook, please go to this page.

Image may be NSFW.
Clik here to view.

Fill in the details:

Image may be NSFW.
Clik here to view.

You are now facebook developer(!!):

Image may be NSFW.
Clik here to view.

Next click on create a new app in the top right hand corner:

Enter the details of your blog name and create an App Namespace name:

Image may be NSFW.
Clik here to view.

You may get this message come up select one to verify:

Image may be NSFW.
Clik here to view.

Please just continue with the steps to verify your account and follow them through to make your app.

Once complete you will be given a Facebook App Id which can be found here:

Image may be NSFW.
Clik here to view.

Now we can start with the coding, add jQuery into the footer.php file, put this just before the </body> tag:

<!-- social media links -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

You will need to change the Facebook app Id where the code here says YOUR_APP_ID.

The Facebook line of code should now look similar to this (but with your id):

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=359804210832601";

Next we need to add the font awesome links into header for our social media graphics. To do this we have to get the link from the font awesome website.

Add this link to the header.php file underneath your last <link> tag:

<!-- Font Awesome Inserted here-->

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Next, add social media links code into content-single.php underneath your author box code:

<!-- social media links -->
	<div class="socialmedia-buttons">
		<div class="social-twitter social-wrap">
			<ul>
				<li class="social-link"><i class="fa fa-twitter"></i></li>
					<ul  class="social-wid">
						<li class="twitter-count"><i class="fa fa-caret-left"></i><a href="http://twitter.com/share" class="twitter-share-button"
						data-url="<?php the_permalink(); ?>"
						data-via="chloedigital"
						data-text="<?php the_title(); ?>"
						data-count="horizontal">Tweet</a></li>
					</ul>
			</ul>
		</div>

		<div class="social-facebook social-wrap">
			<ul>	
				<li class="social-link"><i class="fa fa-facebook"></i></li>
					<ul class="social-wid">
						<li class="facebook-count"><i class="fa fa-caret-left"></i><fb:share-button type="button_count" href="<?php the_permalink(); ?>"></fb:share-button></li>
					</ul>
			</ul>
		</div>	

		<div class="social-pinterest social-wrap">
			<ul>
				<li class="social-link" id="last"><i class="fa fa-pinterest"></i></li>
					<ul class="social-wid">
						<li class="pinterest-count"><i class="fa fa-caret-left"></i><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li>
					</ul>	
			</ul>
		</div>
	</div>

You will need to edit the twitter information slightly as you can see here I have linked it to the chloédigital twitter by entering the our twitter handle name next to data-via=”chloedigital”, change your’s accordingly:

<li class="twitter-count"><i class="fa fa-caret-left"></i><a href="http://twitter.com/share" class="twitter-share-button"
						data-url="<?php the_permalink(); ?>"
						data-via="chloedigital"
						data-text="<?php the_title(); ?>"
						data-count="horizontal">Tweet</a></li>

Now we need to add some jQuery for the fixed effect, paste the code into your main.js file at the bottom but before the final ‘});':

if($('body').hasClass('single')){
	var fixedSocialBtns = $('.socialmedia-buttons')[0].offsetTop;
	$(document).bind('ready scroll',function() {
	var docScroll = $(document).scrollTop();
	if(docScroll >= fixedSocialBtns) {
	$('.socialmedia-buttons').addClass('fixed');

	} else {
	$('.socialmedia-buttons').removeClass('fixed');

	}
	});
	}

Next add the jQuery script for the hover effect, paste the code into your main.js file underneath the code above (again before the ‘});’):

$('.social-wrap').on('hover', function() {
	          $(this).find('.social-wid').toggleClass( 'display' ); $(this).toggleClass( 'social-wrap-open' );
	         }
	       );

And finally add the styling into the style.css

/* =Social Links
-------------------------------------------------------- */

#content article {
	position: relative;
}

.socialmedia-buttons {
	display: block;
	position: absolute;
	left: -50px;
	top: 218px;
}

.socialmedia-buttons.fixed {
	position: fixed;
	left: initial;
	margin-left: -50px;
}

.social-link{
	border-left: solid 1px black;
	border-right: solid 1px black;
	border-top: solid 1px black;
	width:30px;
	height:30px;
	text-align: center;
	padding:5px 0 0 0;
	cursor: pointer
}

#last.social-link{
	border-bottom: solid 1px #000;
}

.social-link li:hover{
	color:#ccc;
	}

.social-wid ul{
	list-style-type: none;
	margin:0;
	padding:0;
}

.social-wid li {
	display: none;
	background-color: #000;
	width: 100px;
	padding: 12px 10px 0px;
	height: 45px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.social-wid li.facebook-count{
	padding-top: 7px;
}

.social-wid li.pinterest-count{
	padding-top: 11px;
}

.social-wid li i {
	position: absolute;
	left: -10px;
	font-size: 30px;
	top: 7px;
}

.social-wid.display li{
	display: block;
}

.social-wid.display li{
	display: block;
}

.social-wrap{
	position: relative;
}

.social-wid{
	position: absolute;
	top:0;
	left: 45px;
}

.social-wrap-open {
	width: 145px;
}

Your fixed social media sharing buttons are now on your blog posts individual pages. However, if you want to add them to your blog home page as well, open up the index.php file:

<!-- social media links -->
	<div class="socialmedia-buttons-home">
		<div class="social-twitter social-wrap">
			<ul>
				<li class="social-link"><i class="fa fa-twitter"></i></li>
					<ul  class="social-wid">
						<li class="twitter-count"><i class="fa fa-caret-left"></i><a href="http://twitter.com/share" class="twitter-share-button"
						data-url="<?php the_permalink(); ?>"
						data-via="chloedigital"
						data-text="<?php the_title(); ?>"
						data-count="horizontal">Tweet</a></li>
					</ul>
			</ul>
		</div>

		<div class="social-facebook social-wrap">
			<ul>	
				<li class="social-link"><i class="fa fa-facebook"></i></li>
					<ul class="social-wid">
						<li class="facebook-count"><i class="fa fa-caret-left"></i><fb:share-button type="button_count" href="<?php the_permalink(); ?>"></fb:share-button></li>
					</ul>
			</ul>
		</div>	

		<div class="social-pinterest social-wrap">
			<ul>
				<li class="social-link" id="last"><i class="fa fa-pinterest"></i></li>
					<ul class="social-wid">
						<li class="pinterest-count"><i class="fa fa-caret-left"></i><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li>
					</ul>	
			</ul>
		</div>
	</div>

Copy and paste the code above underneath this section of code:

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

To style this code add this code at the bottom of your styling which you added for this tutorial earlier:

.socialmedia-buttons-home {
	display: block;
	position: absolute;
	z-index: 9999999;
	margin: 0 0 0 -50px;
}

body.blog h1.entry-title {margin: 0px;}

*Updated code*

Since completing this tutorial I have realised that the .socialmedia-buttons-home do not need such a high z-index, I did this because the z-index for a fixed navigation bar should be this high. However, the socialmedia buttons only need to go higher than the page content therefore the z-index can be set to 1 instead.

.socialmedia-buttons-home {
	display: block;
	position: absolute;
	z-index: 1;
	margin: 0 0 0 -50px;
}

You are finished!!

NB- I have now added a footer to the site therefore I have had to change the code entered into main.js to this:

if($('body').hasClass('single')){
				var fixedSocialBtns = $('.socialmedia-buttons').offset().top;
				var footerOffset = $("footer#colophon").offset().top;
				$(document).bind('ready scroll',function() {
				var docScroll = $(document).scrollTop();
				if(docScroll >= fixedSocialBtns && $(window).scrollTop() + 900 < footerOffset) {
				$('.socialmedia-buttons').addClass('fixed');

				} else {
				$('.socialmedia-buttons').removeClass('fixed');

				}
				});
			}

DAY 6 COMPLETE!

Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

The post #6 Fixed Scrolling Social Buttons appeared first on The Fashion Technologist.