Creating Inline Social Media Share Buttons

2012-04-05_1708

Squarespace Sharing Hell

One of the biggest frustrations I hear from Squarespace users is trying to line up those dang Social Media Share buttons. There’s only three html snippets and it’s easy to use them up on Facebook, Google+, and Twitter. What if you want to use them somewhere else? It’s for this reason that I’m writing this post before showing you how to use Google Adsense Part 2 (or any other type of ads for that matter) in these html snippets. So first we need to get these social media icons in one snippet of code. Get ready to try out some custom CSS. I promise it won’t hurt too bad!

inline social media icons Creating Inline Social Media Share Buttons photo

Squarespace Custom CSS

icon style1 Creating Inline Social Media Share Buttons photoFirst, you will navigate to your template’s Custom CSS tab in the Style module and then paste in the following code making sure you click save. The 5px of padding adds negative space around each button so they don’t cram up next to each other. Feel free to change this number to add more or less space as needed.

.share_button {
float: left;
padding: 5px;
2012 04 18 2142 550x290 Creating Inline Social Media Share Buttons photo

STYLE -> CUSTOM CSS

Squarespace Social Media HTML

Next, you will need to decide which individual social media icons you want to use. Here’s the custom html code snippet  for buttons I use. The main thing to remember when copying the snippets of code is to make sure %PERMALINK% doesn’t get changed in the process. That’s usually where any problems start. Also keep a close watch on quotation  marks (“). It may help to use a text editor (eg Notepad) if you are not using my exact configuration.

*NB 1. YOU MUST UPLOAD YOUR OWN PINIT BUTTON AND CHANGE THE URL IN THE BELOW CODE TO THE IMAGE IN YOUR FILE STORAGE (src=”/storage/yourbutton.png”) 2. REPLACE  BUFFER USERNAME (data-via=”username”)

After a zillion attempts at trying to make this code appear without jacking up my website, I’ve included a screenshot instead. To copy the html code go to http://textsnip.com/80790a.

2012 04 19 0134 550x550 Creating Inline Social Media Share Buttons photo

Links to Customize your Social Media Buttons:

Journal Configuration and Html Snippets

icon structure1 Creating Inline Social Media Share Buttons photoOnce you have your social media share buttons configured and in the order you want, switch to Structure Mode and click Configure this Page.

2012 04 18 2326 001 Creating Inline Social Media Share Buttons photo

Structure -> Configure the Page

Now you should be in the Journal Configuration Screen. Scroll down to Post Display Configuration and choose one of the three HTML Snippets and paste the entire social media html code in the text area. Click Hide and Save as well as the Save Page Configuration button.

2012 04 18 2325 550x511 Creating Inline Social Media Share Buttons photo

Choose one Html Snippet in Journal Configuration

2012 04 18 2326 550x309 Creating Inline Social Media Share Buttons photo

Paste Social Media Html and Save

Google+ Script

If you decide to use Google+, you will need to copy and paste the following code in your footer. (While still in structure mode, scroll down and click edit website footer) You could even try to include it in the html above, but I haven’t tried it yet and I know this way works. Again, it’s a screenshot. Go to http://textsnip.com/9818f0 to copy the code.

2012 04 19 0140 550x131 Creating Inline Social Media Share Buttons photo

 

How Did You Do?

I know this may seem to be a lot to get your brain around, but it took me much much longer to write this tutorial than to actually execute each step. If you have any issues or questions, please let me know in the comments! I’ll do my best to help.  Also remember that if you use social share buttons with box counters, you may need to adjust the height and/or width.

Related Official Squarespace Help Pages

Related SSP Tutorials


If you would like to receive other tips and tutorials,  follow Squarespace Plugins via RSS or sign-up for the SSP Monthly Newsletter which will include all the tutorials for the month as well as the latest Squarespace happenings around the net. (Your info will not be shared or sold to anyone)

*Affiliate Links to Squarespace included in post. Thanks for supporting Squarespace Plugins!

Squarespace user since 2009. Traveling throughout North America with my first husband and three kids. You can follow our journey at FoggyPhils. (http://www.foggyphils.com)

15 Comments on "Creating Inline Social Media Share Buttons"

  1. Hi Holly!!

    I wanted to tell you how much I appreciate all the work you put into your wonderful blog and how much I absolutely love your helpful tips, your design sensibilities and your good humor. I think you’re awesome.

    As a member of the tribe of Squarespace fans, and a grandma who loves learning new tricks, I thank you so much!

    Warmly,
    Sue

    • Holly says:

      You make me blush Sue!
      I delayed in replying until I could show you something ;) ;)
      I hope you don’t mind http://www.aboutus.org/SquarespacePlugins.com
      (I didn’t realize you can’t directly link outside the domain’s aboutus page until I was done, but it still might be beneficial to everyone I mentioned)

      Also, I was going to leave a comment on one of your blog posts but commenting is turned off…you may already be aware, but just wanted to let you know.

  2. Pardon my ignorance but I can’t — for the life of me — find my Buffer username in my Buffer account. where is it mentioned?

  3. Nevermind! I figured it out ;-)

    • Holly says:

      Oh Good Brad! Sorry for the delay..I’ve been at the beach this past week with a (mostly) “no electronics” restriction policy from my family ;)

  4. Johanna says:

    Thank you for posting this tutorial. I am going to try it as soon as I get home today. I do have one question that is kind of related to this topic. Do you know how to control the information that is shared when you use these buttons? For instance, when I hit like, how do I get it to share the Journal entry name and a picture versus just the URL of the page?

    Thank you so much!

    • Holly says:

      The %Permalink% variable within the code should limit the sharing feature to the url/post you are sharing. Not sure how you can control the exact picture with this version of FB code. I think you would have to integrate the more complex xfbml version of the button…something I should tackle in a future post. I’ll be honest though, Facebook is not something I enjoy using beyond personal relationships as it’s such a time sucker for me…too many rabbit trails ;)

  5. Mahesh Baxi says:

    This was extremely useful article and it worked beautifully well. Thank you so much for sharing and making life easier :)

  6. Seth says:

    Hi Holly, This is a really detailed article and the only one I’ve been able to find on this topic. I’m trying to use the same instructions to add a row of social media buttons to my reqular pages. Is the process he same? I’ve added the CSS code and the Pinterest button but I dont see a button show up on my page. I’m also trying to add a facebook send button in all this madness. Any help or advice would be great! Thank you.

    • Holly says:

      It looks like you figured it out Seth?! Sorry for the delay, but internet access is a luxury at our current location/s so I’m a bit behind on replies. I assume this is for SSv6. Either way, it should work but you will need to enter it on each page unless you include it in the footer (which looks to be what you’ve done).

  7. Jerred says:

    Is this website built on wordpress?? Interesting.

    • Holly says:

      Yes, yes it is! Which I make abundantly clear on my “About” page :)
      This started out as tutorials for a homeschool group who uses a mix of WP, Squarespace, Blogger, Tumblr, well…really any platform that works for a specific project. However, it has morphed over the past couple of years. I’m in the process of migrating to Squarespace 6, but waiting for the perfect moment to “jump”. However, I do have several other Squarespace and Squarespace 6 websites as well.

  8. nicole says:

    I could use some more detail on changing the Pinterest and Buffer elements. Thanks!

  9. Holly, I’ve been feeling like I’m taking crazy pills for awhile now — I adore SquareSpace, but this ONE thing…thank you for helping me reclaim my sanity.

    Now I’m off to peruse your archives in hopes of finding the answer to my TWO thing. How is it that I’ve only just found your blog?? THANK YOU.

Got something to say? Go for it!

 
Loading...
Join over 100 folks and get our free monthly SSP Newsletter.
No-Spam Guarantee. Ever.