Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

edited April 2011 in Vanilla 2.0 - 2.8
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.

Comments

  • 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?
  • 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...
  • 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.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    @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.

  • 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

  • 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.
    }
    }

  • hgtonighthgtonight ∞ · New Moderator
    edited November 2013

    @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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @hgtonight thanks so much for your comment + suggestion

  • TamaTama United Kingdom ✭✭✭

    @hgtonight

    Reminds me of this painful commit xd
    imgur.com

    There was an error rendering this rich post.

Sign In or Register to comment.