Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

Бұрын twitter лентасында instagram-ға жүктелген суреттер тікелей көрінетін еді. Ал қазір instagram-нан келген суреттерді көру үшін сілтемеден өтіп, instagram сайтынан ғана көре алмыз. Негізі ондай сұмдық жағдай емес, бірақ кейбіреулері кезінде шулап алған еді. "Instagram-ға салған суреттеріңізді twitter лентасына экспорттамаңыздар, бір сурет үшін басқа сайтты ашпаймын, суретті тіке twitter-ге жүктеңіздер, неге ашылмайды, бұрын жақсы еді, баяғыда сәбет үкіметінде басқаша еді, Цукерберг мал" деген сияқты біраз әңгіме айтылды.

Өмір қиын, баяғыда керемет еді деп жылана бермей, осы неге қосымша script ақрылы instagram суреттерін twitter лентасында көрінетіндей қылмасқа деп, twitter лентасын зерттеуге кірістім. Жалпы twitter веб құжаты қалай құрылған, қай тег қандай class-пен белгіленген, әр твитті қалай программалық жолмен таңдап алуға болады, тегтер қалай бір-бірінен ерекшеленіп тұр, instagram-нан келген суреттер қалай орналасқан, twitter-дің өзінде салынған суреттер қалай орналасқанын анықтап ұғып алу керек болды.

Ары қарата оқымаймын, дайын скриптті жүктеп алып өзім түсініп аламын десеңіздер мында өтіңіздер.

Сонымен зерттеуден кейін веб құжаттың мына ерекшеліктері назар аударуға тұрарлықтай болды.

1. Әр твит li тізімде орналасқан. Әр li тегінің js-stream-item class-ы басқа тегтерде қайталанбайды және li ajax арқыды жүктеліп, орналастырылған.
Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

2. Әр тивттегі сілтеме js-display-url class-ы бар тегпен қоршалған.
Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

3. Әр твитке барып, тінтуірмен шертіп ашқанда js-tweet-media-container class-ы бар тег әрқашан бос болды және орналасқан орны да твиттерге жүктеген сурет орналасқан жерде болды. (Басқа да бос тегтер болды, бірақ мынау бірінші тұрғасын осыны таңдадым)
Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

Болды! Осының өзі скрипт жазуға жетіп жатыр. Бірақ instagram-нан экспорт жасағанда, twitter-ге суреттің тікелей мекен жайы емес, instagram парақшасында орналасқан адресі келеді екен. (бізге керегі мынадай distilleryimage4.ak.instagram.com/4e39215ef16411e2a84022000aa8048a_7.jpg тіке адресі, ал твиттерге келетін сілтеме instagram.com/p/b_yUHNuYP8/ былай келеді). Бұл адрестен суреттің тіке сілтемесін алу үшін қосымшаға php қолдандым. Себебі Ajax арқылы instagram-ға тіке сұраныс жасалынбады.

Алгоритм:
1. li.js-stream-item тегіне click оқиғасы орнаған кезде, осы элементтің ішіндегі .js-display-url тегтің мәтінін this_url айнымалысына меншіктеп аламыз және .js-tweet-media-container тегін таңдап media айнымалысына меншіктейміз.

2. Егер this_url айнымалысы instagram.com сайтына сілтесе (яғни айнымалыда instagram.com сөзі кездессе) {

3. Php скриптімізге ajax арқылы this_url айнымалысын жібереміз.
Сұраныс жібермес бұрын media тегіне loader суретін салып қоямыз. Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамызБұл сурет ajax сұранысы сәтті аяқталып, серверден жауап келгенше көрініп тұратын болады.

Серверден келген жауапты аламыз да, media тегіне сурет ретінде орналастырамыз.

Серверде:
Серверде бізге келген this_url айнымалысын аламыз да, осы сілтеме бойынша өтіп, келген жауапты жүктеп аламыз, келген жауапты сұрыптап, тек суреттің тіке сілтемесін ғана қалдырып, қайтадан скриптқа жібереміз.
Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

ВУОЛЯ! )))))))
}

Түсінікті болсын деп қарапайым сөзбен жазып едім )), жарайды кодын көрсетейін.

