최종 프로젝트) JS로 소셜 공유 하기(카톡, X, Facebook)

안녕하세유? 오랜만에 돌아왔습니다!

 

mbti를 테스트 하거나, 유튜브를 보다가, sns를 이용하다가 공유하기 버튼은 쉽게 볼 수 있다. 
이번 프로젝트에서는 내가 부른 노래를 ai가 원곡과 비교해서 점수를 알려주는 서비스가 있는데,
문득 "이걸 공유할 수 있으면 더 사이트가 활발해지지 않을까?" 하는 생각이 들었다. 

 

 

사실 공유하는 방법은 생각보다 간단하다.

js 소셜 공유, js 카카오톡 공유만 쳐도 방법이 엄청엄청 많이 나온다.

내 글도 그 중 한 개의 방법이 되겠지?

순서 간단 정리

1. html에서 button 추가 해주기
2. css로 스타일 꾸며주기(사실 이건 나중에 해줘도 됌)
3. 도메인 만들기
4. 카카오톡에서 앱 등록하고 키 받아오기
5. js에 코드 추가해주기

 

 

하나씩 해보도록 하자. ㄱㄱㄱㄱ

 

 

 

1. html에 button 추가해주기

<button id="share-facebook">Facebook</button>
<button id="share-twitter">X</button>
<button id="share-kakao">KakaoTalk</button>

사실 이건 설명할 게 없다.

버튼 태그에 아이디 값 넣어주고 버튼 이름만 각각에 맞게 적어주었다.(아이디값은 반드시 넣어줘야한다!)

 

 

 

2. css로 스타일 꾸며주기(사실 이건 나중에 해줘도 됌)

button {
    background-color:transparent;
    font-family: 'SCoreDream-400';
    color: #fff;
    width: 100%;
    height: 46px;
    font-size: 15px;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
}

난 이런식으로 꾸몄는데, 혹시 필요하다면 복붙해도 괜찮~ 

 

3. 임시 도메인 만들기?!

이부분은 본인의 홈페이지가 이미 배포가 된 상태고 도메인 주소가 있다면 건너뛰어도 괜찮다.

나같은 경우에는 배포 전이고 계속 로컬에서만 작업했기 때문에 도메인 주소 따윈 없었다 ㅋㅎ 

제 홈페이지 주소는 http://127.0.0.1:8000/ 으로 시작한다구욧?!!? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

임시 도메인이라는 말이 거슬린다면, 음 내 로컬 서버를 임시로 외부에 공개한다?고 생각해도 ㄱㅊㄱㅊ

으쨌든, 나는 이 영상을 보고 따라했으니 참고 해주셈

https://www.youtube.com/watch?v=0lUJvVqSEkY

 

 

1. Ngrok.com에 들어가서 회원가입과 로그인을 한다.

https://ngrok.com/ 

ngrok | Unified Application Delivery Platform for Developers

 

 

 

 

2. 다운받는다. (나 맥써서 윈도우 어떻게 하는지 모름 ㅈㅅ)

 

 

3. 압축 풀어주고, 터미널을 연다. -> ngrok이 있는 곳으로 이동해준다.

 

깨알 명령어 소개하기(사실 이거 읽을정도 되면 이미 알고 있을거같긴 하지만 난 친절하니까 설명해드림;;)

pwd : 현재 위치 확인하기

ls : 현재 위치에 어떤게 있는지 리스트로 확인하기

 

만약 ngrok이 다운로드 폴더에 있다면

cd Downloads

라고 해주면 되겠죠?

 

저는 바탕화면에 있었기 때문에

cd Desktop 해주었음!

 

4. 시키는 대로 하기? 아마 ngrok이랑 연결해주는 파트가 아닐까요? 저도 잘 모름요;;

./ngrok config add-authtoken 고유 토큰 번호~~

./  <-이건 현재 위치 나타내주는 거 ! 다들 알죠?

 

고유 토큰 번호는 로그인하고 나면 그 창에 떠있을 것임!

사진 보면 중간에 모자이크 한 부분 보이죵? 저거 그대로 카피해서 ./ 이것만 앞에다 붙여주세요! 

 

아무튼 저거까지 터미널에 쳤으면 이제 ngrok을 쓸 준비가 다 된 것입니다!! 와아아아아

 

 

 

5.  ngrok사용해보기

 

 

