오늘은 깔끔한 인스타그램 사진 위젯을 만드는 방법을 알려드릴까 합니다. HTML 편집이 자유로운 같은 블로그나 웹사이트에서 사용할 수 있는 건데요. 트위터, 페이스북의 위젯도 제공하지만 사진 위주로 구성된 생김새를 보아하니 인스타그램에 더 어울립니다.


    위젯을 만들어주는 서비스의 이름은 스냅 위젯으로 다양한 SNS위젯을 유-무료로 지원하는데요. 사이트에서 커스터마이징 후 코드를 긁어와 티스토리 사이드바에 적용하는 방법까지 정리해봤습니다.



    사진으로 구성된 깔끔한 인스타그램 위젯





    위젯 목록

    사진으로 구성된 깔끔한 인스타그램 위젯


    스냅위젯 사이트에서 간단하게 페이스북 로그인하니, 대쉬보드로 이동해 이 사이트에서 제공하는 위젯 목록이 표시되었는데요. 이를 트위터, 페이스북, 인스타그램 등의 SNS별로 위젯을 구분해 보거나, 유-무료, 위젯 디자인에 따라 구분해서 목록을 나누어 볼 수 있습니다. 


    무료 위젯 종류

    사진으로 구성된 깔끔한 인스타그램 위젯


    블로그에 적용할 수 있는 무료 위젯은 총 4종류 인데요. 인스타그램에 포스팅한 사진을 슬라이드나 가로로 긴 썸네일 목록으로 보여줍니다. 또한 인스타그램을 포스팅한 지역을 지도상에서 보여주는 위젯도 잇고요. 사진과 동영상을 정사각형의 썸네일 목록으로 보여주며, 마우스 오버시 좋아요와 댓글 수를 알려주기도 합니다.




    인스타그램 계정으로 로그인

    사진으로 구성된 깔끔한 인스타그램 위젯


    이런 유-무료 인스타그램 위젯을 얻기 위해선 먼저 인스타그램 계정으로 로그인 해주어야 하는데요. 저의 경우 인스타그램을 페이스북에 연동해 사용하고 있고, 앞서 스냅위젯 사이트를 페이스북으로 로그인하였기에 ID와 비밀번호를 입력하는 별도의 과정 없이 바로 위젯을 생성하였습니다.




    커스터마이징

    사진으로 구성된 깔끔한 인스타그램 위젯


    앞서 인스타그램 계정으로 로그인하면 사용자 이름 영역에 자동으로 계정명이 표기되며, 자신이 포스팅한 사진과 동영상이 상단에 미리보기로 표시됩니다. 


    이후 썸네일 사이즈와 레이아웃, 배경색, 여백, 마우스 커서 오버시 이펙트, 공유 버튼 노출, 반응형 지원 등의 항목을 선택합니다. 참고로 제 블로그는 반응형 스킨을 사용하기에 반응형 항목을 'Yes'라 선택해 주었습니다.




    위젯 코드 발급 및 코드 적용

    사진으로 구성된 깔끔한 인스타그램 위젯


    각 항목별 커스터마이징이 완성되었다면, 하단의 'Get Widget' 버튼을 눌러줍니다. 이윽고 팝업창에 iFrame으로 구성된 코드가 보여지는데요. 하단의 'Copy to Clipboard'를 누르면 코드가 클립보드로 복사됩니다.



    사진으로 구성된 깔끔한 인스타그램 위젯


    이제 티스토리는 사이드바에서 HTML배너출력이라는 모듈을 추가하고요. 이윽고 호출되는 팝업창에서 앞서 클립보드로 복사해둔 소스코드를 붙여넣기 합니다. 향후 블로그 스킨을 바꾸고 사이드바를 재정비할 때, 쉽게 위젯을 추가할 수 있도록 '사용자 모듈에 저장'이라고 적힌 체크박스에 체크를 꼭 하고요. 이름도 적어줍니다.



    위젯 적용 결과

    사진으로 구성된 깔끔한 인스타그램 위젯


    이렇게 사이드바에 스냅 위젯에서 제공한 인스타그램 위젯을 추가했습니다. 제가 선택한 디자인은 인스타그램에 포스팅한 사진, 동영상의 썸네일을 3X3 목록으로 보여주는건데요. 티에디션의 박스와 동일하게 하얀색 배경을 추가해줬더니 제법 블로그에 잘 어울려 보였습니다. 



    사진으로 구성된 깔끔한 인스타그램 위젯


    그런데 이 썸네일을 클릭하니 저의 인스타그램 웹페이지로 이동하는게 아니라 스냅 위젯이 페이지로 이동하는데요. 이렇게 링크 처리를 한 점, 모바일 브라우저(안드로이드, 크롬)에서는 동영상이 재생 안되는 점은 많이 아쉽습니다.


    프로 버전은 인스타그램으로 바로 이동하는 방식일지 궁금해지네요. 




    마치며..

    이렇게 인스타그램 사진 위젯을 만드는 방법에 대해 알아보았습니다. 제가 사용한 위젯 서비스인 '스냅위젯'은 썸네일 목록, 슬라이드, 포스팅 장소를 보여주는 지도 타입 등의 디자인이 꽤 깔끔하였는데요. 


    다만 무료 버전에서 사진과 동영상 썸네일 클릭시 인스타그램 웹페이지가 아닌 서비스를 제공하는 스냅 위젯의 사이트로 이동하는 방식은 아쉬웠습니다. 거기다 모바일 브라우저에서 동영상이 제대로 재생되지 않았고요. 이 위젯 서비스에 대해 더 궁금하거나, 직접 적용하고자 하는 분들은 링크를 통해 확인하길 바랍니다.






    신고






    Posted by 모바노