StumbleUpon публикует Widget script и documents, как использовать его, чтобы вставить кнопку stumbleUpon (они называют это значок), на веб-сайт.Как создать пользовательскую кнопку StumbleUpon?
Вы можете создать разметку для кнопки с their online tool. Это выглядит так:
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2" location="http://example.com"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = 'https://platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
Этот элемент сценария - это всего лишь способ задержать загрузку вещи widgets.js. Просто взглянув на это, я полагаю, что он работает, просматривая документ для элементов <su:badge>
и заменяя их iframes
. Затем сами iframes получают исходный контент от stumbleupon по адресу, подобному этому: http://badge.stumbleupon.com/badge/embed/4/?url=http%3A%2F%2Fexample.com
.
Функция Iframe делает визуально так:
Кнопка StumbleUpon является второй один. Я показываю другие для сравнения. Как вы можете видеть, рендеринг StumbleUpon выглядит иначе, чем все остальные ребята. SU делает свою кнопку похожим на «значок», а каждый другой вид виджета в социальных сетях выглядит как ... uh .... кнопка.
Я пытаюсь сделать виджет Stumbleupon похожим на кнопку. Я уверен, что это возможно. Например, mashable делает это (example). Вот как это выглядит:
Как вы можете видеть, кнопка выглядит как StumbleUpon кнопки. Это не значок. Mashable не использует вещь su:badge
- они сделали свой собственный тег <a>
и стилизовали его.
Визуальный рендеринг не является проблемой; Я могу понять, как сделать span похожим на кнопку, без проблем. Проблема возникает, когда я нажимаю тег или интервал. Мне кажется, что, с IFrame-вещь, которая StumbleUpon использует, он вызывает этот URL, чтобы отправить страницу для совместного использования:
http://www.stumbleupon.com/badge/?url=http%3A//example.com/whatever HTTP/1.1
Функция Iframe используется в JavaScript window.open
для запроса , и ограничивает изменение размера и так далее. Так оно работает на mashable. В результате окно выглядит следующим образом:
Это также то, что Mashable страница делает, хотя он не использует IFRAME. Страница Mashable содержит javascript, который просто открывает окно «stumbleupon submit» непосредственно с главной страницы mashable.
Но когда я пытаюсь то же самое с моей страницы, маленькое неподвижное стекло получает 302 редиректа от StumbleUpon, а потом еще 302, который в конечном счете указует его
... который не позволяет использовать ссылку.
Это была длинная история, но:
ли кто-нибудь есть какие-либо представление о том, как я могу убедить StumbleUpon позволить мне поделиться ссылкой или URL, с помощью кнопки, которая не содержится в плавающем фрейме?
Что такое секрет mashable?