m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.

Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

disqus.js with id="disqus-js" is loaded.

kakao.js with id="kakao-jssdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=0;
m.wait=1024;
wait 1263ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

▲

out focus

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.18
Canonical URI: https://kipid.tistory.com/entry/Sharing-URI-through-SNS
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/132
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)

Copy to clipboard, 트위터 (X), 페이스북 (Facebook), 레코이브 (Recoeve.net), 카카오톡 (Kakao talk), 라인 (Line), WhatsApp 등등 SNS 로 공유하기 기능 정리. 도 참고하시길.

DocuK 에서도 구현해서 넣어놨음. 왼쪽 위랑 문서 제일 아래쪽에 삽입되도록. Pop-up 으로 하는것보다 그냥 새 창 띄우는게 내 취향이라, 새 창 띄우는 방식으로 동작. (iframe pop-in 이 되면 이걸로 하고 싶긴한데, iframe 을 다들 막아서 불가능함.)

문서 왼쪽 위와 젤 아래 중간의 image button 들로 테스트도 해보세요.

1.Recoeve.net (레코이브)

1.1.Button

2.Copy to clipboard

2.1.Button

3.X (트위터)

3.1.Button

3.2.Logo

4.Facebook (페이스북)

4.1.Meta informations

4.2.Button

5.카카오톡 (Kakao talk)

5.1.Button

6.Instagram (인스타그램) DM (Direct Message) 혹은 Posting 하기.

7.WhatsApp (왓츠앱)

7.1.Button

8.한꺼번에 처리하기 (All codes in one function)

8.1.Icon 사용한 onclick 구현.

Refs.References and Related Articles

T 1.Recoeve.net (레코이브)

▼ Show/Hide

제가 만든 서비스인 recoeve.net 에서 바로 reco 할 수 있게 만들어주는 uri 은

https://recoeve.net/reco?uri=https://kipid.tistory.com/entry/Sharing-URI-through-SNS&title=SNS 내보내기/공유하기 (Sharing a URI link through SNS)&cats=[IT/Programming]--HTML

와 같은 형태임.

실제 url 은 encodeURIComponent 함수를 써서

https://recoeve.net/reco?uri=https%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS&title=SNS%20%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0%2F%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0%20(Sharing%20a%20URI%20link%20through%20SNS)

와 같이 표시되어야 함.

매개변수 (Parameter) uri, title, cats 등을 지원함.

T 1.1.Button

버튼을 만들어 볼까나?

<button onclick="k.popUpRecoeve()">Recoeve</button>

<script>
// 각 글에서 title 과 k.recoCats 변수를 잘 저장해 줘야됨.
/*
m=m||{};
k.recoCats="[IT/Programming]--HTML";
*/
k.popUpRecoeve=function () {
	window.open("https://recoeve.net/reco"
			+"?uri="+encodeURIComponent(window.location.href)
			+"&title="+encodeURIComponent( $("title").eq(0).text() ) // Title in this html document
			+`${k.recoCats?`&cats=${encodeURIComponent(k.recoCats)}`:""}`
		// , "_blank"
		// , 'width=600,height=400,resizable=yes,scrollbars=yes'
	);
};
</script>

Fig. (1-1): Recoeve 에 reco 하기.

Fig. (1-2): Recoeve 에 현재 페이지 reco 해보기 (iframe).

▲ Hide

T 2.Copy to clipboard

▼ Show/Hide

1. navigator.clipboard.writeText 는 Only supported on pages served over HTTPS 라고... HTTPS 구현 했으니 해놓자.

2. Document.execCommand() 도 deprecated 라 함.

3. 참고해서... (이건 뭔지 모르겄넹;;; copy 안되는데 ㅡ,.ㅡ)

T 2.1.Button

버튼을 만들어 볼까나?

<button onclick="k.copyToClipboard()">Copy</button>

<style>
.block-touch {
	display:flex;
	position:fixed;
	z-index:30000;
	inset:0;
	background-color:rgba(0, 0, 0, .5);
}

.block-touch>div {
	display:inline-block;
	margin:auto;
	border:5px solid wheat;
	width:30em;
	maxWidth:100%
}

.block-touch>div>div {
	padding:.5em 1em;
	width:100%;
	background-color:black;
	color:white
}

.block-touch>div>textarea {
	padding:.5em 1em;
	width:100%;
	height:20em;
	background-color:white;
	color:black
}

