Добавить контент с другого сайта к себе на страницу
Часто бывает необходимым добавить к себе на сайт какую-то динамическую информацию с другого источника (погодные виджеты, котировки валют и т.п.). Я лично думал, что для этой цели потребуется глубокое знание php. Однако на каком-то источнике (к сожалению, не помню сайт) нашел отличный способ, состоящий из нескольких строк кода. Для понимания этого кода глубоких знаний php вам не нужно. Достаточно подставить свои данные и на вашем сайте появится информация из другого источника. Создаем в корне сайта файл с произвольным названием, например, file.php и добавляем в него следующий php-код:
// с кодировкой возможны проблемы, поэтому если вдруг появятся каркозябры, попробуйте добавить следующую строчку кода
Вместо: ‘http://site.ru/page’ – страница сайта, откуда нужно взять контент ‘ – заменить на фрагмент кода, откуда начинается необходимый контент ‘
’ – заменить на фрагмент кода, где заканчивается нужный контент
Например, если нужный контент лежит в конструкции , а заканчивается фрагмент конструкцией
, то вставляем в наш php-код эти значения, соответственно.
В адресной строке браузера запускаем данный файл (http://my-site.ru/file.php) и если все сделано правильно, на странице будет выведен контент со стороннего сайта.
Для того, чтобы добавить этот контент на внутреннюю страницу нашего сайта, то добавляем в нее (внутреннюю страницу) следующий код:
Я в php далеко не знаток, но у меня все получилось. Надеюсь, что и у вас пройдет все без проблем 🙂
24 комментария
Подскажите, пожалуйста. Если мой сайт на https, а тот, другой, откуда хочу взять контент, на http, сработает и этот способ? У меня вся проблема именно в этом протоколе(( Заранее спасибо за ответ.
Здравствуйте. А как сделать наоборот. Запретить чужому сайту использовать мой контент. Т.к. грузит хостинг.
Уточните, пожалуйста, как в страницу сайта вставить. В код страницы ставлю после сохранения страницы этот код стирается и ничего не выводит.
Как вы вставляете код? Непосредственно через редактирование html/php документа? Или через WYSIWYG редактор админки?
Спасибо, будем пробовать! Тоже думала через file_get_contents данные таскать, но про то, что можно лишнее обрезать даже не догадывалась, спасибо…
Добрый вечер! Подскажите, пожалуйста, как с вами связаться, чтобы вы эту штуку сделали нам за деньги, если это вообще возможно?)) Спасибо
Ничего не поняла у меня ссылка на фид стороннего сайта как добавить на чистую страницу у вас в коде не вижу мета для ссылки на фид
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
Введение в HTML импорт
HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.
Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Обходные пути
Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.
Начнём
Базовый синтаксис
Прежде чем смотреть примеры, давайте глянем на синтаксис подгрузки файла через тег импорта. Импорт, это новый тип link тега, так что должно быть нетрудно понять следующую строчку:
Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.
Базовый пример
Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:
Hello from Designmodo
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
Hello from Designmodo
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
внутри элемента. Хорошо то, что scoped стили действуют только внутри элемента, в котором они заданы, а не во всем документе. Посмотрим, как атрибут scoped может помочь при работе с импортированными HTML-файлами.
Добавим h1 в импортированный документ, чтобы увидеть разницу между стилями импортированного файла и стилями index.html. Потом добавим стиль элементам импортированного HTML документа. Как видите находится внутри импортированной разметки, а не в head теге. Благодаря scoped, стили применятся только к h1 внутри импортированной разметки.
h1 < color: red; >p About us
We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Это немного похоже на Bootstrap
Bootstrap, это набор отдельных файлов, как bootstrap.css, boostrap.js и тд. Для плагинов, используется jQuery; Bootstrap предоставляет примеры верстки. Он очень гибок и прост в использовании. Суть Bootstrap в том, что вы можете использовать только необходимые для вашего проекта файлы. Большинство людей загружают все файлы сразу, и это тоже нормально. Идея HTML импорта та же, вы подключаете файлы по мере надобности. Эта логика становится популярной, из-за ускорения загрузки и упрощения организации.
Заключение
Благодаря HTML импорту, вы можете выносить HTML, как и CSS или JavaScript, в отдельные файлы. Это, на самом деле, очень круто. Включение HTML-файлов друг в друга не было простым, до появления HTML импорта. Теперь мы можем создавать повторно-используемый контент, подключаемый одной строкой кода. Это очень мощная вещь — и это круто!
