Facebook 공유하기 버튼 만드는 방법

API

Facebook 공유하기 버튼 만들기

Facebook 공유하기 버튼은 Facebook에서 제공하는 버튼 이미지를 사용해도 되지만, 여기서는 다른 Facebook 이미지를 버튼(일반 이미지)으로 사용하는 방법으로 해보자.

React에서 코드를 작성하면 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import facebook from '../../image/facebook.png';

class Facebook extends Component {
  onClicFacebook = () => {
    window.open('https://www.facebook.com/sharer/sharer.php?u=https://naver.com/')
  }
  render() {
    return (
      <div className="Facebook">
        <button onClick={this.onClickFacebook}><img src={facebook} alt="facebook"></button>
      </div>
    );
  }
}

export default Facebook;

위 코드 중, naver.com 대신 공유할 도메인 주소로 변경하면 된다.


공유하기 버튼을 클릭하면, 다음과 같이 나온다.

페이스북 공유 페이지

위 그림에서 공유할 페이지의 이미지, title, description 등은 원하는 대로 변경할 수 있다.

React 폴더 중, index.html에 meta 태그로 추가하면, 공유할 썸네일을 원하는대로 커스텀 할 수 있다.

1
2
3
4
5
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />



*페이스북 공유 관련 참고 사이트