사이트의 공유 버튼을 단계별로 만드는 방법

소셜 공유 버튼은 모든 웹사이트에서 없어서는 안될 요소입니다. 개인 블로그든 비즈니스 블로그든, 온라인 포트폴리오든, 전자 상거래 프로젝트든 소셜 버튼을 사용하면 고객이 Facebook, Twitter, Instagram 또는 Pinterest에서 귀하의 콘텐츠에 대해 쉽게 알릴 수 있습니다. 손쉬운 소셜 공유 버튼을 웹 리소스에 구현하는 동안 도달 범위를 크게 확장하고 가치 있는 콘텐츠나 상품을 찾아 사이트에 오는 새로운 고객을 환영할 수 있습니다. 오늘날 소셜 미디어 네트워크의 힘을 과소평가해서는 안 됩니다. Facebook이나 Instagram에서 비즈니스를 찾을 수 없으면 대상 고객에게 다가가고 더 많은 사람들에게 상품과 서비스를 마케팅할 수 있는 기회를 놓치게 됩니다. 이름에서 알 수 있듯이 소셜 공유 버튼을 사용하면 웹에서 콘텐츠를 더 쉽게 공유할 수 있습니다. 현대 사용자가 Facebook 페이지에서 선호하는 제품에 대한 링크를 공유하는 것은 일반적인 관행입니다. 모든 소셜 게시물은 고객과 동일한 관심사와 선호도를 가진 팔로워가 접근할 수 있습니다.

또한 소셜 미디어 버튼을 사용하여 소셜 미디어 그룹이나 선택한 개인에게 콘텐츠를 쉽게 브로드캐스트할 수 있습니다. 소셜 미디어 공유 수는 사람들이 더 가치 있고 매력적이라고 ​​생각하는 콘텐츠를 나타냅니다. 따라서 많은 브랜드가 소셜 미디어 공유를 늘리고 브랜드 인지도를 높이기 위해 열심히 노력하고 있습니다.

몇 번의 클릭만으로 선호하는 콘텐츠에 대한 소문을 쉽게 퍼뜨릴 수 있습니다. 소셜 버튼을 사용하면 고객이 웹사이트에 머무는 동안 링크를 브로드캐스트할 수 있습니다. 대부분의 경우 공유 버튼을 누르고 링크를 표시할 소셜 미디어 플랫폼을 선택하기만 하면 됩니다.

공유 버튼을 단계별로 만드는 방법

인터넷은 다양한 공유 버튼으로 가득 차 있으며 주요 작업은 올바른 버튼을 선택하는 것입니다. 때로는 자신의 블로그에 어떤 소셜 버튼이 필요한지조차 이해하지 못할 때가 있습니다. 때때로 귀하의 요구에 맞는 디자인의 버튼을 찾을 수 없습니다. 때로는 블로그에서 공유 버튼을 구현하는 간단하고 멋진 방법을 찾을 수 없습니다. 당황하지 말 것! 이 기사에서는 몇 가지 기본 및 소셜 공유 버튼을 만드는 방법을 보여줍니다.

웹 디자인 코스

• 가정 학습을 위한 온라인 코딩 수업
• 완전한 Photoshop 마스터리 번들

거대하고 복잡한 코드와 복잡한 세부 사항 사용자 정의를 처리하고 싶지 않다면 이 튜토리얼이 딱 맞습니다. HTML 초보자도 쉽게 따라할 수 있습니다. 자, 안전벨트를 매고 출발하세요!

1 단계

가장 먼저 해야 할 일은 HTML 파일을 열고 아래 코드를 붙여넣는 것입니다.

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
또는
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

2 단계

이제 이러한 정보가 포함된 js 파일을 만듭니다.

그게 다야 :) 공유 페이지에 직접 배치된 공유 버튼을 클릭한 통계를 추적하는 매우 간단한 방법입니다. 이 문제는 데이터베이스의 테이블과 간단한 ajax를 사용하여 해결되었습니다.

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