그리고 실제로 실행해서 쓰려면

./ngrok http 8000 이걸 써주면 됩니다. 자기 로컬서버에 떠있는 포트번호를 붙여주면 되는데, 포트번호 잘 모르겠으면 서버 실행해보면 알 수 있겠죠? 

제 꺼는 8000으로 뜨네요? 근데 다들 8000번이지 않을까요? 저도 잘 모름ㅋㅋㅋㅋㅋㅋㅋ 으쨌든 

 

 

밑에 명령어를 입력해주면 실행이 됩니다! (미리 로컬에서 서버 켜주시고 밑에 명령어 쳐주세요!)

./ngrok http 포트 번호

#내 경우에는 이렇게
./ngrok http 8000

저처럼 똑같이 8000을 쓰신다면 제가 적었던 명령어 복붙하면 되겠죠? ㅎㅎ

 

 

 

위 과정을 잘 따라왔다면 터미널에 다음과 같은 화면이 보일 겁니다!

굳굳 여기까지 오느라 수고 하셨으! 이제 잘 되는지 들어가봐야겠죠? 

 

 

 

밑에 빨간 박스 친거 보이세요?? 저거 검색창에 치면 본인의 사이트가 나올 것입니다! 

아 그리고 방금 깨달았는데 저거 주소 계속 바뀌는 거 같아요 ㅋㅋㅋㅋㅋㅋ 내가 처음에 썼던 주소 저거 아닌디.... 

 

 

 

처음에 들어가면 이렇게 뜰 텐데 무시하고 visit site 눌러주세요! 

 

 

그리고 만약 당신이 장고를 사용한다면 이런 화면이 뜰 것입니다 ^^ (젠장,,)

보안이 철저한 장고는 아무나 쉽게 들여보내주지 않아요! 

 

settings.py에 들어가서 ALLOWED_HOSTS =[ ]을 찾아서 다음과 같은 코드를 추가해주세요!

#settings.py
ALLOWED_HOSTS = [
    'localhost',
    '127.0.0.1',
    '여기에 사이트 주소 넣기',
]

사이트 주소 넣어주시고 서버 껐다가 다시 실행 ㄱㄱㄱ 그럼 잘 될 겁니다! 

그래도 안 되면 나도 왜그러는지 몰라유 오타 있나 확인해보시고 gpt 한테 물어보세유!

 

사이트 주소는 저 빨간 박스 보이죠? 저기에 뜨는 거 넣어주세요! 앞에거 넣으면 안될거임!

 

 

 

아무튼 이제 3번 끝났으니까 저희는 4번으로 넘어가 봅시다

4. 카카오톡에서 앱 등록하고 키 받아오기

저희가 소셜공유를 위해 이러고 있었다는 걸 다들 잊으시면 안됩니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

x 나 페북이나 그냥 저희 사이트 링크만 코드에 넣으면 다 작동이 되는데 카카오톡은 그렇지 않음!

카카오톡 소셜 공유를 위해선

 

1. 개발자 사이트에서 로그인 
2. 앱 만들기
3. 웹 도메인 주소 등록
4. 자바스크립트 키 가져오기
5. 스크립트 태그에 주소 넣어주기

라는 과정이 필요합니다. 

휴 설명하는 저는 길어지겠지만 실행하는 여러분은 생각보다 얼마 안 걸릴 거에요 

 

 

 

일단 이 사이트 들어가서 로그인 해줍시당~

 

https://developers.kakao.com/

Kakao Developers

 

2. 앱 만들기

내 애플리케이션에 들어가줍니다

추가 하기 누르시고~

 

 

 

 

 

이거 채워주면 되는데 아무렇게나 하고 확인 누르시면 됩니다 아이콘도 굳이 안 넣어도 ㄱㅊㄱㅊ

전 항상 앱 이름이랑 회사명 똑같이 함 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

저장 누르면 내 앱이 생겼을 겁니다!

이제 주소 등록하러 가봅시다

 

3. 웹 도메인 주소 등록

 

앱을 들어오시면 이런 화면일건데, 플랫폼 들어와주세요!

 

 

 

 

 

플랫폼 등록 누르고

 

 

 

 

 

 

우리 아까 만들었던 사이트 주소 기억하죠? 그거 복붙하고 저장 누르셈

 

 

 

 

 

 

