모든 주요 소셜 네트워크에는 자체 공유 버튼이 있으므로 웹 사이트 방문자가 웹 사이트를 떠나지 않고도 페이지를 쉽게 공유 할 수 있습니다. 이것들은 귀하의 웹 사이트에 추가 된 것이므로 소셜 미디어 네트워크에서 페이지를 공유 할 수있는 능력이 없으면 블로그의 발전이 적어질 것입니다.
소셜 네트워크 공유 버튼의 한 가지 문제점은 웹 사이트에 많은 HTTP 요청을 표시하고 모든 외부 스타일, 이미지, 클릭 이벤트를 로드해야한다는 것입니다. 또한 현재 페이지의 수를 요청하려면 API를 호출해야합니다. 이러한 모든 요청은 시간이 걸리며 페이지 로딩 시간에 영향을 줄 수 있습니다.
링크를 사용하여 Twitter, Facebook, Google+, Linkedin 및 Pinterest를위한 자체 소셜 공유 버튼을 생성하여 페이지 속도를 높이는 방법에 대해 알아 보도록 하겠습니다.
소셜 공유 버튼을 얻을 수있는 곳
다음은 가장 인기있는 소셜 미디어 네트워크 모음을 얻을 수있는 곳입니다.
트위터를 사용하면 웹 사이트에 4 가지 유형의 버튼을 표시 할 수 있습니다.
- Follow
- Share button
- Hashtag
- Mention
트위터 리소스 영역에서 이러한 링크를 얻을 수 있습니다.
Twitter Publish
publish.twitter.com
Facebook에는 여러 개의 다른 버튼이 제공됩니다.
- Like button
- Send button
- Follow button
- Share button
이 버튼들은 Facebook 개발자 영역에서 얻을 수 있습니다.
Facebook - 로그인 또는 가입
메뉴를 열려면 alt + / 키 조합을 누르세요
ko-kr.facebook.com
Google+
Google+에는 페이지에 +1 버튼을 추가하여 현재 페이지를 공유하거나 Google+ 사용자 배지를 사용하여 사람들이 페이지에서 나를 서클로 이끌 수 있는 두 개의 버튼이 있습니다. Google 개발자 영역에서 Google+ 버튼을 얻을 수 있습니다.
로그인 - Google 계정
하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인
accounts.google.com
링크드 인에는 게시자 영역에서 얻을 수있는 자체 공유 페이지가 있습니다.
LinkedIn 로그인 또는 회원 가입
675m 명 회원들이 함께 하는 글로벌 비즈니스 세상 비즈니스 인맥을 쌓고 넓히세요. 커리어 계발에 유용한 정보와 기회의 문으로 들어오세요.
www.linkedin.com
Pinterest에는 현재 페이지에서 이미지를 고정할 수 있는 몇 가지 다른 위젯 고정 버튼이 있으며, 팔로우 버튼을 사용하면 사람들이 페이지에서 나를 팔로우 할 수 있으며 핀 위젯, 프로필 위젯 또는 보드 위젯도 있습니다.
Pinterest 위젯 빌더
Pinterest 위젯으로 사용자가 쉽게 콘텐츠를 핀하고, 팔로우하고, 사이트에서 Pinterest 콘텐츠를 보게 할 수 있습니다. 지금 위젯에 대해 자세히 알아보세요.
business.pinterest.com
Social Share Links
사이트에 추가하는 이 버튼들 각각은 많은 HTTP 요청을해야 하므로 페이지 로딩 시간이 느려집니다. 웹 사이트에 추가 할 때 5 개의 버튼을 모두 추가하면 페이지 로딩 시간이 훨씬 더 늘어납니다. 이러한 각 네트워크는 또한 내장된 버튼을 사용하여 페이지를 공유하는 대신 사용할 수있는 링크를 제공합니다. 이러한 링크는 일반적으로 자바 스크립트가 아닌 웹 사이트 버전에 사용됩니다.
Twitter 공유 URL을 사용하려면 URL https://twitter.com/intent/tweet로 링크를 작성해야합니다.이 링크를 사용하면 텍스트, URL 및 Tweet으로 언급을 변경하기 위해 여러 쿼리 문자열 매개 변수를 추가 할 수 있습니다.
<a target="_blank" href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE" class="btn-twitter">Tweet This</a>트위터로 링크 공유하기
twitter.com
Facebook 공유 링크를 사용하면 Facebook에서 공유 할 링크를 제공하기 위해 쿼리 문자열을 추가 할 수 있습니다.
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL" class="btn-facebook">Share on Facebook</a>
Facebook - 로그인 또는 가입
메뉴를 열려면 alt + / 키 조합을 누르세요
ko-kr.facebook.com
Google+
The Google+ URL also allows you to provide a querystring parameter which tells Google which URL to share.
<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL" class="btn-google">Plus on Google+</a>
로그인 - Google 계정
하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인
accounts.google.com
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL" class="btn-linkedin">Share on LinkedIn</a>
LinkedIn 로그인 또는 회원 가입
675m 명 회원들이 함께 하는 글로벌 비즈니스 세상 비즈니스 인맥을 쌓고 넓히세요. 커리어 계발에 유용한 정보와 기회의 문으로 들어오세요.
www.linkedin.com
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC" class="btn-pinterest">Pin on Pinterest</a>
요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.
www.pinterest.co.kr
Styling Social Buttons
소셜 네트워크 버튼에서 이 버튼의 스타일을 지정하려면 웹 사이트에서 사용할 올바른 색상을 얻을 수 있습니다.
'SW > HTML' 카테고리의 다른 글
| Java : 자바 정적 키워드 : 개념, 개요, 설명, 예제 (0) | 2023.02.27 |
|---|---|
| HTML : HTML5 Download Attribute : 방법, 구현, 예제 (0) | 2020.08.06 |
| HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현 (0) | 2020.08.04 |
| HTML : HTML5 Datalist 사용 방법 : 예제, 구현 (0) | 2020.08.02 |
| HTML : 웹 사이트에 Twitter 카드 추가 방법 : 예제, 구현 (0) | 2020.08.01 |