이 스크립트는 URL에서 ID를 가져오고 테이블에 레이블을 추가하거나 특정 소셜 네트워크에 대해 카운터를 하나씩 증가시킵니다. 공유 버튼에 대한 간단한 솔루션입니다. CSS를 통해 버튼의 모양을 쉽게 변경할 수 있으며 Photoshop에서 자신만의 버튼을 디자인하고 여기에서 사용할 수 있습니다. 거의 모든 것을 할 수 있습니다!

물론 이 예제는 약간 원시적이지만 나만의 멋진 공유 버튼을 만들기 시작하는 것도 멋진 포인트입니다. 해봐!

인기 있는 소셜 미디어 네트워크를 사용하면 사람들이 선호하는 콘텐츠를 방송할 수 있도록 웹사이트의 게시물이나 페이지에 포함할 수 있는 맞춤형 코드를 생성할 수 있습니다. Facebook과 Twitter는 각각의 기능을 지원하는 가장 인기 있는 소셜 네트워크입니다. 이러한 소셜 버튼을 사이트에 통합하는 방법을 살펴보겠습니다.

Facebook 공유 버튼을 추가하는 방법

Facebook 공유 버튼을 사용하면 고객이 맞춤형 텍스트로 웹사이트의 게시물이나 거래로 연결되는 링크를 공유할 수 있습니다.

이 버튼을 웹사이트에 추가하려면 먼저 이 페이지로 이동해야 합니다.

이제 설정 페이지의 일부 필드가 의미하는 바를 살펴보겠습니다.

• 좋아요 URL - 이 필드는 Facebook에서 공유하려는 사이트의 페이지를 추가합니다.
• 너비 - 여기에서 버튼의 너비를 설정합니다.
• 표시할 동사 - 여기에서 "좋아요" 또는 "추천합니다" 버튼에서 텍스트를 선택할 수 있습니다.
• 색 구성표 - 여기에서 밝거나 어두운 사이트에 대한 버튼 디자인을 선택할 수 있습니다.
• 글꼴 - 버튼 레이블의 글꼴을 선택합니다.

설정을 선택한 후 "코드 가져오기" 버튼을 찾아 클릭합니다. 다음으로 코드가 있는 창이 표시되며 두 단계로 삽입해야 합니다.

< body > 태그 바로 뒤에 코드를 삽입하세요.

버튼을 표시하기 위한 코드:

Facebook의 버튼이 표시되어야 하는 위치에 다음 코드를 붙여넣습니다.

트위터 공유 버튼을 추가하는 방법

웹사이트에 Twitter 공유 버튼을 추가할 때 Twitter 개발자가 염두에 두도록 권장하는 몇 가지 사항이 있습니다.

• 사용자가 자신의 트위터 계정에 로그인하지 않은 경우 메시지를 트위닝하기 위해 로그인하라는 메시지가 표시됩니다.
• 트윗은 사람이 방문한 웹페이지로 연결됩니다. 사용자는 트윗의 메시지를 원하는 대로 자유롭게 조정할 수 있습니다.
• "트윗"을 클릭하면 팝업 상자에 Twitter의 관련 계정 목록이 표시됩니다. 사용자는 팔로우하거나 무시할 위치를 결정할 수 있습니다.
• 1일 1회 횟수에는 제한이 없으며 동일한 사용자가 타임라인에 트윗할 수 있습니다.

Twitter 공유 버튼을 추가하려면 다음을 수행하십시오.

• publish.twitter.com으로 이동하여 Twitter 버튼을 탭합니다.
• 사이트에 추가할 Twitter 공유 버튼 유형을 선택합니다.
• 언급하고 싶은 @계정을 언급하면서 포함할 트윗과 메시지를 조정하세요.
• 완료되면 코드를 복사하여 사이트에 붙여넣습니다.

그 정도야. 이 가이드가 도움이 되기를 바랍니다. 가장 좋은 점은 웹사이트에 소셜 공유 버튼을 추가할 깊은 코딩 기술이 없어야 한다는 것입니다. 자동화된 코드 생성기는 직관적으로 조정하고 웹사이트의 HTML에 복사하여 붙여넣을 수 있는 즉시 사용 가능한 솔루션을 제공합니다.