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

Twitter 공유하기 버튼 만들기


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

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

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

class Twitter extends Component {
onClicTwitter = () => {
window.open('https://www.twitter.com/intent/tweet?&url=https://naver.com/')
}
render() {
return (
<div className="Twitter">
<button onClick={this.onClickTwitter}><img src={twitter} alt="twitter"></button>
</div>
);
}
}

export default Twitter;

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



*트위터 공유 관련 참고 사이트