position of twitter button in twitter-bootstrap navbar

Question

this is the main page of my blog http://www.lowcoupling.com it is a tumblr blog based on twitter bootstrap as you can see I have just placed the twitter button in the right side of the nav bar just after the google plus button. I can't see why, when the button is loaded related script, it is placed at the top of the bar and not at the same height of the plus button.

Answer 1

There are some styles applied by bootstrap on nav>a elements. The resulting google+ label is inside a link tag. The other one is not. One quick solution is to include the script of the second label (twitter) inside a link tag.

<li><a>  <---

<a href="https://twitter.com/lowcoupling" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @lowcoupling</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

</a></li>  <----

UPDATE The scripts doesn't consider the link tag as a container so the above won't work. A hack that would work is to give your li tag, <li style="padding: 14px 15px;"></li> . But the best you could do is to check the nav>a styles in bootstrap css and copy those on a class of your own, which you will give it to a container of the iframe.

Answer 2

I just had this annoying issue also. I fixed it by giving my anchor an ID and then using jQuery to move the Twitter rendered stuff into my anchor:

<ul class="nav navbar-nav navbar-right">
    <!-- Note the ID I put on the link -->
    <li><a href="#" id="twitter-fix">
        <a href="https://twitter.com/Whatever" class="twitter-follow-button" data-show-count="false">Follow @Whatever</a>
        <script>
            !function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
            // Custom fix here
            $(".nav .twitter-follow-button").detach().appendTo("#twitter-fix");
        </script>
    </a></li>
    <li><a href="#">Other link</a></li>
</ul>

Answer 3

My solution was simpler - add a line above the twitter button, and set the height using font-size. This was the code in my style.css:

#twitter-fix {
  font-size: 7px;
}

And this was inside my navbar (note the br tag):

<ul class="nav navbar-nav navbar-right">
  <li id="twitter-fix"><br>
  <a href="https://twitter.com/UserName" class="twitter-follow-button"
  data-size="large" data-show-count="false">Follow @UserName</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </li>
</ul>