API 없이 웹사이트에 Instagram 사진을 추가하는 방법

일반적으로 홈페이지 하단에 Instagram 게시물 블록이 포함된 웹사이트를 본 적이 있을 것입니다. 예를 들어, 이 영국 기반 사진 사이트에는 홈페이지 하단에 타일로 된 Instagram 사진이 잔뜩 있는 바가 있습니다. 그들의 인스타그램 피드를 직접 방문하면 가장 최근 게시물이 그리드로 배열되어 있음을 알 수 있습니다. 그들이 새로운 것을 게시할 때마다 새로운 사진이 웹사이트에도 나타납니다.

이것은 Instagram을 시각적 중심 웹사이트와 통합하는 정말 멋진 방법입니다. 최근 게시물을 표시하고 누구나 클릭하여 탐색할 수 있도록 Instagram 계정에 대한 기성 링크가 있습니다.

이러한 종류의 설정은 매력적이며 웹사이트 방문자를 Instagram 페이지로 안내하는 훌륭한 작업을 수행할 수 있습니다. 그러나 실제로 설정하는 것은 생각보다 복잡합니다.

인스타그램 API

이제 "사용 가능한 플러그인 중 하나를 사용하지 않는 이유는 무엇입니까?" 라고 말할 수 있습니다. 대답은 일반적으로 "바로 가십시오."입니다. 이러한 피드 표시 옵션을 제공하는 플러그인이 많이 있으며 이 게시물의 끝에서 이에 대해 설명하겠습니다.

여기 문제가 있습니다. 이러한 플러그인은 모두 Instagram API를 사용하여 콘텐츠에 액세스하고 공식 삽입을 위해 데이터를 가져와야 합니다. API를 사용하지 않는 경우 페이지를 스크랩해야 하며 페이지를 스크랩하는 것은 일반적으로 Instagram과 같은 사이트의 사용 약관에 위배됩니다. 그들은 결국 콘텐츠 도둑 등을 상대하고 싶어하지 않습니다.

발생하지 않는다는 말은 아닙니다. Instagram을 스크랩하는 것 외에는 아무 것도 하지 않는 수십 개의 웹사이트를 본 적이 있을 것입니다. Picdeer, Pictame 및 Piknow와 같은 사이트에는 흥미로운 역사가 있으므로 잠시 이야기를 풀어보겠습니다.

몇 년 전 인스타그램은 오로지 모바일 플랫폼이었습니다. 인스타그램 앱 말고는 직접 접근할 방법이 없었다. 즉, 데스크톱 플랫폼에서는 사이트를 사용할 수 없었고 비즈니스 액세스가 상당히 제한되었습니다.

많은 사람들이 모바일 장치나 모바일 앱을 사용하지 않고 Instagram 피드에 액세스하기를 원했기 때문에 이러한 사이트가 모두 생겨났습니다. 그들이 한 일은 Instagram 게시물을 스크랩하여 공개적으로 표시하는 것뿐이었습니다.

결국 Instagram은 데스크톱에서 네트워크를 볼 수 있게 했지만 여전히 취할 수 있는 조치에는 제한이 있습니다. 예를 들어 현재로서는 데스크톱에서 게시할 수 없습니다.

이 사이트 중 어느 것도 공식적으로 지원되지 않았으며 Instagram API를 사용하는 사이트도 없었습니다. 그들이 한 일은 맞춤형 앱을 사용하여 콘텐츠를 스크랩하는 것뿐이었습니다. 이제 Instagram은 이것을 좋아하지 않았고 플랫폼을 공개하는 것이 그들을 퇴치하는 데 도움이 되었습니다. 많은 사람들이 하룻밤 사이에 사망했지만 위에서 언급한 것과 같이 여전히 존재하는 일부는 몇 가지 추가 기능을 추가합니다. 그들은 다른 종류의 콘텐츠 검색, 새로운 콘텐츠를 탐색하고 발견하는 방법 또는 콘텐츠를 표시하는 독특한 방법을 가질 수 있습니다. 요점은 표시할 콘텐츠를 스크랩하는 대신 부가 가치를 제공해야 한다는 것입니다.

이 모든 것은 기본적으로 요점을 설명하기 위한 것입니다. 스크래핑은 기술적 으로 Instagram 서비스 약관에 위배될 수 있지만 실제로 그렇게 하는 사이트에 대해 많은 조치를 취하거나 기소하지 않았습니다. 아래에 있는 옵션 중 일부에는 이러한 수동 스크래핑이 포함되므로 이것이 우려되는 이유를 알 수 있습니다.

그러나 기본 질문으로 돌아가십시오. 왜 이 플러그인 중 하나를 사용하지 않습니까? 음, Instagram API는 변덕스러운 여주인입니다. 실제로 2018년 12월까지만 해도 Instagram은 API를 크게 변경하고 이전 버전을 더 이상 사용하지 않습니다. 이 페이지 상단에 큰 면책 조항/경고가 표시되어 있습니까? 그것이 API를 사용하는 모든 경고 브랜드였습니다.

