Как построить виджет для моего сайта

Question

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

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

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

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

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

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

Пример кода 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? Спасибо

Answer 1

Я не эксперт в области виджетов, но «направление» заключается в использовании 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), которые решают проблемы, связанные с презентацией.

Answer 2

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

Вот простой способ:

1.Создать скрипт виджета на вашемскажем, на сайте: 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>

Answer 3

Может быть, вы можете использовать библиотеку PHP GD для динамического создания изображения. Таким образом, вы, пользователи, должны будете просто добавить тег изображения на свои веб-сайты:

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

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

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

Answer 4

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

Удачи!