Как да вградим снимка или видео от Instagram в блога си


Имаш блог или сайт и както на мен, за нуждите на някоя публикация, ти трябва да вградиш снимка или видео от Instagram.

Добавяне на Instagram снимки, мисля, не само прибавя качества към блога, но го прави много по-интересен визуално за читателя. Има различни начини и сега ще разгледам някои.

Как да вградим снимка или видео от Instagram в собствения си блог или сайт

Разглеждам два основни начина на вградени (embedded) снимки от произволен профил. Отнася се само за профилите с публично съдържание. Снимки от частен профил не са достъпни за вграждане на уеб страници.

1. Официален начин

Instagram разработчиците предлагат възможността за вграждане на отделни изображения от Instagram на страниците на блога. Как процедираме:

В браузера отиваме на Instagram акаунта, от който искаме да вградим снимка в публикацията си. В долния десен ъгъл има многоточие бутон:

Вграждане-на-фото-от-Instagram1-

Кликваме и избираме средния бутон за вграждане, появява се код за вграждане, който копираме:

Вграждане-на-фото-от-Instagram2-Може да се избере дали да се включи текста към снимката или не. Отиваме в блога на мястото, където ще публикуваме (говорим за WordPress блог). В Текстовия редактор поставяме кода. Ако блога ни е на Blogger – отиваме в режим HTML и поставяме копирания код. Забелязваме, че в кода за вграждане е включена и част от JavaScript, което е необходимо, за да се адаптира по напълно автоматичен начин размерът на прозореца от Instagram с този на страницата, която го приютява. Така се оптимизира дисплея както на голям монитор, така и на по-малките екрани на смартфони и таблети. Ето резултата:

По същия начин процедираме и с видео:

Un video pubblicato da Gianluca Vacchi (@gianlucavacchi) in data:

2. Вграждане в WordPress сайтове и блогове.

В WordPress от версия 3.5 насам се поддържа за Instagram функцията oEmbed, която е проектирана, за да се избегне необходимостта за копиране и поставяне на HTML код от сайта хостинг на медията, която искаме да вградим. Той поддържа видео, изображения, текст и други. Става много просто:

Копираме url адреса на изображението от Instagram, например: Вграждане-на-фото-Инстаграм3-

След това го поставяме във Визуалния редактор на блога, където желаем, като внимаваме да бъде на отделен ред и не във вид на хиперлинк (не трябва да може да се кликва върху му):
Вграждане-на-фото-Инстаграм4

и ето резултата:

https://www.instagram.com/p/BN4qVJBBfAU/

Вграждане на най-новите снимки от собствената галерия на Instagram в сайта си

Разглеждам два сайта:

1. Istembedder

Регистрацията става с потвърждаване на Instagram акаунта. Могат да се направят различни настройки – брой на снимките – по редове и колони, големината на снимките, отдалеченост. Избираме какво да показваме – лайкове, дата, коментари, описание, потребител… Имаме възможност да видим предварително избора си и след това да получим кода за вграждане в сайта. Резултатът е следният :

2. Instush

Отново влизаме с нашия Instagram акаунт. Тук имаме голям брой прекрасни възможности да вградим с обновяване на последните снимки от нашата галерия. Дори със слайдшоу в различен вид. Изборът на настройки е абсолютно достатъчен, имаме и избор на цвят на фон и текст. За помощ е и допълнителна страница с обяснения (на английски). Правим избора си и получаваме кода. Тук показвам два примера. Първият е със слайдшоу (slideshow). При втория, когато се мине с мишката върху някоя снимка, се показва текста за нея, описанието й (caption).

 

 

 

Заключение

Накрая един малък трик, за да подобрим изобразяването на вградената снимка или видео. В кода, който копираме, ( с пример на кода от Istembedder.com ), можем да променяме стойностите на 3 параметъра – frameborder, width, height (граница на рамката, ширина и височина). С подходящи промени можем да управляваме снимките си и да приложим креативни идеи с комбинации на изображения в различен размер.

Вграждане-на-фото-от-Инстаграм-промени-в-кода-

За да направим галерията си responsive – т.е. автоматично да познава устройството на потребителя и да се адаптира в зависимост от големината на дисплея – променяме ширината на вградената рамка до 100%.

Надявам се да станало ясно и интересно. Малък бонус – от тук може да се свали до 17.01.2017  9:00 часа безплатно програмата Leawo DVD Creator 7.6.0. (оригинална цена 29.95 $). И още един бонус – безплатен Google Pixel Psd Mockup.


Коментари