.exit {
	z-index:31000;
	position:absolute;
	display:inline-block;
	top:0;
	right:0;
	width:3em;
	height:3em;
	line-height:1.0;
	text-align:center;
	cursor:pointer;
	border:2px rgb(80, 80, 80) solid;
	background-color:rgb(30, 30, 30);
	color:white
}

.exit>svg {
	width:100%;
	height:100%;
	font-size:3em;
	line-height:1.0
}

.block-touch-exit {
	zIndex:31000;
	position:fixed
}

.block-touch-exit g {
	stroke:white;
	stroke-width:23%
}
</style>

<script>
///////////////////////////////////////////////
// 전 이미 docuK 로 추가 해 놔서 아래는 주석처리.
///////////////////////////////////////////////
// $(`body`).prepend(`<div id="notify-copied" class="block-touch">
// 	<div>
// 		<div>[--The following is copied!--]</div>
// 		<textarea id="textarea-copied"></textarea>
// 	</div>
// </div>
// <div id="notify-copied-exit" class="block-touch-exit exit" onclick="$('#notify-copied, #notify-copied-exit').hide()">
// 	<svg>
// 		<g>
// 			<line x1="20%" y1="20%" x2="80%" y2="80%"></line>
// 			<line x1="80%" y1="20%" x2="20%" y2="80%"></line>
// 		</g>
// 		✖
// 	</svg>
// </div>`);
// $('#notify-copied, #notify-copied-exit').hide();
// k.$textarea_copied = $(`#textarea-copied`);

k.escapeOnlyTag = function (str) {
	if (!str || typeof str !== "string") { str = String(str); }
	return str.replace(/</g, '<').replace(/>/g, '>');
};

k.copyToClipboard = function () {
	const title = $("title").html();
	const uri = window.location.href;
	const decodedURI = k.escapeOnlyTag(decodeURIComponent(uri));
	const written = `${title}\n${uri}${uri !== decodedURI ? `\n${decodedURI}` : ``}`;
	navigator.clipboard.writeText(written).then(function () {
			k.$textarea_copied[0].value = written;
			$('#notify-copied, #notify-copied-exit').show();
		}
		, function (err) {
			k.$textarea_copied[0].value = `Could not copy text: ${err}`;
			$('#notify-copied, #notify-copied-exit').show();
		});
};
</script>

▲ Hide

T 3.X (트위터)

▼ Show/Hide

트위터는 https://X.com/intent/tweet 통해서 지원하는듯. 매개변수 (Parameter: via (이건 꼭 자신에게 맞는 id 로 바꾸시길. kipacti 로 그대로 쓰시지 말고...), text, url 등) 들도 지원함 .

https://X.com/intent/tweet?via=kipacti&text=SNS%20%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0%2F%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0%20%ED%85%8C%EC%8A%A4%ED%8A%B8&url=http%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS

로 접속하면, SNS 내보내기/공유하기 테스트 https://kipid.tistory.com/entry/Sharing-URI-through-SNS via @kipacti 가 채워져서 트윗이 나타남.

Fig. (3-1): 트위터 링크 공유. (Share a link with your followers.)

URI 에 스페이스나 한글, 특수문자 (특히 &, =) 등이 들어가면 에러가 잘 떠서, Encode URI Component 이용해서 처리해주는 것이 좋음.

https://X.com/intent/tweet?via=kipacti&text=SNS 내보내기/공유하기 테스트&url=https://kipid.tistory.com/entry/Sharing-URI-through-SNS

로 접속해도 잘 나오긴 하는거 같은데... 만약을 대비해서 javascript 의 encodeURIComponent function 을 활용합시다.

그런데 이거 iframe 으로는 삽입이 안됨;;; Refused to display 'https://X.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 라고 뜨면서 거부. 이래서 다들 out pop-up 으로 공유창 띄우는구나? 뭔가 다른식으로 in pop-up 으로 구현할수도 있을거 같긴한데...

T 3.1.Button

버튼을 만들어 볼까나?

<button onclick="k.popUpX()">X</button>

<script>
k.popUpX=function () {
	window.open("https://X.com/intent/tweet"
			+"?via=kipacti" // 이건 자신의 id 로 꼭 바꿉시다.
			+"&text="+encodeURIComponent( $("title").eq(0).text() ) // Title in this html document
			+"&url="+encodeURIComponent(window.location.href)
		// , "_blank"
		// , 'width=600,height=400,resizable=yes,scrollbars=yes'
	);
};
</script>

T 3.2.Logo

