Community

NICE!!!

I tried right instead of inline but it did not work =/

Hi --- the code is posted here:

http://code.squarespace.com/code-library/display-html-snippets-on-a-single-line.html

As a note, these elements are contained within the default journal post tag -- so using "display: right" isn't going to move them as it doesn't have any logic in terms of right of what.... So you would probably be better to use more specific CSS e.g. margin-left --- to bump these elements right.

hth!

Excellent. Thanks guys. I think I still need to do some proper study of CSS. Perhaps this winter...

I managed to get the twitter and facebook buttons to display fine on the sub-heading; but when putting the Buzz icon next - I couldn't tweak it to align the 3 - so it looked odd. I ended up putting the buzz in the footer instead - which isn't great - but it looks ok.

A.

Hi Andy,

Could you tell me what you did to put the like/tweet buttons in line. I added this to CSS

.post-snippet-1 {
display:inline;
}

.post-snippet-2 {
display:inline;
}

.post-snippet-3 {
display:inline;
}

and it didn't do much for me..at first it was because I had 'faces' showing on the facebook button but i tweaked that and still don't have them inline. I'm a non- coder so any help would be greatly appreciated, thanks.

I'm totally stumped and disappointed by this as well. I even submitted a support ticket and got a response that they looked at the code I had entered to display Like and Tweet on the same line but that they don't work because of my blog layout. They are not able to provide support to say how to fix this as they don't support customizing CSS (in order to make it actually work?!) I'm very disappointed...two little buttons taking but about 8 lines of space on each of my articles. #fail

Can someone please help me with negative padding. I finally managed to get both buttons inline but now they are not hugging. SS of course can't help but i'm hopeful someone here can help me out.

the site is www.themilliondollardeli.com

thanks

I added this to the CSS, as recommended above. I guess the !important was important ;-)

.post-snippet-1 { display: inline !important; }
.post-snippet-2 { display: inline !important; }
.post-snippet-3 { display: inline !important; }

What do you mean by not hugging?

Took me a while to remember that if you are using "Style Overrides" to make sure to insert the custom CSS code in the template/stylesheet used for that specific page. In addition, I needed to adjust down the width measurement for the Facebook button. Once I did both these things, Twitter and Facebook buttons lined up on the same line using the CSS code provided by Squarespace.

This is not working with the tweet button on my site. I'm using chrome and IE8 to test it. It's still showing up a line below the post date and other stuff.

HI Andy,

BY hugging I meant the buttons are still not quite next to each other--i have managed to get them on the same line, reduced the width of the facebook button but there is still some space in between each button. Any ideas?thanks

You may have some margin or padding set for the elements.

In the proper template, go to the page you want to adjust, click on the Paintbrush icon and then Fonts, Colors, Sizes. I think the elements/buttons are "links." Check to see if you have margin or padding that you can adjust to bring the buttons closer together.

This may affect the spacing in other parts of you site though so you might have to play around to get the look you want.

I understand the you need to use %permalink% and %title% so that the Twitter button will work correctly on the homepage, but can someone help me on how-to implement that into the full code please?

This is the code I inserted in the snippet box to have the tweet button include the specific (shortened) URL of the journal post and mention the Journal Post Title automatically.

Replace the ? at beginning and end with < > brackets (respectively) and insert your actual twitter name in place of your_twitter_name.

?a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="your_twitter_name" data-text="%TITLE%" data-url="%PERMALINK%">Tweet</a?

This is working for me. Hope it works for you.

Oy! Sorry.

Here's the additional code for the twitter button. Replace the ?with < > brackets and add to the previous code so it is one entire block.

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