2010-06-01 3 views
7

Я очень новой для всего программирования - до сих пор у меня есть только опыт создания веб-сайтов, базы данных и т.д.Как построить виджет для моего сайта

Я в настоящее время веб-сайт, где пользователи могут поделиться своими онлайн-покупки ,

Я хочу создать виджет, который другие сайты могут интегрировать на свой сайт. Виджет покажет недавние покупки, введенные на моем веб-сайте, и пользователи должны иметь возможность вставлять свои покупки непосредственно через этот виджет, не заходя на мой сайт.

Мой сайт построен на PHP с использованием Zend Framework и использует Mysql-бэкэнд.

Некоторые из сайтов, на которых я говорю, согласились добавить виджет, если его ненавязчивый, и если все, что им нужно сделать, это вставить 4 строки кода javascript на свои страницы. Я предполагаю, что это должно работать как код Google adsense, в котором вы вводите код JavaScript для googles и показываете рекламу.

Это идея, но я понятия не имею, как это сделать - может ли кто-нибудь указать мне в правильном направлении. Любые примеры или учебники о том, как это сделать.

Пример Google Adsense кодекса

 
<script type='text/javascript'> --></script><script type="text/javascript"><!-- 
google_ad_client = "pub-06xxxx453614"; 
google_ad_width = 728; 
google_ad_height = 90; 
google_ad_format = "728x90_as"; 
google_ad_type = "text"; 
google_ad_channel = "3407467430"; 
google_color_border = "38B63C"; 
google_color_bg = "FFFFFF"; 
google_color_link = "0066CC"; 
google_color_text = "000000"; 
google_color_url = "0066CC"; 
google_ui_features = "rc:0"; 
//--> 
</script> 
<script type="text/javascript" 
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

Является ли это форма виджета, а также - Как Javascript используется здесь? Thanks

+0

Какая технология встроена в ваш сайт? ASP.NET, PHP и т. Д.? Рассмотрите возможность создания сервера API, в котором вы можете открыть только те функции, которые необходимы для виджетов. Виджеты могут обращаться к API через JavaScript, например, или, наоборот, iframe. – RPM1984

+0

Мой сайт основан на PHP/Mysql. Да, я читал об использовании XSS, таких как Google Adsense, где сайт-партнер просто включает в себя строку кода Javascript - на которой будет отображаться форма, с помощью которой пользователи могут отправлять данные. Но не знаю, как это реализовать. Спасибо. – Gublooo

ответ

7

Я не являюсь экспертом в области виджета, но «направлением» является использование iframe, который генерируется динамически на странице, на которой будет размещаться виджет.

Это ваш код JS будет написать что-то вроде:

<iframe src="http://www.mywebsite.com/services/widget.php" {other attributes here} /> 

Функция Iframe обычно содержится в разметки (HTML), который заботится о представлении виджета на странице хостинга. Ваш файл javascript может содержать обработчиков (привязан к событиям на вашем виджете и т. Д.).

Целью iframe может быть скрипт .php (или другой), который выведет html или что-нибудь еще из вашего сайта. Вывод может содержать информацию/данные из вашей базы данных (Mysql, как вы говорите), и выполнять любые операции над этими данными.

Это подход (iframe), используемый в нескольких случаях. Убедитесь, что вы знакомы с окном терминов, родительским в javascript, перед написанием JS-кода в случаях, когда задействуются фреймы и фреймы (как правило, для обработки случаев, когда страница содержит фреймы, которые, в свою очередь, могут содержать другие фреймы и т. Д.)

Надеюсь, это поможет вам начать с предоставления вам общей идеи/подхода по этой теме.

Уверен, вы слышали о рекламе Google. Способ включения объявлений Google на веб-страницу четко объясняется на страницах объявлений Google. Вы просто добавить скрипт и некоторый код, который в свою очередь производит следующий HTML:

<iframe allowtransparency="true" frameborder="0" height="100" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" scrolling="no" src="http://googleads.g.doubleclick.net/pagead/ads?client="{PARAMS}" style="left:0;position:absolute;top:0" vspace="0" width="900"></iframe> 

Содержимое этого кадра фактические объявления (рекламные ссылки, которые Вы видите на странице).

Тег iframe не единственный, созданный на странице javascript объявлений Google. Также создаются другие теги (html), которые обрабатывают проблемы, связанные с презентацией.

+0

. Спасибо. Андреас. Я ищу простой пример для начала. Я искал googled, но мне не повезло - ваше объяснение имеет смысл, но я не делал этого раньше так запутались, как начать. – Gublooo

+0

Gublooo, вы можете перепроектировать виджет с другого сайта. Существуют веб-сайты/онлайн-сервисы, которые предоставляют виджеты. Получите их виджет и посмотрите, как они обрабатывают презентацию и отображение информации на веб-странице. Поскольку вам нужны данные с вашего сайта на странице хостинга, решение iframe - это путь. – Andreas

0

Есть много способов, которыми вы можете это сделать. Пример от andreas хорош. Также можно выставить нужные данные в каком-то формате, таком как JSON или XML, а затем сделать «виджет» небольшим Javascript, который будет отображать это в соответствии с некоторыми предпочтениями. A (несколько) простой пример, с которым можно начать работу, - это twitter search widget.

Удачи вам!

2

Например, вы хотите отобразить статус веб-сайта, который хранится на вашем веб-сайте как виджет на веб-сайте вашего партнера.

Вот простой КАК:

1.Create виджет скрипт на вашем сайте, скажем: http://yourwebsite.com/widget1.php?data=value&date2=value2

2.На, что сценарий, заполнить его чем-то вроде:

<?php 
$data=get_xss_free($_GET['data']); 
$data2=get_xss_free($_GET['data2']); 
//do your process here 
//then, display it: 
echo "<div>This is my widget data!</div>"; 
?> 

3. Назовите своего партнера, чтобы вставить его следующим образом:

<iframe src="http://yourwebsite.com/widget1.php?data=value&date2=value2"></iframe> 
+0

Благодарим за отзыв - пожалуйста, проверьте мое изменение выше в главном вопросе о том, как Google использует Google для показа объявлений Google - это тоже форма виджета - здесь используется Javascript, и издатель контролирует цвет и т. Д. И т. Д. – Gublooo

0

Возможно, вы coul d посмотрите на использование PHP GD library для динамического создания изображения. Таким образом, вы пользователи должны будут включать только тег изображения, как и на их на сайтах:

<img src="http://www.yourwebsite.com/widget.php?user={USERNAME}" width="500" height="250" alt="Your Widget" /> 

Затем в файле widget.php у вас есть все ваши логики баз данных и т.д., которая использует эти данные и передающую изображение. Facebook использует подобный подход к этим называемым «Profile значкам» и доступны аналогичным образом: http://www.facebook.com/badge.php?id= {ID}&format=png&params={OTHERPARAMS}

Но обратите внимание, что динамически создавать изображение, вероятно, не самый простой способ приблизиться к этому и iframe решения уже размещен выглядит неплохо и определенно будет легче создать.

Смежные вопросы