트위터 로고 어찌 구현한거지? 신기하네;;; CSS 로 content:"\f179"; font-family:"rosettaicons"; -webkit-font-smoothing:antialiased; 요렇게 해놓으면 로고가 뜨도록 해놨던데.. 긁어다가 테스트 해보니 안되고. 뭔가 웹폰트를 이용한거 같은데... 신기하당.

뭐 귀찮으니 난 스크린 캡쳐해서 이미지로 구현해야겠음. Logo 는 SVG 이용해서 scalable 하게 만드는게 이쁘긴 한듯. 그런데 이렇게 하면 딴 사람들이 퍼가기는 쉽지 않다는거...

▲ Hide

T 4.Facebook (페이스북)

▼ Show/Hide

페이스북은 https://www.facebook.com/sharer/sharer.php 를 통해서 지원함. 매개변수 (Parameter: u (URI)) 도 있음. t (title? text?) 는 지원이 중단됐다고... u 하나만 있는건가 그러면? =ㅇ= .

https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fkipid.tistory.com%2Fentry%2FSharing-URI-through-SNS

에 접속하면, URI 이 붙은채로 내 타임라인에 글을 쓸 수 있음.

Fig. (4-1): 페이스북 링크 공유.

페이스북도 iframe 은 마찬가지로 막음. Refused to display 'https://www.facebook.com/sharer/sharer.php' in a frame because it set 'X-Frame-Options' to 'DENY'. 라고 뜨면서 거부.

T 4.1.Meta informations

Meta tag 를 이용해서 요약정보를 어느정도 수정할수도 있는듯?

<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:title" content="웹 페이지 제목" />
<meta property="og:url" content="웹 페이지 URI" />
<meta property="og:description" content="웹 페이지 내용" />
<meta property="og:image" content="웹 페이지 대표 이미지" />

(테스트 해보고는 있는데, 업데이트 되는데에는 시간이 좀 걸리는듯? 페이스북이 페이지들을 crawling 하면서 데이터베이스를 따로 만들어 놓는듯한데...) 뭐 이런거까지 신경쓰면서 글 쓸 사람은 별로 없을듯. 대충 링크만 공유합시다. 내용은 페북이 알아서 긁어다가 분석하겠지.

T 4.2.Button

버튼을 만들어 볼까나?

<button onclick="k.popUpFacebook()">Facebook</button>

<script>
k.popUpFacebook=function () {
	window.open("https://www.facebook.com/sharer/sharer.php"
			+"?u="+encodeURIComponent(window.location.href)
		// , "_blank"
		// , 'width=600,height=400,resizable=yes,scrollbars=yes'
	);
};
</script>

▲ Hide

T 5.카카오톡 (Kakao talk)

▼ Show/Hide

카톡도 그냥 url 링크로 접속하면 알아서 앱 열어주고 하는식으로 동작하게 만들지. 자기들 개발하기 편한대로 만들어놔서 복잡한듯. 트위터나 페이스북 벤치마킹 좀 하지. 국내시장만 노려서 그런가? 배짱 개발이 많은듯도...

카카오톡 공유는 참고.

T 5.1.Button

버튼을 만들어 볼까나?

<button onclick="k.popUpKakao()">Kakao</button>

<script>
k.kakao_js_id='kakao-jssdk';
if (!document.getElementById(k.kakao_js_id)) {
	let kakao_js=document.createElement('script');
	kakao_js.src='https://developers.kakao.com/sdk/js/kakao.js';
	kakao_js.id=k.kakao_js_id;
	(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(kakao_js);
}
k.kakaoInitDo=function () {
	if (typeof Kakao!=='undefined') {
		clearInterval(k.kakaoInit);
		if (!Kakao.isInitialized()) {
			Kakao.init('c85c800b54a2a95faa5ca7a5e3d357ef');
		}
	}
};
k.kakaoInit=setInterval(k.kakaoInitDo, 2000);

k.popUpKakao=function () {
	let $desc=$("meta[name='description']");
	let href=window.location.href;
	Kakao.Share.sendDefault({
		objectType: 'feed',
		content: {
			title: $("title").eq(0).text(),
			description: $desc?$desc[0].content:'',
			imageUrl: '', // No image.
			link: {
				mobileWebUrl: href,
				webUrl: href,
			},
		},
	});
};
</script>

Fig. (5-1): 카카오톡 공유하기.

▲ Hide

T 6.Instagram (인스타그램) DM (Direct Message) 혹은 Posting 하기.

▼ Show/Hide

인스타그램 DM 은 보내는 사람을 명시해야 해서 써먹기 힘들것 같고, Posting 하는 법도 그냥 clipboard 에 복사해준 뒤 인스타그램 열어주는 정도인듯. 이건 그냥 패스 합시다.

▲ Hide

T 7.WhatsApp (왓츠앱)

▼ Show/Hide

참고 .

그냥 링크 걸어주면 되는듯? https://wa.me/?text=I'm inquiring about the apartment listing 와 같은 링크.

실제 url 은 encodeURIComponent 함수를 써서 https://wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing 와 같음.

T 7.1.Button

버튼을 만들어 볼까나?

<button onclick="k.popUpWhatsapp()">WhatsApp</button>

<script>
k.popUpWhatsapp=function () {
	window.open("https://wa.me/"
			+"?text="+encodeURIComponent(window.location.href)
			+"%20"+encodeURIComponent( $("title").eq(0).text() ) // Title in this html document
		// , "_blank"
		// , 'width=600,height=400,resizable=yes,scrollbars=yes'
	);
};
</script>

▲ Hide

T 8.한꺼번에 처리하기 (All codes in one function)

▼ Show/Hide

On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).

