How to get the twitter button to align with the like button like in the pic?

Lazarus

Hi, this is a great addition thank you for writing it. One little thing when I enable it, it will snap up under on the left side I was wondering how you got it to align with the "facebook like" button on the right side like in your picture? Thanks.

Ross24

I want to do the exact same thing...I'd like to have it next to the "like" button too...anyone know how to do this?

Ross24

Anyone know how to do it? I've tried to copy the same kind of code as the FB Like but it doesn't seem to work...

travelguide

seems like we're having the same prob and it's been a year that nobody shared something. im having a hard time figuring things out.

vrijvlinder

@travelguide Without a screenshot or a link to see the site and examine the code it is very hard to give the proper advice, it is like throwing darts in the dark. Also, depending on your grasp of css and html is how one knows how to answer in a way you can understand.

If you do not have a grasp of these things then you need to learn how or hire someone to do it for you. Alignment and image resizing are rather simple concepts if you know the basics at least of css and html.
Here is a great resource to start learning.

http://www.w3schools.com/css/

im having a hard time figuring things out.

Everyone does but has to learn eventually. It is a matter of learning what you do not know , then it is rather easy. Most people here have years of learning under their belt about one thing or another, it is something that can't be transferred in a day or a week no matter how helpful one want to be. There are things that you need to learn on your own.

.ReactFacebook {
background-position: -40px -120px;
}

.ReactSprite {
background-image: url("http://vanillicon.com/sprites/sprites-14-012f6e.png");
background-size: 396px;
width: 16px;
height: 16px;
}

So in this example, this is the location of the FB on this forum. However it may be named something else using another theme. It may have other coordinates. This is where a link to the site in question comes in handy. The fastest way to help is to look at the source code. Otherwise it's a guessing game.

travelguide

Solved:

open the plugin files via /plugins and look for this code for "liked" & "twitter"

}

public function DiscussionController_AfterDiscussion_Handler(&$Sender) {
    echo sprintf($this->Code, Gdn_Url::Request(true, true, true));
}

************ change BeforeDiscussion_Handler to AfterDiscussion_Handler

with this approach twitter and facebook icons will be transferred to after the discussion. that's the least hack i could do for now

StormKiller

This will make them side by side


class Twitter_ButtonPlugin extends Gdn_Plugin {

private $Code = '<div style="float: right; margin-top: 12px; z-index: 999; position: relative"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="your-twitter-user" data-lang="en">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>';


public function DiscussionController_BeforeDiscussion_Handler(&$Sender) {
    echo sprintf($this->Code, Gdn_Url::Request(true, true, true));
}

public function Setup() {
// No setup required.
}
}

hgtonight

@StormKiller said:
...

Inline styles should be discouraged. Give that div a descriptive class or ID and move those styles to your style sheets where they belong. Not only will it be easier to maintain, other people won't have to resort to the equally terrible !important declaration.

Just a PSA.

StormKiller

@hgtonight thanks so much for your comment + suggestion

Tama

@hgtonight

Reminds me of this painful commit xd