Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


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

edited April 2011 in Questions
This discussion is related to the Twitter addon.
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.

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

    peregrinetravelguide
  • 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

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

    277 x 161 - 4K
    forum.png 4.5K
  • 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 Community Wiki! We are always looking for new content.

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

    StormKillerUnderDog
  • @hgtonight thanks so much for your comment + suggestion

    hgtonightUnderDog
Sign In or Register to comment.