Skip To Content

비디오, 소셜 미디어, iframe 임베드

Facebook, Vimeo, YouTube 소셜 미디어에서 비디오를 공유하고 사이트 또는 페이지에 iframe을 임베드할 수 있습니다.

시작하려면 Portal for ArcGIS에 로그인한 다음 개요 페이지에서 사이트를 클릭하여 사이트 목록을 확인합니다.

팁:

브라우저에서 사이트를 볼 때도 사이트를 편집할 수 있습니다. 로그인하고 사이트 좌측에서 편집 버튼을 찾으세요.

비디오 표시

비디오 카드를 추가하여 YouTube, Vimeo, Facebook 비디오를 임베드합니다.

  1. 미디어 카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. Facebook, Vimeo, YouTube의 비디오 URL을 비디오 URL 필드에 붙여넣습니다.
  4. 비디오 출처에 따라 비디오 표시를 구성할 수 있는 추가 옵션이 나타납니다.
    • Facebook 비디오의 경우 게시물 텍스트 표시를 선택하여 좋아요, 댓글, 공유의 개수와 기타 관련 텍스트를 표시할 수 있습니다. 항상 캡션 표시를 선택하면 비디오 캡션이 표시됩니다.
    • Vimeo 비디오의 경우 비디오 제목 표시, 비디오 소유자 표시, 비디오 소유자 썸네일 표시, 비디오 반복 재생을 선택합니다.
    • YouTube 비디오의 경우에는 YouTube 브랜딩 표시비디오 반복 재생을 선택합니다.
  5. 비디오 URL 옆의 복사 버튼을 클릭하면 해당 링크를 앱 내 다른 곳에 재사용할 수 있도록 클립보드에 저장할 수 있습니다.
  6. 저장을 클릭합니다.

단일 Facebook 게시물 공유

단일 게시물을 표시하여 특정 콘텐츠를 강조 표시합니다.

  1. 소셜 미디어 카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. 공개적으로 공유된 Facebook 게시물의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다. 정확한 URL을 복사하려면 사이트 편집 모드로 돌아가기 전에 게시물의 타임스탬프(게시글의 좌측 상단에 있는 날짜나 시간)를 클릭한 다음 브라우저에 새 URL을 복사합니다.
  4. 필요한 경우 게시물 텍스트 표시 토글 버튼을 클릭하여 게시물과 관련된 텍스트를 표시할 수 있습니다.
  5. 저장을 클릭합니다.

Facebook 타임라인 표시

더욱 다양하게 탐색할 수 있도록 Facebook 타임라인, 이벤트, 메시지를 표시합니다.

  1. 소셜 미디어 카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. 공개적으로 공유된 Facebook 페이지의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다.
  4. 필요한 경우 토글 버튼을 클릭하여 다음 옵션의 조합을 켭니다.
    • 타임라인을 켜면 페이지 머리글 아래에 타임라인 탭이 표시됩니다. 이벤트나 메시지와 함께 타임라인을 공유하려면 해당 옵션을 클릭하세요.
    • 이벤트를 켜면 페이지의 이벤트 뷰에 대한 목록 뷰가 표시됩니다.
    • 메시지를 켜면 사용자가 Facebook 메신저를 사용하여 메시지를 작성해 Facebook 페이지 관리자에게 보낼 수 있습니다.
    • 큰 머리글 사용을 켜면 페이지 머리글의 크기를 늘리고 메시지 보내기 버튼 연결 사용자를 Facebook 메신저에 추가할 수 있습니다.
    • 커버 사진 표시를 켜면 페이지 커버 사진이 표시됩니다.
  5. 저장을 클릭합니다.

단일 트윗 표시

