#6 Fixed Scrolling Social Buttons

Amy Marsh Is A Fashion Technologist In Training

fixed social buttons

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.



Fill in the details:



You are now facebook developer(!!):




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:



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



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:


facebook app id


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



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):



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:



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



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:



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 ‘});':



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



And finally add the styling into the style.css



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:



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



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



*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.


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:



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!

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">