Как всплывающее окно типа Twitter

Я добавил кнопку Twitter в мой блог, используя следующий код:

<a class="twitter popup" href="#" onclick="location.href='http://twitter.com/share?text=mytext'; return false;">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.

Ответы

Ответ 1

Если вам нужен полный контроль над внешним видом, тогда Twitter @anywhere Tweet Box - это то, что вам нужно будет реализовать. Ну, либо это, либо получить клиентскую библиотеку Twitter и перевернуть свой собственный подход.

Использование @anywhere потребует установки приложения на dev.twitter.com, и ваши пользователи должны будут авторизовать ваше приложение, чтобы опубликовать твит, но что цена, которую вы платите за гибкость.

Twitter Веб-намерения могут быть альтернативой для вас, но макет, отображаемый в вашем всплывающем окне, будет щебетать, а не ваш. Это, однако, стоит упомянуть, поскольку у вас нет требования регистрации приложения.

Web Intents обеспечивают всплывающее оптимизацию потоки для работы с Tweets & Twitter Пользователи: Tweet, Ответить, Retweet, "Любимый" и "Следить". Они делают это возможно для пользователей взаимодействовать с Содержимое Twitter в контексте вашего сайта, не выходя из страницы или нужно авторизовать новое приложение только для взаимодействие.

Ответ 2

Если вы просто открываете содержимое страницы в стандартном окне браузера/вкладке, у вас нет большого контроля над тем, как это выглядит. Вы можете получить больше возможностей управления и стилей, если вы откроете его в том же окне браузера, но, возможно, в лайтбокс. Вот некоторые плагины jQuery для lightboxy, которые вы можете проверить:

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

Ответ 3

Почему бы вам не использовать кнопку "Tweet", предоставленную Twitter, и она позаботится обо всем...

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

Ответ 4

Вы можете:

  • Используйте API Twitter для публикации сообщений от имени своих пользователей. Таким образом, вы получаете полный контроль над функциональностью/разметкой, но это также означает, что ваши пользователи авторизуют ваше приложение, и большинство пользователей устойчивы к этому.
  • Создайте <form>, который имеет те же входные элементы/имена, что и страница Twitter (http://twitter.com/intent/tweet?text=mytext). Это связано с тем, что они могут изменять требуемые параметры в любое время и без предупреждения.

Однако: Я не рекомендую ни одного из них, так как оба будут убирать пользователей. По умолчанию и официальная страница Twitter знакомы им, и они, скорее всего, что-то опубликуют. Кроме того, присутствие в домене twitter.com дает им (ну, некоторые из них) чувство безопасности.