<style>
.block-touch {
	display:flex;
	position:fixed;
	z-index:30000;
	inset:0;
	background-color:rgba(0, 0, 0, .5);
}

.block-touch>div {
	display:inline-block;
	margin:auto;
	border:5px solid wheat;
	width:30em;
	maxWidth:100%
}

.block-touch>div>div {
	padding:.5em 1em;
	width:100%;
	background-color:black;
	color:white
}

.block-touch>div>textarea {
	padding:.5em 1em;
	width:100%;
	height:20em;
	background-color:white;
	color:black
}

.exit {
	z-index:31000;
	position:absolute;
	display:inline-block;
	top:0;
	right:0;
	width:3em;
	height:3em;
	line-height:1.0;
	text-align:center;
	cursor:pointer;
	border:2px rgb(80, 80, 80) solid;
	background-color:rgb(30, 30, 30);
	color:white
}

.exit>svg {
	width:100%;
	height:100%;
	font-size:3em;
	line-height:1.0
}

.block-touch-exit {
	zIndex:31000;
	position:fixed
}

.block-touch-exit g {
	stroke:white;
	stroke-width:23%
}
</style>

<script>
(function (k, $) {
////////////////////////////////////////////////////
// Escape and Unescape HTML string.
////////////////////////////////////////////////////
k.escapeOnlyTag = function (str) {
	if (!str || typeof str !== "string") { str = String(str); }
	return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
};
k.unescapeHTML=function (str) {
	if (!str || typeof str !== "string") { str = String(str); }
	return str.replace(/&gt;/g,'>').replace(/&lt;/g,'<').replace(/&amp;/g,'&');
};



// Share a link through SNS
k.shareSNS = async function (service) {
	const title = k.$title.html();
	const uri = window.location.href;
	const decodedURI = k.escapeOnlyTag(decodeURIComponent(uri));
	let open = "";
	switch (service) {
		case 'link':
			let written = `${title}\n${uri}${uri !== decodedURI ? `\n${decodedURI}` : ``}`;
			navigator.clipboard.writeText(written).then(function () {
					k.$textarea_copied[0].value = written;
					$('#notify-copied, #notify-copied-exit').show();
				}
				, function (err) {
					k.$textarea_copied[0].value = `Could not copy text: ${err}`;
					$('#notify-copied, #notify-copied-exit').show();
				});
			return false;
		case 'tag':
			let written1 = `${title}:<br/>\n<a target="_blank" href="${uri}">${decodedURI}</a>`;
			navigator.clipboard.writeText(written1).then(function () {
					k.$textarea_copied[0].value = written1;
					$('#notify-copied, #notify-copied-exit').show();
				}
				, function (err) {
					k.$textarea_copied[0].value = `Could not copy text: ${err}`;
					$('#notify-copied, #notify-copied-exit').show();
				});
			return false;
		case 'X':
			open = "https://X.com/intent/tweet?via=kipacti&text=" + encodeURIComponent(title) + "&url=" + encodeURIComponent(uri);
			break;
		case 'facebook':
			open = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(uri);
			break;
		case 'recoeve':
			open = `https://recoeve.net/reco?uri=${encodeURIComponent(uri)}&title=${encodeURIComponent(title)}${k.recoCats ? `&cats=${encodeURIComponent(k.recoCats)}` : ""}`;
			break;
		case 'kakao':
			k.popUpKakao();
			return;
		case 'Whatsapp':
			open = `https://wa.me/?text=${encodeURIComponent(title)}%0A${encodeURIComponent(uri)}`;
			break;
		default:
			return;
	}
	window.open(open);
};
})(window.k || {}, jQuery);
</script>