이제 Instagram 피드를 표시하기 위해 찾은 플러그인은 Instagram API 또는 스크래핑에 의존합니다. Instagram이 스크레이퍼에 대해 조치를 취하면 해당 플러그인이 죽습니다. Instagram이 API를 극적으로 변경하면 해당 플러그인이 죽습니다. 어느 쪽이든, Instagram이 변경하는 모든 변경 사항에 맞게 코드를 유지하기 위해 타사에 의존하고 있으며 이는 신뢰할 수 없습니다.

나는 그들이 스스로를 최신 상태로 유지하고 Instagram이 변경되어도 작동한다는 것을 입증했기 때문에 일부 플러그인을 나중에 나열할 것입니다. 그러나 다른 솔루션이 대신 효과가 있을 수 있습니다.

이러한 플러그인에 문제가 있을 수 있는 또 다른 이유는 자체 액세스 대신 API 액세스가 필요한 경우 입니다. 일부는 API 액세스를 사용하여 속도 제한을 우회합니다. 압도될 수 있는 하나의 중앙 집중식 액세스가 아니라 각 개인의 API 액세스로 콘텐츠를 가져옵니다. 여기서 문제는 API 액세스가 이런저런 이유로 취소되면 이 플러그인을 계속 사용할 수 없다는 것입니다.

그 후에도 웹사이트에 Instagram 콘텐츠를 표시하는 데 여전히 관심이 있다면 – 그리고 그렇게 해야 합니다. 매우 유용하고 정말 멋진 – 여기에서 선택할 수 있는 옵션이 있습니다.

옵션 1: 가짜

첫 번째 옵션은 많은 수작업으로 가짜를 만드는 것입니다. 어렵지는 않지만 시간이 많이 걸릴 수 있으며 Instagram 계정과 웹사이트 "임베딩" 간에 동등성을 유지하려면 해야 할 일입니다. 기술적으로 포함되지 않았기 때문에 나는 공포 인용문에 포함을 넣었습니다.

이 방법은 어떻게 작동합니까? 아마도 디지털 카메라로 사진을 찍고 컴퓨터에서 편집한 후 모바일 장치에 업로드하여 Instagram에 게시할 것입니다. 편집하는 동안 사본을 두 개 만드십시오. 평소와 같이 인스타그램에 한 장씩 업로드됩니다. 다른 사본은 웹 호스팅에 업로드됩니다.

Instagram에 콘텐츠를 게시하면 Instagram 게시물이 생성됩니다. 여기에는 캡션, 영구 링크 및 이와 관련된 기타 정보가 있습니다. 해당 게시물을 만들고 게시합니다.

이제 웹 사이트로 이동하여 Instagram 콘텐츠를 배치할 그리드를 만드십시오. 사진을 웹 호스트에 업로드하고 그리드 셀 중 하나에 삽입합니다. 퍼머링크를 인스타그램 게시물에 복사하고 사진을 링크로 만드세요. 이미지 캡션을 표시하기 위해 호버 스크립트를 사용하는 것을 원하는 경우 코딩이 조금 더 필요하지만 캡션을 복사하여 붙여넣을 수도 있습니다.

이 옵션에는 두 가지 주요 단점이 있습니다. 첫 번째는 시간이 걸리고 Instagram에 게시하는 각 이미지와 관련하여 기억해야 할 사항입니다. 이미지를 웹사이트에 업로드하는 것을 잊어버리고 모든 이미지를 그리드 아래로 이동한 다음 새 이미지를 첫 번째 슬롯에 추가하면 피드가 다르게 보일 것입니다.

두 번째 주요 단점은 호스팅 공간을 차지 한다는 것입니다. Instagram API 액세스 또는 스크래핑을 사용하면 이미지가 여전히 Facebook CDN에서 호스팅되므로 자체 서버 리소스를 차지할 필요 없이 빠르게 로드된다는 이점이 있습니다. 이 가짜 삽입 옵션에는 이점이 없습니다.

옵션 2: 수동 삽입

두 번째 가능한 옵션은 Instagram의 일부 사용자 지정 코드 와 수동 삽입을 사용하는 것입니다. 모든 Instagram 게시물에는 포함할 수 있는 옵션이 있습니다. 게시물을 클릭하고 캡션의 오른쪽 상단에 있는 세 개의 점을 클릭하면 옵션 중 하나가 포함됩니다. 이것은 일부 긴 코드를 복사하고 Instagram API를 사용합니다. 여기서 가장 큰 이점은 API를 사용함에도 불구하고 Instagram의 핵심 기능이며 변경될 가능성이 낮다는 것입니다. Instagram에서 API를 변경할 때 자체 서비스가 영향을 받지 않는지 확인합니다.

자신의 사이트에 게시물을 포함하면 일반적으로 전체 크기로 표시되고 게시물에 대한 캡션과 함께 표시되지만 원하는 경우 캡션을 포함하지 않도록 지정할 수 있습니다. 이것은 여러 이미지의 작은 격자에 적합하지 않습니다. 이러한 방식으로 표시하려면 일부 사용자 정의 코드를 사용하여 이미지를 축소하고 배치해야 합니다.

