Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Open Graph - парсинг ссылки в поле ввода
+
Всем привет сегодня вам от нас небольшой скрипт который позволит выводить информация о ссылке на вашу страницу. Подобные скрипты есть в популярных соц. сетях, вводя ссылку в поле ввода он преобразуется в информацию для дальнейших ваших действий на ваше усмотрение.
Установка:
1. Получить API Key есть Free доступ
2. Добавим HTML для вывода информации:
3. Добавим JS:
$('input').on('keydown', function(){ - input Поле ввода информации.
var apiKey = 'xxxxxx'; - xxxxxx Ваш API ключ
P.s - Подробнее об API Open Graph. Для скрипта также включен ограничитель запроса в 21 секунду так Free доступ имеет ограничения.
Для тех у кого не лимитировано можно убрать строки js:
Установка:
1. Получить API Key есть Free доступ
2. Добавим HTML для вывода информации:
Код
<div id="graph" data="on">
<div style="width: 100px; float: left;">
<img id="icon" style="width: 90px;" />
</div>
<div>
<h2 id="title"></h2>
<span id="description"></span>
</div>
</div>
<div style="width: 100px; float: left;">
<img id="icon" style="width: 90px;" />
</div>
<div>
<h2 id="title"></h2>
<span id="description"></span>
</div>
</div>
3. Добавим JS:
Код
$('input').on('keydown', function(){
graph = $('#graph').attr('data'); // Флаг On для запроса ссылки.
uRlpole = $(this).val();
uRl = uRlpole.split('//');
uRl = uRl[1].split(' ');
uRldomen = uRl[0].split('.');
if(graph==='on')
if( (uRlpole.indexOf('http') != -1) && (uRldomen[1].length > 1)) { // Проверка поля и домена
$('#graph').attr('data','off');
var urlEncoded = encodeURIComponent(uRl[0]);
var apiKey = 'xxxxxx';
var requestUrl = "https://opengraph.io/api/1.1/site/http://" + urlEncoded + '?app_id=' + apiKey;
$.getJSON(requestUrl, function(json) {
$('#title').text(json.hybridGraph.title);
$('#description').text(json.hybridGraph.description);
$('#icon').attr('src', json.hybridGraph.image);
});
};
setTimeout(function(){ $('#graph').attr('data','on'); }, 21000); // Включаем повторную проверку поля на ссылку через 21 секунду.
});
graph = $('#graph').attr('data'); // Флаг On для запроса ссылки.
uRlpole = $(this).val();
uRl = uRlpole.split('//');
uRl = uRl[1].split(' ');
uRldomen = uRl[0].split('.');
if(graph==='on')
if( (uRlpole.indexOf('http') != -1) && (uRldomen[1].length > 1)) { // Проверка поля и домена
$('#graph').attr('data','off');
var urlEncoded = encodeURIComponent(uRl[0]);
var apiKey = 'xxxxxx';
var requestUrl = "https://opengraph.io/api/1.1/site/http://" + urlEncoded + '?app_id=' + apiKey;
$.getJSON(requestUrl, function(json) {
$('#title').text(json.hybridGraph.title);
$('#description').text(json.hybridGraph.description);
$('#icon').attr('src', json.hybridGraph.image);
});
};
setTimeout(function(){ $('#graph').attr('data','on'); }, 21000); // Включаем повторную проверку поля на ссылку через 21 секунду.
});
$('input').on('keydown', function(){ - input Поле ввода информации.
var apiKey = 'xxxxxx'; - xxxxxx Ваш API ключ
P.s - Подробнее об API Open Graph. Для скрипта также включен ограничитель запроса в 21 секунду так Free доступ имеет ограничения.
Для тех у кого не лимитировано можно убрать строки js:
Код
1. graph = $('#graph').attr('data'); // Флаг On для запроса ссылки.
2. if(graph==='on')
3. $('#graph').attr('data','off');
4. setTimeout(function(){ $('#graph').attr('data','on'); }, 21000);
2. if(graph==='on')
3. $('#graph').attr('data','off');
4. setTimeout(function(){ $('#graph').attr('data','on'); }, 21000);
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 22.01.2018 в 21:29 по МСК
Категория: Другие модули
Просмотров: 586
Комментариев: 0
Эмоций:
Дата добавления: 22.01.2018 в 21:29 по МСК
Категория: Другие модули
Просмотров: 586
Комментариев: 0
Эмоций:
