Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Open Graph - парсинг ссылки в поле ввода
+
Всем привет сегодня вам от нас небольшой скрипт который позволит выводить информация о ссылке на вашу страницу. Подобные скрипты есть в популярных соц. сетях, вводя ссылку в поле ввода он преобразуется в информацию для дальнейших ваших действий на ваше усмотрение.

Установка:
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>


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 секунду.
});


$('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);
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 22.01.2018 в 21:29 по МСК
Категория: Другие модули
Просмотров: 142
Комментариев: 0
Эмоций:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]