이것은 기본적으로 제3자 플러그인을 사용하여 우회하는 방식으로 그리드를 생성하는 방법을 뛰어넘는 수동입니다. Instagram의 각 게시물을 호스팅하지만 사용자 정의 코드가 필요하며 일종의 버벅거림 솔루션입니다. 새 게시물을 추가할 때마다 그리드 아래로 게시물을 수동으로 이동해야 하며 여전히 각 게시물에 대한 임베드 코드를 수동으로 가져와야 합니다. 또한 동일한 위치에 많은 포함을 추가하면 로드 시간이 크게 늘어날 수 있습니다. 전반적으로, 그것은 정말로 최선의 선택이 아닙니다.

옵션 3: 타사 스크레이퍼 사용

앞서 언급했듯이 인스타그램은 스크랩하기가 그렇게 어렵지는 않습니다. 타사 스크레이퍼 서비스를 사용하여 데이터를 제공한 다음 선택한 방식으로 사이트에 형식을 지정하고 포함할 수 있습니다.

예를 들어 Feedity는 이러한 타사 스크레이퍼 서비스 중 하나입니다. 이를 통해 사용자 정의 스크레이퍼 인터페이스에서 웹 페이지를 로드하고 찾고자 하는 데이터 조각을 선택하고 변경될 때 긁을 수 있습니다. 이 경우 Feedity는 특히 해당 데이터를 RSS 피드로 형식화합니다.

그런 다음 해당 RSS 피드를 사용하여 페이지에 콘텐츠를 포함할 수 있습니다. 사이트 디자인에 따라 몇 가지 다른 방법으로 이 작업을 수행할 수 있습니다. 이것은 사이트에서 WordPress 아키텍처를 사용할 때 RSS 피드를 가져와 콘텐츠와 이미지를 사이트에 모두 포함하는 방법에 대한 자습서입니다. 한편, 이 튜토리얼은 단순한 HTML 및 PHP 코딩을 사용하여 보다 전통적인 사이트 디자인에 대해 동일한 작업을 수행합니다.

이 옵션은 몇 가지 이유로 이상적이지 않습니다. 우선, 웹 사이트에 대한 상당한 양의 사용자 정의 코딩이 필요합니다. 직접 코딩한 경험이 없다면 개발자를 고용해야 하며 비용이 많이 들 수 있습니다.

또한, 귀하는 귀하를 위해 스크래핑을 수행하기 위해 제3자 서비스에 의존하고 Instagram에서 작업하는 것에 의존합니다. 이는 까다로운 일입니다. 귀하는 Instagram에 의존하여 정확한 종류의 스크래핑 시도를 방해하기 위해 사이트 디자인을 변경하지 않습니다. 사실 Instagram은 스크레이퍼를 좋아하지 않으며 개별적으로 관리하지는 않지만 삶을 힘들게 만듭니다.

옵션 4: 맞춤형 스크레이퍼 생성

물론 스크래핑은 설정하기가 그리 어렵지 않습니다. 다양한 스크래핑 솔루션으로 인해 스크래핑이 어려운 것처럼 보일 수 있지만, 모두 비즈니스로서 서비스를 판매하기 위해 "모든 사람에게 적합한" 작업을 시도합니다. 하고 싶은 모든 것이 스스로 무언가를 긁어내는 것이라면 코드가 훨씬 더 간단해질 것입니다. 그런 다음 하루에 한 번 또는 무엇이든 Instagram을 긁는 코드를 만들고 원하는 방식으로 데이터 형식을 지정하고 자신만의 맞춤 내장을 설정할 수 있습니다.

다른 옵션과 마찬가지로 이 작업에는 많은 개인 코딩 또는 개발자 시간이 필요하므로 이상적이지 않습니다. 코딩을 좋아한다면 스스로 할 수 있지만 팬이 아니라면 개발자 비용을 지불해야 합니다. 또한 Instagram이 사이트를 변경하고 스크랩을 더 어렵게 만드는 것과 싸워야 합니다. 이는 몇 달에 한 번씩 정기적으로 발생합니다. 당신이 이것과 싸울 의향이 있다면, 그것을 위해 가십시오. 그렇지 않으면 다른 옵션을 고려하십시오.

옵션 5: 플러그인 사용

이전에 플러그인을 사용하면 안 되는 이유를 살펴보았지만 여전히 고려할 수 있습니다. 일부 플러그인은 변경 사항을 잘 따르고 API가 작동하지 않아도 되며 설정이 간단합니다.

EmbedSocial, Juicer, SnapWidget 및 Elfsight와 같은 선택을 고려하십시오. 이들은 최소한의 설정으로 원하는 것을 정확히 달성할 수 있는 모든 옵션입니다. 물론 그들만의 장점과 단점이 있고, 그들 중 일부는 무료가 아니지만, 그것이 바로 당신이 조사해야 하는 것입니다.