How Style Twitter popup

Question

I added a Twitter share button into my blog using the below code:

<a class="twitter popup" href="http://twitter.com/share?text=mytext">Tweet Me</a>

and I open it in a popup with:

    <script type="text/javascript">
 $('.popup').click(function(event) {
    var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;

    window.open(url, 'twitte', opts);

    return false;
  });</script>

There is a way to style the popup? I want my styled popup with the twitter form in it.

Answer 1

If you want complete control over the look and feel, then Twitter's @anywhere Tweet Box is what you would need to implement. Well, either that or get a Twitter client library and roll your own approach.

Using @anywhere will require you to set up an application on dev.twitter.com, and your users will need to authorize your app to post a tweet, but that's the price you pay for flexibility.

Twitter Web Intents could be an alternative for you, but the layout displayed in your popup would be Twitter's, not yours. It is, however, worth mentioning since you don't have the application registration requirement.

Web Intents provide popup-optimized flows for working with Tweets & Twitter Users: Tweet, Reply, Retweet, Favorite, and Follow. They make it possible for users to interact with Twitter content in the context of your site, without leaving the page or having to authorize a new app just for the interaction.

Answer 2

If you're just opening page content in a standard browser window/tab, you don't have much control over how that looks. You can get more control and styling options if you pop it up in the same browser window, but perhaps in a lightbox fashion. Here are some lightboxy jQuery plugins that you may want to check out:

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts