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

<a class="twitter popup" href="">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.

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.

• javascript
• jquery
• twitter
• popup

• In what way style? You have no control over the twitter page. The only thing you could do is load it in an iframe and do some styling around it. – Felix Commented Jun 14, 2011 at 11:39
• I mean, there is a way to build my own twitter page that, when press ok, send the information to Twitter? – Andref Commented Jun 14, 2011 at 13:29

4 Answers 4

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.

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

Why don't you use the "Tweet Button" provided by Twitter and it will take care of everything...

http://dev.twitter.com/pages/tweet_button

You can:

1. Use the Twitter API to post messages on behalf of your users. This way you get full control over the functionality / markup, but it also means having your users authorize your app, and most users are resilient to that.
2. Create a <form> that has the same input elements / names as the twitter page (http://twitter.com/intent/tweet?text=mytext). This is bound to break because they can change the required parameters at any time and without warning.

However: I do not recommend any of these, as both will drive users away. The default and official Twitter page is familiar to them and they are more likely to post something from it. Also, being on the twitter.com domain gives them (well, some of them) a sense of security.