단일 Twitter 게시물을 표시하여 특정 트윗을 강조 표시합니다.

  1. 소셜 미디어 카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. 공개적으로 공유된 Twitter 게시물의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다. 단일 트윗의 링크를 가져오려면 게시물 우측 상단에 있는 추가 버튼을 클릭한 다음 트윗 링크 복사하기를 선택합니다.
  4. 필요한 경우 토글 버튼을 클릭하여 옵션 메뉴에서 다음 옵션의 조합을 켭니다.
    • 어두운 테마 표시를 켜면 디스플레이 색상이 반전됩니다.
    • 트윗 너비를 사용하면 작음, 중간, 옵션으로 게시물 표시 크기를 선택할 수 있습니다.
  5. 트윗 위치 선택을 켜면 좌측, 중앙, 우측 정렬을 선택할 수 있습니다.
  6. 저장을 클릭합니다.

Twitter 타임라인 표시

스크롤 가능한 Twitter 타임라인을 표시합니다.

  1. 소셜 미디어 카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. 공개적으로 공유된 Twitter 타임라인의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다.
  4. 필요한 경우 토글 버튼을 클릭하여 옵션 메뉴에서 다음 옵션의 조합을 켭니다.
    • 확대된 높이를 사용하면 더 많은 Twitter 타임라인을 표시할 수 있습니다.
    • 트윗 제한을 통해 타임라인에 표시되는 트윗 수를 최대 20개까지 설정할 수 있습니다.
    • 어두운 테마 표시를 켜면 디스플레이 색상이 반전됩니다.
    • 머리글 표시를 켜면 머리글이 표시됩니다. 마찬가지로 바닥글 표시를 선택하면 바닥글이 표시됩니다.
    • 테두리 표시를 켜면 타임라인 둘레에 테두리가 표시됩니다.
    • 배경 표시는 배경을 표시하거나 제거합니다.
  5. 저장을 클릭합니다.

iframe 카드를 사용하여 콘텐츠 임베드

iframe 카드를 사용하여 앱, 웹맵, 대시보드 등의 외부 리소스를 URL을 통해 임베드할 수 있습니다.

팁:

iframe은 대시보드 및 인포그래픽을 표시하는 데 가장 적합합니다. Experience Builder 웹앱, Insights 페이지, 웹맵, 스토리맵을 포함한 다른 항목의 경우 갤러리 카드, 웹맵 카드 또는 응용프로그램 카드를 사용하는 것을 고려합니다.

iframe을 사용하는 경우 인스턴스 수를 2개 이하로 제한하는 것이 좋습니다. 한 사이트나 페이지에 iframe이 너무 많으면 모바일 뷰의 성능이 저하될 수 있습니다. iframe을 사용하든 다른 카드를 사용하든 2개 이하의 주요 항목을 표시하면 더 깔끔하고 접근성이 좋은 디자인을 만들 수 있습니다. 남은 항목은 갤러리 카드를 사용해보세요.

  1. Iframe카드를 기존 행에 드래그합니다.
  2. 해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
  3. iframe URL 및 iframe 높이를 제공합니다. 다른 웹사이트의 iframe 코드를 임베드하지 마세요. 임베드하려는 URL만 붙여넣어야 합니다.

    비고:
    기본 URL이 더 작은 장치에서 실패하더라도 콘텐츠가 렌더링되도록 하려면 모바일 URL 재정의 필드를 사용하여 보조 URL을 제공할 수 있습니다.

  4. iframe에 제목을 추가합니다.
  5. 자동을 켜서 스크롤링을 활성화합니다.

    팁:
    사용자가 스크롤만 할 수 있는 경우 응용프로그램으로 넘어가지 못할 수 있어 모바일 기기에서 스크롤이 항상 적합한 것은 아닙니다. 변경 사항을 적용하기 전에 모바일에서 스크롤 가능한 iframe을 사용할 수 있는지 확인하세요.

  6. 적용을 클릭합니다.

    비고:

    HTTP가 사용된 iframe URL은 HTTPS가 사용되는 편집 모드에 나타나지 않습니다. 사이트를 저장한 후 확인하여 iframe이 제대로 나타나는지 살펴봅니다.

  7. 저장을 클릭합니다.