[HTML] 웹사이트 동영상, 댓글, 채팅, 방문자 분석기 기능 추가

오늘은 생활코딩 부록인 웹사이트에 동영상, 채팅, 방문자 수 기능 추가에 대해 배웠다.

 

먼저 동영상을 추가하는 기능이다.

 

웹사이트에 유투브 동영상을 추가하려면, 공유버튼을 누르고

<> 퍼가기를 누르면

 

동영상의 소스코드가 나온다. 이 코드를 추가하면 동영상을 추가할 수 있다. 

        <p>
            <iframe width="560" height="315" src="https://www.youtube.com/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </p>

여기서 <iframe> 태그가 동영상을 추가하는 기능을 하는 것을 알 수 있었다. 

 

 

 

다음은 댓글 기능 추가하기 입니다. 무료 사이트인 DISQUS (https://disqus.com/)를 이용했다. 

DISQUS에 회원가입을 해서 자신만의 web사이트를 만든 후 주소 코드를 복사하여 내 프로그램에 붙여넣기를 하니 웹사이트에 댓글 기능이 추가 됐다.

 

만약, 복사해온 코드를 붙여넣었을 때

"We were unable to load Disqus. If you are a moderator please see our troubleshooting guide."라는 안내문이 나오고 로드가 안된다면, 웹사이트 주소를 file로 시작하는 주소가 아니라, 웹 서버를 이용하는 주소를 사용해야 한다. 보안상 이유 때문이다.  

 

 

 

다음은 채팅 기능 추가입니다. 무료 사이트인 tawk(https://www.tawk.to/)를 이용했다. 

마찬가지로 회원가입을 한 뒤 웹 사이트에서 복사를 해온 코드를 내 프로그램에 붙여넣기 한다. 

만약, "Reconnecting"이라는 안내문이 나온다면 댓글 기능에서 설명한 웹 서버를 통해 웹 페이지를 여는 방법을 사용하면 해결된다. 

 

마지막으로는 방문자 분석 기능이다. 구글 애널리틱스(https://analytics.google.com/analytics/web/?hl=ko#/)를 이용했다.

스트림을 만든 뒤 코드를 내 프로그램에 복사 붙여넣기하면 방문자 분석 기능을 알 수 있다.