Клиент скрипті (JQuery кітапханасы арқылы)
jQuery(document).ready(function($) 
	{ // құжат жүктеліп болғаннан кейін
		$('li.js-stream-item').live('click', function(){ //click оқиғасына функция ілеміз
			var this_url = $(this).find(".js-display-url").text(); //адресті меншіктейміщ
			var media = $(this).find(".js-tweet-media-container"); //сурет орналасатын тегті меншіктейміз
			if(this_url.indexOf('instagram.com') >-1 ){ //егер сілтеме инстаграмға сілтесе
				$.ajax({ //асинхронды сұраныс жібереміз
					url: "http://hosting.users.kz/mysal/twitter_insta.php", // мына мекенжайда біздің php скриптіміз орналасқан
					type: "POST", 
					data: {'url':this_url}, // ардесті жібереміз
					beforeSend:function(){ // жауап келгенше
						media.html('<img src="http://hosting.users.kz/mysal/loader.gif" style="display:block;margin:0px auto;" alt="Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз" />'); // loader анимация сурет орналастырамыз
					},
					success:function (e) { // жауап келгесін
						media.html('<img src="'+e+'" style="max-width: 430px;" alt="Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз" />'); // келген жауапты сурет ретінде орналастырамыз
					}
				});
			}
		});
	});


Сервердегі қарапайым php скрипт
<?
header('Access-Control-Allow-Origin: *');  // басқа сайттар ajax сұраныс арқылы жауап ала алады деп рұқсат береміз
$site = file_get_contents('http://'.$_POST['url']); //келген адрес бойынша өтіп, жіберген жауабын меншіктеп аламыз
$site = mb_substr($site, mb_strpos($site, '<meta property="og:image"')); жіберген жауаптан суреттің тіке сілтемесін іздейміз
$site = mb_substr($site, 0, mb_strpos($site, '/>')+2);  //сұрыптаймыз, керек емес тегтерді алып тастаймыз

$site = mb_substr($site, mb_strpos($site, 'http')); //сұрыптаймыз, керек емес тегтерді алып тастаймыз
$site = mb_substr($site, 0, mb_strpos($site, '.jpg')+4); //сұрыптаймыз, керек емес тегтерді алып тастаймыз

echo $site; // сурет сілтемесін жариялаймыз.
?>

Блог - Abylai: Twitter лентасына instagram суреттерін шығаратын Chrome браузеріне скрипт жазамыз

Міне, қарапайым ғана скриптіміз осы. Енді тексеріп көрейік. Скриптті мына жерден жүктеп аламыз.
Скриптті қалай қондыру керектігі видеода көрсетілген.


Скрипт дұрыс жасамай жатса, қате тапсаңыз, түсінбесеңіз, шағымдар мен ұсыныстарыңыз болса пікірге жазыңыздар.
Бөлісу:
  • 36

16 пікір

asaubota
еңбекке құрмет! осылай өзіне керегін істеп алатын жігіттерді сыйлаймын.
konvict
Instagram-ға комптан браузер арқылы сурет жүктейтіндей жасай аласың ба? Лібә, осы арманым болып жүр. Гуглдап көріп едім, арнайы бағдарламалар керек екен
asaubota
онда оның несі Инстаграмм? ондайға Пинтерест жақсы ғо
omarbirat
Жаһсе екен
Тақырыптан тыс: өзім Инстаграмм қолданбағасын, сол қызметтің Твиттерде қолдауы болмай қалғаны аса трагедия болған жоқ. Инстаграмға шығарған суреттердің твитін аттап өтіп кете саламын. Ал тамақтүсіргіштер мен фильтрсүйерлер үшін нағыз керек нәрсе сияқты мынау
Соңғы түзету:
zholantai
күчт, мен де со кезде жыным қозып еді, негізі туиттер мен фейс бір-бірімен ұстасып қалды ғо
AKY
осы аптаның үздігі, үздіктердің үздігі! мөлдіреген көзін-ай…
muratbekalatyraui
Анау ерігіп отырып қайдағы ырбың жазбалар жазып, көпіріп отыратындар осы Быраттан үлгі алса еді. Рыспект Абылай"
Daniar-Alan
сенің ойыңша жазбаның барлығы тек пайдалы, бір нәрсені үйрететін болуы керек па?
muratbekalatyraui
Пайдасы болмаса да зияны болмауы керек
Daniar-Alan
Зияны тиетін пост көрдің ба? Жалпы, Мұратбек басқа тұғырға қоншиш ұнамаса. Мұнда рамка деген жоқ. Еркін блогтұғыр. Ұнамайтын, оқығың келмейтін постты саған ешкім зорлап оқытпайды. Өтіп кет үстінен. Өзіңе пайдалы деген посттарды ғана оқы.
mercedes
Сен братан осы сайттың админы болып алғаннан саумысың? Бұрынғыдай емес соңғы кезде «жостко-жостко» сөйлеп жүрсің ғо