T 8.1.Icon 사용한 onclick 구현.

중간에 space 가 들어가지 않도록 img tag 들을 다닥다닥 붙여야만 함.

<div class="SNS-top"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/link.png" onclick="return k.shareSNS('link')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Tag.png" onclick="return k.shareSNS('tag')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Recoeve.png" onclick="k.shareSNS('recoeve')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-X.png" onclick="k.shareSNS('X')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Facebook.png" onclick="k.shareSNS('facebook')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Kakao.png" onclick="k.shareSNS('kakao')"><img class="SNS-img" src="https://tistory1.daumcdn.net/tistory/1468360/skin/images/icon-Whatsapp.png" onclick="k.shareSNS('Whatsapp')"></div>

<style>
.SNS-img {
	display:inline-block;
	vertical-align:middle;
	position:relative;
	box-sizing:border-box;
	margin:0;
	width:36px;
	height:36px;
	background-color:white;
	border:2px gray solid;
	border-left:0;
	cursor:pointer
}

.SNS-img:first-child {
	border-left:2px gray solid
}
</style>

▲ Hide

T Refs.References and Related Articles

▼ Show/Hide

Ref. [01] dev.Epiloum.net - SNS 내보내기(공유하기) 기능 구현하기, 2014-03-01
Ref. [02] kipid's blog - Encode/Unescape and Decode/Escape URI Component
Ref. [03] support.X.com - Adding the Tweet button to your website and https://X.com/intent/tweet
Ref. [04] developers.facebook.com - Social Plugins - Share Button and https://www.facebook.com/sharer/sharer.php
Ref. [05] MDN - Window.open; and w3schools.com - Window open() method
Ref. [06] Developers.kakao - 카카오톡 공유: JavaScript
Ref. [07] songsong.dev - 카카오 링크 API로 카카오톡 공유하기, 2022-02-11
Ref. [08] StackOverflow - How do I copy to the clipboard in JavaScript?, asked by Santiago Corredoira, answered by Dean Taylor, 2015-06-12
Ref. [09] w3c.github.io - Clipboard APIs - #Override copy
Ref. [10] faq.whatsapp.com :: How to use click to chat

▲ Hide

저작자표시 비영리 변경금지

'[IT/Programming] > HTML related' 카테고리의 다른 글

프론트엔드 관점에서의 SOLID 원칙 (0)	2025.03.27
React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링 (0)	2025.02.10
코드잇 풀스택 2기 초급 프로젝트 (1팀): View My Startup (2)	2024.09.30
CSP (Content Security Policy) : iframe, image (img), video blocking (0)	2024.09.23
페이스북 퍼오기 (Embeding facebook post) (4)	2024.09.23
Learning JavaScript, especially class-like Constructor function and Property Inheritance through prototype/__proto__ chaining (3)	2024.09.23
유튜브 리스트 (Youtube list) 로 퍼오는 법 (8)	2024.09.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

SNS 내보내기/공유하기 (Sharing a URI link through SNS)

SNS 로 URI 링크 내보내기/공유하기 (Sharing a URI link through SNS)

Table of Contents

T1.Recoeve.net (레코이브)

T1.1.Button

T2.Copy to clipboard

T2.1.Button

T3.X (트위터)

T3.1.Button

T3.2.Logo

T4.Facebook (페이스북)

T4.1.Meta informations

T4.2.Button

T5.카카오톡 (Kakao talk)

T5.1.Button

T6.Instagram (인스타그램) DM (Direct Message) 혹은 Posting 하기.

T7.WhatsApp (왓츠앱)

T7.1.Button

T8.한꺼번에 처리하기 (All codes in one function)

T8.1.Icon 사용한 onclick 구현.

'[IT/Programming] > HTML related' 카테고리의 다른 글

'[IT/Programming]/HTML related' Related Articles

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

T 1.Recoeve.net (레코이브)

T 1.1.Button

T 2.Copy to clipboard

T 2.1.Button

T 3.X (트위터)

T 3.1.Button

T 3.2.Logo

T 4.Facebook (페이스북)

T 4.1.Meta informations

T 4.2.Button

T 5.카카오톡 (Kakao talk)

T 5.1.Button

T 6.Instagram (인스타그램) DM (Direct Message) 혹은 Posting 하기.

T 7.WhatsApp (왓츠앱)

T 7.1.Button

T 8.한꺼번에 처리하기 (All codes in one function)

T 8.1.Icon 사용한 onclick 구현.