그럼 이렇게 잘 저장된 걸 볼 수 있습니다!!!

 

 

 

 

 

 

 

 

 

4. 자바스크립트 키 가져오기

 

키 가져와야 하니까 앱 키 누르시구요

 

 

 

 

 

 

 

 

 

그럼 이렇게 뜰텐데 우리는 자바스크립트 키만 가져올 겁니다! 이거 외부 유출하시면 안 되니까 조심 하시구요!!

근데 이건 당장 쓸 건 아니어서 그냥 한 쪽에다가 띄워두시고 우리는 코드로 돌아갑시다!!

 

 

 

 

 

 

 

 

 

 

5. 스크립트 태그에 주소 넣어주기

 

우리가 카카오톡을 끌어다 쓰려면 html에서 head부분에 다음과 같은 코드를 추가 해줘야합니다!

    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

 

이렇게 되면 이제 진짜!!! 소셜 공유 하는 코드를 작성할 준비가 다 된 것임...ㅎ 

잊으시면 안 됩니다 이 모든 건 소셜 공유를 위한 과정이었다는 걸~

 

 

 

 

 

 

 

 

 

5.  js에 코드 추가해주기

 

자! html에 코드 잘 추가해주셨죠? 그럼 우린 js 코드로 넘어옵시다!

이렇게 적어주고 실행하면 아마 될겁니다! 공유할 url과 자바스크립트 키 넣어서 실행해보세요!!

document.getElementById('share-facebook').addEventListener('click', function() {
    const url = 'https://www.yourwebsite.com'; // 공유할 URL
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
    window.open(facebookUrl, '_blank');
});

document.getElementById('share-twitter').addEventListener('click', function() {
    const url = 'https://www.yourwebsite.com'; // 공유할 URL
    const text = 'Check out this awesome website!'; // 공유할 텍스트
    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
    window.open(twitterUrl, '_blank');
});

document.getElementById('share-kakao').addEventListener('click', function() {
    Kakao.init('YOUR_APP_KEY'); // Kakao Developers에서 발급받은 JavaScript 키
    Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: 'Your Website Title',
            description: 'Your website description',
            imageUrl: 'https://www.yourwebsite.com/image.jpg', // 공유할 이미지 URL
            link: {
                mobileWebUrl: 'https://www.yourwebsite.com',
                webUrl: 'https://www.yourwebsite.com'
            }
        }
    });
});

사실 페이스북이랑 트위터는 사이트 주소만 넣어도 실행되는데, 카카오톡 때문에 뭔가 오래걸린 넉낌~

아 혹시 이 코드대로 했는데 잘 안 되면 gpt 이용하시거나 제가 밑에 올린 코드 잘 조합해보세요 ㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

 

 

 

저같은 경우에는 함수에 넣어서 호출하는 방식으로 사용했습니다! 이건 참고용으로 보세유~

function setupSocialShare(data) {
        const baseUrl = '사이트 주소넣기'; 
        const url = `${baseUrl}${window.location.pathname}`; // 현재 페이지 UR
        const title = data.youtube_title; 
        const text = data.message; 

        document.getElementById('share-facebook').addEventListener('click', function() {
            const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
            window.open(facebookUrl, '_blank');
        });

        document.getElementById('share-twitter').addEventListener('click', function() {
            const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
            window.open(twitterUrl, '_blank');
        });
        document.getElementById('share-kakao').addEventListener('click', function() {
            if (!Kakao.isInitialized()) {
                Kakao.init('자바스크립트 키 넣기');
            }
            Kakao.Link.sendDefault({
                objectType: 'feed',
                content: {
                    title: title,
                    description: text,
                    link: {
                        mobileWebUrl: url,
                        webUrl: url
                    }
                }
            });
        });
    }

 

저렇게 하고 사이트 열어서 한 번 테스트 해보세요!

전 잘 되었답니다 ^0^

 

 

 

 

 

 

 

왁 글 짱 길다 후우우 이렇게까지 정성들일 생각은 없었는데...

어떻게 구현하지? 하고 알아보고 적용하는 것보다 블로그 글쓰는게 더 걸렸음요...ㅎ

이거 맞아요?????ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

다들 도움이 됐길 바라며!!

공감 한 번씩 누르고 가주세유~ 

그럼 다음 글에서 봐용 ㅃㅇ