Aligning TweetMeme and Facebook Share Button

Never mind, I found a fix in the comment thread on this site: https://www.chethstudios.net/2009/09/facebook-share-count-button-blogger.html

Use this for your wrapper style:

bottom:-65px; float:left; left:-62px; margin-bottom:65px; margin-right:-52px; position:relative;

Hi

Can you help me with this too? Where in the code do I paste this? I’ve vere edited this code (or any code) before so I doin’t know where to put this bit and what to delete.

Please???

BTW, I thought this plug-in had a settings menu biut it doesn’t seem to have one??

Ian

On Mashable’s site, in their post pages (not the home page), there’s a floating widget to the left of the content that descends as you scroll down below the fold, but doesn’t ascend above a certain point.

I’d love to replicate this, but their site is so clogged with code that I’m having a really hard time parsing apart the (javascript) scripting that’s controlling this.

Thoughts or any help identifying the moving parts?

https://csscreator.com/files/screenshot_22.jpg

@jasicom – download the Firebug extension for Firefox, and it should enable you to narrow down the CSS rules driving their floating widget

https://getfirebug.com/
https://addons.mozilla.org/en-US/firefox/addon/1843

For some reason I can’t get the facebook share button below my tweetmeme button, even I use

clear:left; float: left; margin-right: 10px; margin-top:10px;

Any thoughts? Example here: https://theportlander.com/portland-business-journal-honors-40-under-40/

I’d be fine with them side by side also, but I’d prefer Tweetmeme on the Left and Facebook on the right. Anyone know how i can do that?

also noticed that in IE8, the Tweetmeme and Facebook share buttons are not at the same height.

Suggestions?

Forgive me, I don’t do CSS or HTML so I ask annoying questions.

Here’s a follow-up question:

I want to put them side by side, but I want the FB Share plugin to show up FIRST.

With both of them fighting for “float: right; margin-left: 10px;”, how can I accomplish this?

@tamar u can change margin-left: 10px; to margin-left: 50px;

Was finally able to get a nice vertical stack of these social media icons using the following CSS:

Stacked on the left side (See example at https://blog.webnme2.com)

Buzz

clear: left; float: left; margin-left:-80px; margin-right: 10px; margin-top: 0px;

TweetMeme

bottom:-65px; float:left; left:-75px; margin-bottom:65px; margin-right:-62px; position:relative;

Facebook

bottom:-135px; float:left; left:-80px; width: 60px; margin-bottom:135px; margin-right:-62px; position:relative;

Stacked on the right side (See example at https://blog.happyflier.com – site I help with)

Buzz

float: right; right: -10px; margin-right: 10px; margin-top: 5px; bottom: 0px; margin-bottom: 0px; postion: relative;

TweetMeme

bottom:-70px; float: right; right: -10px; margin-bottom:70px; margin-right: -55px; margin-top: 10; position:relative;

Facebook

bottom:-135px; float: right; right: -10px; margin-bottom:135px; margin-right: -50px; position:relative;

For the first example, I also had to change the template and style.css file to get the extra white space on the right side.

If you are doing a banner ad at the top with your template, you may also want to check it in compatibility mode in IE8. Both the banner and the social media icons did strange things when in IE8 compatibility mode until the wrapper was perfected to include the bottom and bottom-margin values.

webnme2, what Google Buzz plugin are you using?

Hey Jeff

This is what I’m using:

WPBuzzer Adds a button to Buzz your blog posts

Deactivate | Edit Version 0.8.1 | By Hameedullah Khan | Visit plugin site

https://hameedullah.com/wordpress/wpbuzzer

Since writing the post above, I upgraded the Mystique Theme and found it was a major headache to keep the social icon buttons to the left. Much easier to place them on the right. Lots of editing of php files to do what I have for blog.webnme2.com. Yikes.