Recoeve.net 퍼가는 법 (iframe) 및 reco 공유하는 법

# Recoeve.net 퍼가는 법 (iframe) 및 reco 공유하는 법 Recoeve.net 을 iframe 으로 퍼가는 법과 각 reco 들을 공유하는 법에 대해 설명드리겠습니다. ## PH

• 2023-12-28 : First posting.

## TOC ## iframe 으로 퍼가기. 여러가지 옵션으로 iframe 으로 퍼오실 수 있는데, ToR (목록: 단축키 T) 을 키신 상태로 퍼오실수도 있고, 언어 설정을 다르게 해서 퍼오실수도 있습니다. Multireco mode (멀티레코 모드: 단축키 M) 로도 퍼오실 수 있어요. 우선 퍼오고 싶은 유저의 recoeve.net 사이트에 접속하시고, floating bar (고정된 떠다니는 버튼들) 로 옵션을 적절히 선택해 주세요. ToR (목록) 을 킬 것인지 말 것인지, 언어 설정은 어떻게 할 것인지, Mode 는 어떤걸로 하실 것인지 등 (Get Recoms | 추천받기 Mode (R 버튼) 나 Daily-mix | 추천섞기 Mode (Y 버튼) 는 로그인한 사용자 본인 사이트 용이기 때문에 이 모드 | Mode 로 퍼오셔도 적용이 안되어서 퍼와질 거예요.). 그 다음 floating bar (고정된 떠다니는 버튼들) 가장 아래 공유하기 버튼들이 작게 한줄로 7개 정도 (link, html code, recoeve, X, facebook, Kakao talk, WhatsApp) 있을거예요. 제일 처음 것을 누르시면 link 들이 복사가 됩니다. 화면으로도 팝업되니 적절히 필요한 부분만 골라 복사하셔서 아래에 적절히 붙여넣으시면 됩니다. 스타일 CSS 를 설정하실 수 있는 사이트 혹은 블로그라면 아래와 같이 스타일 CSS 를 설정하시고 ```[.linenums.lang-html] <style> .rC {margin:.5em 0} .rC.recoeve {border:1px solid white; border-right:1em solid rgb(30,30,60)} .rC>.rSC {position:relative; height:0; padding-bottom:63%} .rC.recoeve>.rSC {padding-bottom:150%} .rC>.rSC>* {position:absolute; width:100%; height:100%; max-width:100%; max-height:100%; left:0; top:0; overflow-x:hidden; overflow-y:hidden} </style> ```/ 아래와 같이 iframe 으로 recoeve.net 링크를 src 에 집어넣으시면 됩니다. ```[.linenums.lang-html] [Music/Break]--Pop of kipid's Recoeve.net <div class="rC recoeve"><div class="rSC"> <iframe src="https://recoeve.net/user/kipid?cat=%5BMusic%2FBreak%5D--Pop&PRL=0.80&PRR=1.00&ToR=&lang=en#headPlay" frameborder="0"></iframe> </div></div> ```/ 그러면 아래와 같이 나타납니다. [Music/Break]--Pop of kipid's Recoeve.net

### 스타일 CSS 직접 입력하기. (Manually putting CSS style) 스타일 CSS 를 막아놓은 사이트들이 많을거예요. 그럴떈 직접 div 에 style 옵션에 넣어주시면 됩니다. 아래와 같이... ```[.linenums.lang-html] <div style="margin:.5em 0; border:1px solid white; border-right:1em solid rgb(30,30,60)"><div style="position:relative; height:0; padding-bottom:150%"> <iframe style="position:absolute; width:100%; height:100%; max-width:100%; max-height:100%; left:0; top:0; right:0; bottom:0; overflow-x:hidden; overflow-y:hidden" src="https://recoeve.net/user/kipid?cat=%5BMusic%2FBreak%5D--Pop&PRL=0.80&PRR=1.00&ToR=&lang=en#headPlay" frameborder="0"></iframe> </div></div> ```/ 그러면 아래와 같이 나타납니다. (티스토리 tistory 에선 iframe 을 <div class="iframe-wrap"></div> 으로 감싸고 스타일을 .entry-content .iframe-wrap {position: relative; height: 0; padding-bottom: 56.25%;} 로 막무가내로 줘버려서 높이 150% 비율이 제대로 표현이 안되네요 ㅡ,.ㅡ;;; 전 억지로 class 넣어서 해결하긴 했는데, 티스토리는 style 허용 하니까 style 이용해서 포스팅 하시길...)

### 그림 동영상 파일로 설명

아래는 결과물. [Music/Break]--K-Pop of kipid's Recoeve.net

## 개별 reco 공유하는 법 각 reco 의 왼쪽 윗편에 공유하는 버튼들이 주르륵 있습니다. 우선은 그 버튼들 이용하셔서 공유하시면 되고, 특정 reco 를 iframe 으로 퍼오고 싶다고 하실땐 그 특정 reco 의 link (왼쪽 윗편 젤 왼쪽 버튼) 를 누르셔서 window.location.hash | URL 의 #hash 값이 이 reco 의 uri 를 가르키도록 되어 있는 전체 URL 을 iframe 으로 삽입하시면 로딩 | loading 될 때 그 reco 로 스크롤 | scroll 되도록 되어 있습니다. 아래와 같이 Go (Fuzzy Search) 로 Doja Cat 을 검색해서 해당 reco 로 찾아가신 다음. 왼쪽 위 share link 버튼을 누릅니다. 그러면 아래와 같은 URL 이 나타나게 되는데, 이 URL 을 iframe 으로 긁어오시거나 링크를 공유해서 브라우저로 접속 하시면 해당 카테고리의 해당 reco 로 스크롤되게 만들어져 있습니다. 링크 :: Doja Cat - Paint The Town Red : https://recoeve.net/user/kipid?cat=[Music/Break]--Pop&lang=en#https://www.youtube.com/watch?v=m4_9TFeMfJE iframe 삽입. ```[.linenums.lang-html] <div class="rC recoeve"><div class="rSC"> <iframe src="https://recoeve.net/user/kipid?cat=%5BMusic%2FBreak%5D--Pop&lang=en#https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dm4_9TFeMfJE" frameborder="0"></iframe> </div></div> ```/

## RRA

1. 초기 Recoeve.net 유저용 설명서
2. Recoeve.net (3S|Slow/Sexy/Sincere SNS) 사용설명서/Manual
3. Introducing what we are making : Recoeve.net