Aligning TweetMeme and Facebook Share Button
Never mind, I found a fix in the comment thread on this site: http://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;
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.
BTW, I thought this plug-in had a settings menu biut it doesn’t seem to have one??
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.
Thoughts or any help identifying the moving parts?
@jasicom – download the Firebug extension for Firefox, and it should enable you to narrow down the CSS rules driving their floating widget
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: http://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.
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?
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 http://blog.webnme2.com)
clear: left; float: left; margin-left:-80px; margin-right: 10px; margin-top: 0px;
bottom:-65px; float:left; left:-75px; margin-bottom:65px; margin-right:-62px; position:relative;
bottom:-135px; float:left; left:-80px; width: 60px; margin-bottom:135px; margin-right:-62px; position:relative;
Stacked on the right side (See example at http://blog.happyflier.com – site I help with)
float: right; right: -10px; margin-right: 10px; margin-top: 5px; bottom: 0px; margin-bottom: 0px; postion: relative;
bottom:-70px; float: right; right: -10px; margin-bottom:70px; margin-right: -55px; margin-top: 10; position:relative;
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.
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
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.
- The topic ‘Aligning TweetMeme and Facebook Share Button’ is closed to new replies.