如何样式 Twitter 弹出窗口答案

【问题标题】：How Style Twitter popup如何样式 Twitter 弹出窗口
【发布时间】：2011-09-14 14:59:06
【问题描述】：

我使用以下代码在我的博客中添加了一个 Twitter 分享按钮：

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

然后我在弹出窗口中打开它：

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

有办法设置弹出窗口的样式吗？我想要带有 twitter 表单的样式化弹出窗口。

【问题讨论】：

以什么方式风格？您无法控制 Twitter 页面。您可以做的唯一一件事就是将它加载到 iframe 中并围绕它做一些样式。
我的意思是，有一种方法可以建立我自己的 twitter 页面，当按下 ok 时，将信息发送到 Twitter？

标签： javascript jquery twitter popup

【解决方案1】：

如果您只是在标准浏览器窗口/选项卡中打开页面内容，则无法控制其外观。如果您在同一个浏览器窗口中弹出它，您可以获得更多控制和样式选项，但可能以灯箱方式。以下是一些您可能想要查看的 lightboxy jQuery 插件：

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

【讨论】：

这都是灯箱插件文档的一部分。您只需阅读它。

【解决方案2】：

你为什么不使用 Twitter 提供的“Tweet Button”，它会处理一切......

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

【讨论】：

【解决方案3】：

你可以：

使用 Twitter API 代表您的用户发布消息。通过这种方式，您可以完全控制功能/标记，但这也意味着让您的用户授权您的应用，并且大多数用户都可以适应这一点。
创建一个<form>，其输入元素/名称与 twitter 页面 (http://twitter.com/intent/tweet?text=mytext) 相同。这势必会被打破，因为他们可以随时更改所需的参数而不会发出警告。

但是：我不推荐其中任何一种，因为两者都会让用户望而却步。他们熟悉默认的官方 Twitter 页面，他们更有可能从中发布一些内容。此外，在twitter.com 域上给他们（嗯，他们中的一些人）一种安全感。

【讨论】：

【解决方案4】：

如果您想完全控制外观，那么您需要实现 Twitter 的@anywhere Tweet Box。好吧，要么这样做，要么获取 Twitter 客户端库并推出自己的方法。

使用@anywhere 将要求您在dev.twitter.com 上设置应用程序，并且您的用户需要授权您的应用程序发布推文，但这是您为灵活性付出的代价。

Twitter Web Intents 可能是您的替代方案，但弹出窗口中显示的布局将是 Twitter 的，而不是您的。但是，值得一提的是，因为您没有应用程序注册要求。

Web Intents 提供弹出优化使用 Tweets 和 Twitter 用户：推文、回复、转推、收藏，关注。他们做到了用户可以与之交互在您的上下文中的 Twitter 内容网站，无需离开页面或必须授权一个新的应用程序只是为了互动。

【讨论】：