공유하기 위해 4개 더 추가하세요. 소셜 공유 버튼 – 저희가 직접 작성합니다.

여기 "프로모션에서 8% 할인된 가격으로 소프트웨어를 구매하고 싶은 사람이 누구입니까?"라는 문구가 있습니다. 사용자가 직접 작성했으며 아래는 소셜 네트워크에서 사이트 링크가 어떻게 보이는지 보여줍니다. 별로 아름답지 않죠?


그러면 소셜 네트워크의 링크는 다음과 같습니다.

여기서 "오늘은 allsoft.ru의 생일입니다 - 8년입니다 :)"는 사용자가 작성한 텍스트이고 나머지는 메타 태그의 정보입니다. Facebook 페이지developers.facebook.com/docs/share에서 이러한 메타 태그에 대한 자세한 내용을 읽을 수 있으며, 다른 소셜 네트워크에서도 이를 잘 이해하고 있습니다.

이 메커니즘은 일반적으로 어떻게 작동합니까?
1. 사용자가 버튼을 클릭하면 위젯은 페이지 링크를 소셜 네트워크 서버로 전송합니다.
2. 소셜 서버 네트워크 자체가 이 링크에 액세스하여 제목, 설명, 사진 등 페이지에 대한 정보를 읽습니다.
3. 소셜 서버 네트워크는 페이지 정보를 캐시하여 소셜 네트워크 페이지에 표시합니다.

한 페이지에 다른 설명을 보내는 방법.
예를 들어, 만화 테스트를 통해 allsoft.ru에 프로모션 페이지를 만들 때 테스트에서 사용자가 획득한 다양한 점수에 대해 소셜 네트워크에 다양한 설명을 보내야 했습니다. 소셜 네트워크는 링크를 클릭하여 페이지에 대한 설명을 받기 때문에 설명마다 다른 링크가 필요합니다. 또한 트위터에서는 140자만 허용하므로 별도의 짧은 설명이 필요합니다.

New Ya.share(( 요소: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] ), link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( title: "테스트 결과: Dragon은 거의 당신의 장점입니다! 아직 Dragonology를 가르칠 수는 없지만, 올바른 길로!" ) ) ));
1. 여기에서 ya_share_normal은 소셜 버튼이 있는 블록이 표시되는 페이지 요소의 ID이고, 링크는 링크이며, Twitter의 serviceSpecific에서는 제목을 표시합니다. 이는 og에 있는 것과 다릅니다. 제목 메타 태그.

따라서 "3가지 다른 테스트 결과와 테스트 외부 페이지에 대한 공통 링크" 작업에 대해 4개의 태그가 있습니다.

위와 같은 JavaScript 코드 4개 블록이 있습니다.

소셜 네트워크에 캐시된 제목과 설명을 변경하는 방법.
1. Facebook을 위한 가장 좋은 방법이 있습니다. 디버거로 이동하세요.

안녕하세요, 블로그 사이트 독자 여러분. 제목에서 이미 짐작하셨겠지만, 성공적인 상황과 기사 자체의 높은 품질 하에서 사이트의 기사를 유치하는 데 매우 도움이 될 수 있는 소위 소셜 버튼에 대해 이야기하겠습니다. 소셜 네트워크 및 서비스 방문자.

사이트 순위를 매길 때 검색 엔진에서는 소셜 신호도 고려합니다. Twitter, Google+, Facebook(VKontakte 및 기타 네트워크도 고려할 수 있음)의 고품질 계정에 대한 많은 공유를 통해 특정 단계를 더 높일 수 있으며 아마도 상위 및 행동 요인이 당신을 실망시키지 않는다면 거기에 머물십시오.

일반적으로 인터넷의 소셜 네트워크에서 콘텐츠를 공유하기 위한 스크립트(버튼)를 제공하는 서비스가 많이 있지만 모든 서비스를 신뢰할 수는 없습니다(그들은 쉽게 사용자를 이용하거나 나쁜 이유로 다른 방식으로 사용할 수 있음). 그리고 코드가 제대로 배치되지 않았고 서버의 컴퓨팅 기능이 그다지 강력하지 않은 경우 단순히 "사이트를 중단"할 수도 있습니다. 이러한 단점이 없는 괜찮은 옵션이 있지만 이 출판물의 마지막 부분에 해당 옵션을 나열했습니다.

특정 소셜 네트워크에 대한 공유 수를 버튼에 표시하는 것도 가능합니다. 또한 이 블록을 사용하여 작성된 게시물뿐만 아니라 모든 게시물이 고려됩니다(데이터는 API를 통해 로드됨). 사실, 모든 소셜 네트워크(Facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte만)가 지원되는 것은 아니지만 대부분의 주요 소셜 네트워크가 지원됩니다. Twitter가 최근 이 목록에서 삭제된 것은 슬픈 일입니다. API를 통해 이 데이터 제공을 중단했습니다.

예를 들어, 길이에 제한이 있기 때문에 Twitter에서 공유할 제목을 줄이고(아래 방법 참조), 공유 카운터 표시 여부를 구성하고, 추가 소셜 네트워크 버튼을 사용하여 메뉴 확장 방향을 설정할 수 있습니다. , 그리고 훨씬 더. 일반적으로 주변을 파고 살펴보십시오.

일반적으로 사이트에 소셜 네트워크를 설치하도록 제안하는 기본 공유 버튼과 비교할 때(아래 내용 참조) Yandex 블록은 로딩 속도, 소형화, 설치 및 구성 용이성 측면에서 유리합니다. 예를 들어, 과거에는 서버 문제로 인해 내 공식 트위터 버튼이 로드되지 않는 경우가 많았기 때문에 Java 스크립트로 작성된 내 블로그의 왼쪽 메뉴가 오랫동안 로드되지 않았습니다. 이제 이 문제가 해결되었을 가능성이 있지만 사이트 로딩 속도 최적화 측면에서 많은 스크립트는 항상 하나보다 나쁩니다.

Yandex는 이미지에 매우 민감한 수익성이 좋은 상업 조직이기 때문에 접근성에 문제가 없을 것 같습니다. 또한, 해당 버튼에 대한 클릭 통계를 추적할 수 있어 유용할 수 있습니다.

일반 크기의 아이콘이 있는 블록 외에도 카운터가 있는 블록을 만들 수 있으며 Yandex는 추가 소셜 네트워크가 있는 드롭다운 메뉴를 추가할 것을 제안합니다. 이 메뉴는 필요한 버튼 수를 표시한 후 스포일러 아래에 숨겨집니다. 주요 소셜 네트워크(예: VKontakte, MoiMir 등):

드롭다운 메뉴를 사용하여 이 블록의 버튼에 카운터를 추가하려면 사이트의 코드(Div 태그 사이)에 data-counter="“라는 속성을 하나 더 추가하면 됩니다. 내가 말했듯이, 이보다 더 간단할 수는 없습니다. 아래에 설명된 작은 버튼에 카운터를 추가할 수도 있습니다.

Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"

모든 아이콘을 더 작은 버튼 축소판으로 바꿀 수도 있습니다. 개인적으로 이 블로그의 모든 기사 상단에 블록을 삽입할 때 유용하다고 생각했습니다.

첫 번째 부분에서 열기 및 닫기 SCRIPT 태그에는 Yandex 서버에서 로드될 스크립트 경로가 포함되어 있고, 두 번째 부분에는 삽입 코드 자체가 포함되어 있습니다. 이 코드는 템플릿에서 다음 위치에 배치되어야 합니다. 이 블록이 표시됩니다.

웹사이트에 Yandex의 소셜 버튼을 삽입하는 방법

따라서 소셜 미디어 버튼이 표시되어야 하는 위치에 Div 블록과 함께 스크립트 호출 코드를 삽입합니다. 글쎄, 로딩이 메인 페이지의 로딩 속도에 영향을 미치지 않도록 Yandex 문서에 제공된 조언에 따라 async="async" 속성을 추가하여 스크립트의 비동기 로딩을 시작했습니다.

사이트 엔진의 많은 파일 중에서 닫는 태그 /BODY가 있는 Html 코드의 맨 아래 부분을 생성하는 파일이나 헤드를 형성하는 파일을 찾는 데 문제가 발생할 수 있습니다. 또한 Div 태그에 코드 조각을 삽입해야 하는(버튼 자체를 배치하기 위해) 테마 파일의 위치를 ​​찾으세요.

원칙적으로 WordPress와 Joomla 모두에서 이는 사용된 테마 파일 중 하나에서 수행됩니다. 왜냐하면 이 블로그는 WordPress에서 운영되므로 이에 대해 말씀드리겠습니다.

WordPress로 작업하는 경우 스크립트 호출 코드를 삽입하려면 편집을 위해 footer.php 파일을 열어야 합니다(폴더에서 닫는 Body 태그 또는 header.php(여기에서 Head 태그를 찾을 수 있음)를 찾을 수 있음).

/wp-content/themes/폴더 이름_with_theme_used/footer.php

이제 남은 것은 사이트 페이지의 버튼이 있는 블록의 위치를 ​​담당하는 Yandex 소셜 버튼 코드의 두 번째 부분을 웹 사이트 템플릿의 올바른 위치에 삽입하거나 기사에 직접 삽입하는 것입니다.

그건 그렇고, 다시 한 번 예약하겠습니다. 이 블록에서 버튼을 제거하려면 Yandex 웹 사이트의 생성자로 다시 이동할 필요가 없습니다. 이 목록에서 해당 항목을 간단히 제거할 수 있습니다(예: "vkontakte"와 같이 그 뒤에 오는 쉼표도 함께). 글쎄요, 이해하시겠죠...

CSS를 사용하여 블록 내부의 버튼 위치를 변경할 수도 있습니다.

Li.ya-share2__item (배경:없음!중요;패딩:0 7px 0 7px!중요;)

왜냐하면 나는 모바일 장치에 적합한 레이아웃을 사용하므로 화면 해상도가 낮은 장치의 경우 비슷한 줄을 추가하여 약간 더 작은 들여쓰기를 설정했지만 세부 사항은 다음과 같습니다.

Li.ya-share2__item (패딩:0 3px 0 3px!important;)

일반적으로 내 WordPress 블로그의 경우 이와 같습니다. Joomla에서 이 블록을 삽입하려면 사용자 정의 Html 코드 모듈을 사용하여 기사 텍스트 바로 아래의 템플릿 위치에 배치하는 것이 가장 쉬울 것입니다.

공식 소셜 미디어 버튼

많은 소셜 네트워크는 모든 사람에게 버튼 코드를 다운로드할 수 있는 기회를 제공하며, 버튼 코드의 모양과 기능을 사용자 정의할 수도 있습니다. 예를 들어 에서 게시물을 공유하기 위한 스크립트 코드를 구성하고 받을 수 있습니다.

보시다시피 설정이 상당히 많으며 VKontakte 버튼 모양 외에도 공유 수를 표시하는 카운터 표시를 구성할 수도 있습니다.

페이스북 버튼을 받으실 수 있습니다. 이는 귀하의 필요에 맞게 매우 유연하게 맞춤화되었으며, 웹사이트에 코드를 배치하면 비문이 자동으로 러시아어로 번역되기 때문에 영어 비문에 혼동하지 마십시오.

URL 필드에 아무 것도 삽입하지 않는 것이 좋습니다. 그러면 이 코드가 있는 페이지가 공유됩니다.

다음과 같이 보일 것입니다:

다음과 같이 보일 것입니다:

그리고 물론 비교적 최근에 등장한 공식 트위터 버튼도 언급하지 않을 수 없다. 해당 생성자가 있습니다. 당연히 리트윗 수를 계산하는 기능을 제공하며 모양을 설정할 수도 있습니다.

그런 다음 위에서 설명한 원칙에 따라 결과 코드를 약간 현대화하여 긴 제목이 잘리고 공유할 때 사용자에게 추가 문제가 발생하지 않도록 했습니다.

웹사이트에 소셜 미디어 버튼을 가져오기 위한 기타 옵션

이미 말했듯이 소셜 네트워크 버튼용 스크립트를 무료로 가져와 웹사이트에 올릴 수 있는 다양한 온라인 서비스가 있습니다. 그들은 모두 서로 다른 목표를 추구합니다: "마음으로부터"(Dimoxa 서비스의 경우처럼), 다른 서비스 운영에 필요한 데이터를 수집하기 위해(ApTuLike의 경우처럼), 이익을 위해(바이러스 및 기타 불법 사기를 목적으로) 귀하의 사이트에 발생한 트래픽). 예를 들어 아래에 언급된 플러그인과 같은 단순한 유료 솔루션도 있습니다.

이 다양성 중에서 무엇을 선택해야할지 말하기는 어렵습니다. 제가 직접 시도해 볼 기회가 있었던 것과 이전에 이미 쓴 내용에 대해 몇 마디 말씀드리겠습니다.

일반적으로 직접 보고 비교하고 선택하십시오.

행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.

당신은 관심이 있을 수도 있습니다

소셜 네트워크에 추가하기 위한 버튼과 WordPress 블로그에 대한 북마크를 만듭니다(플러그인 및 스크립트 없음) 가능성 있음 - 사이트의 독립형 소셜 버튼
Uptolike의 모바일 사이트용 버튼 + 메신저에서 링크를 공유하는 기능 UpToLike - 확장된 기능을 갖춘 사이트용 소셜 버튼 빌더
Uptolike Share Buttons - WordPress에 소셜 미디어 버튼을 추가하기 위한 무료 플러그인
uSocial - 귀하의 웹사이트를 위한 새로운 소셜 버튼 서비스 검토
SMO 방법(포럼, 소셜 네트워크, 구독 그룹)을 사용하여 웹 사이트 방문자의 트래픽 유도 소셜 네트워크의 페이지나 그룹 및 RSS 피드로 연결되는 버튼이 있는 블록을 웹 사이트에 추가하는 방법
Google+1 및 Vkontakte 및 Facebook의 좋아요 - 웹사이트에 좋아요 버튼을 추가하는 방법

스토리의 링크는 꽤 오래 전부터 나타나기 시작했지만 공식 계정에서만 사용할 수 있었습니다. 5월에는 기록에 게재된 광고에 링크를 추가하는 것이 가능해졌지만 이는 모두 유료 메커니즘이었습니다. 오늘 사람들은 인스타그램이 일반 사용자가 스토리에 웹사이트에 대한 활성 링크를 추가하는 것을 점차 허용하기 시작한 방법에 대한 스크린샷을 보내기 시작했습니다.

Instagram 스토리에 링크를 추가하는 방법은 무엇입니까?

이 기능은 모든 Instagram 계정에서 사용할 수 있는 것은 아닙니다! 현재 스토리의 링크는 다음에서만 사용할 수 있습니다.

  • 인증된 Instagram 계정의 경우
  • 구독자 수가 10,000명이 넘는 프로필의 경우.

    • 또한 구독자가 10,000명이 된 직후에는 링크가 나타나지 않을 수도 있습니다. 봇을 구독자 수 10,000명까지 늘리는 것이 항상 작동하는 것은 아닙니다. 게다가 봇이 오늘 구독을 취소하지 않도록 속이는 것도 어렵고, 계정 구독자가 9,999명 이하로 떨어지면 링크 첨부 기능도 사라지게 됩니다.

    기록의 활성 링크를 따라가려면 사용자가 "위로 스와이프"해야 합니다. 사람들은 아직 이러한 기회에 익숙하지 않기 때문에 다양한 링크와 클릭 유도 문구가 있는 링크에 추가적으로 주의를 기울이는 것이 좋습니다. 글쎄요, 여러분은 어른이고 제가 말하는 내용을 이해하고 어쨌든 여기서 누구를 가르치고 있습니까?

    Direct에 활성 링크가 나타나는 것에 대해 이미 글을 썼지만 블로그에는 해당 정보를 게시하지 않았습니다. 다른 업데이트와 마찬가지로 이 업데이트도 일부 사용자에게만 제공됩니다.

    최신 업데이트로 인해 Instagram은 전자상거래 및 중소기업에게 더욱 흥미로워졌으며 구독자를 위한 경쟁은 더욱 뜨거워질 것입니다. Instagram이 Direct에서 링크 스팸에 적극적으로 대처하기를 바랍니다.

    코딩에 대해 자세히 알아보기 전에 글로벌 웹이 이미 우리에게 제공하고 있는 리소스를 살펴보고 주목해 봅시다. 그건 그렇고, 그것들이 많이 있지만 가장 인기있는 두 가지를 고려해 보겠습니다.

    우리의 관심을 끌 만한 또 다른 서비스는 동일한 간단한 생성자입니다. 서비스와 네트워크가 포함된 버튼이 더 많이 있으며 그중 일부는 처음으로 본 것입니다. Yandex.Technologies와의 주요 차이점은 클라우드가 아닌 서버에서 직접 처리되는 완전히 생성된 스크립트를 받는다는 것입니다.


    이렇게 훌륭한 솔루션을 사용하면 아무도 "바퀴를 재발명"할 생각조차 하지 않을 것 같나요? 하지만 아닙니다. 누군가가 작성한 대본은 우리가 직접 작성하기에는 너무 게으른 만큼만 좋습니다. 물론 제대로 작동하고 기능을 수행하지만 이는 일반 사이트를 위해 작성된 보편적인 솔루션입니다. 그것은 우리의 개인적인 작은 필요와 관습을 고려하지 않습니다.

    첫째, 버튼 디자인은 거의 철제입니다. 예, 소셜 네트워크 자체에서 알아볼 수 있고 제공되지만 우리의 요구 사항을 충족시키지 못합니다. 버튼의 가장자리는 둥글고 우리 사이트 디자인에서는 버튼이 사각형이어야 합니다. 어떻게 해야 할까요? – 스프라이트를 가져와서 다시 그려보세요! 시도해 본 사람이라면 이것이 감사할 일이 아니라는 것을 알고 있습니다. 하나의 버튼을 교체하려면 버튼을 스프라이트에 "올바르게" 배치하기 위해 5~6번의 시도가 필요합니다. 그리고 이것은 하나/여러 개의 버튼만 교체하는 것인데, 사이트가 고딕 스타일이고 모든 버튼을 어둡게 해야 한다면 어떻게 될까요?

    둘째: Yandex의 신뢰성에는 의심의 여지가 없지만 미터법 카운터와 달리 버튼은 어떤 이유로 로드하기 어렵고 종종 페이지의 기본 콘텐츠에서 눈에 띄는 지연이 발생합니다. 이는 페이지가 거의 즉시 충돌하고 버튼이 있는 블록이 여러 개 있는 경우 고속 연결이 좋은 경우 특히 두드러집니다.

    셋째: 테스트를 위해 share24에 스크립트를 생성합니다. 크기가 큽니다. 제공된 모든 코드 줄이 실제로 우리에게 필요한가요? - 생각하지 마세요.

    이제 스크립트 자체 작성으로 넘어가겠습니다. HTML, CSS, 그리고 실제로 JavaScript로 작성된 코드 자체의 세 부분으로 나누어집니다. 또한 편의상 jQuery 라이브러리를 사용하겠습니다.

    우리는 필요한 모든 파일을 포함합니다:

    이제 share.js 파일에 스크립트를 추가하면 다음과 같습니다.

    Var share = ( 트위터: function($this)( var data = share.data($this); if(data)( var url = "http://twitter.com/share?"; url += "text= " + encodeURIComponent(data.text); url += "&url=" + encodeURIComponent(data.url); url += "&hashtags=" + ""; url += "&counturl=" + encodeURIComponent(data.url); share.popup(url); return false; ), vk: function($this)( var data = share.data($this); if(data)( var url = "http://vkontakte.ru/ share. php?"; url += "url=" + encodeURIComponent(data.url); url += "&title=" + encodeURIComponent(data.title); url +="&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

    페이지에 마크업을 추가합니다.

    구조는 매우 간단합니다. 즉, 공유 클래스가 있는 래퍼와 위에서 언급한 data-share-data 속성이 있는 div가 뒤따릅니다. 이 선은 고유한 값을 가진 4개의 매개변수로 구성됩니다.

    • url – 우리가 공유하는 주소입니다.
    • img – 이미지가 필요하지 않은 경우 빈 줄을 지정합니다.
    • 제목 – 페이지 제목;
    • text - 필요한 설명입니다.

    div 내부에는 onclick 이벤트가 연결된 버튼 자체가 있습니다. 클릭하면 위에 설명된 메서드 중 하나가 호출됩니다.

    이제 남은 것은 버튼에 사람의 모습을 부여하고 CSS를 추가하는 것입니다.

    공유( 배경색: #ececec; 디스플레이: 인라인 블록; 패딩: 7px 5px; ) .share div:after( content: ""; 디스플레이: 블록; 지우기: 둘 다; 높이: 0; ) .share div:first -child( 여백 왼쪽: 0; ) .share .twitter, .share .vk, .share .facebook( 배경 이미지: url(share.png); 여백 왼쪽: 7px; 테두리 반경: 3px; 높이: 24px; 너비: 24px; 부동: 왼쪽; 커서: 포인터; .share .twitter( 배경색: #00aced; 배경 위치: 0 -61px; ) .share .vk( 배경색: #48729e; 배경- 위치: 0 -32px; ) .share .vk:hover( 배경색: #3a5b7e; ) .share .facebook( 배경색: #3c5a98; 배경 -위치: 0 0; ) .share .facebook:hover( 배경 -색상: #30487a;

    결과적으로 CSS 버튼을 추가하면 결과는 다음과 같습니다.

    이것으로 스크립트 작성이 완료되었습니다. 제가 세 개의 소셜 네트워크만 사용한 예에서는 다른 사람을 연결해야 하는 경우 어렵지 않을 것입니다. 이렇게 하려면 HTML과 CSS를 추가하는 것을 잊지 말고 공유 개체에 새 메서드를 추가해야 합니다. 소셜 네트워크에 다시 게시하기 위한 링크는 두 가지 방법으로 얻을 수 있습니다.

    • 항상 도움이 되지는 않는 소셜 네트워크 API를 사용하세요.
    • Firebug 또는 다른 웹 개발자 도구를 사용하여 유사한 서비스에서 선택하세요.

    저는 웹사이트 홍보에 있어서 SMO(소셜 미디어 최적화)의 중요성을 언급했습니다. 이제 웹사이트에서 소셜 최적화를 수행하는 방법, 더 정확하게는 인기 네트워크의 소셜 버튼을 웹사이트에 추가하는 방법에 대해 직접 이야기해 보겠습니다.

    먼저 사이트에서 실제로 어떻게 보이는지 보여드리겠습니다. 많은 블로그와 뉴스 사이트의 기사 하단에서 다음과 같은 내용을 볼 수 있습니다.

    이는 SMO가 달성된 소셜 버튼과 소셜 활동입니다. 이 기사에서는 이러한 소셜 네트워크에 대한 코드를 어디서 얻을 수 있는지에 대한 질문을 다루고 있습니다. 버튼과 이를 웹사이트에 올바르게 설치하는 방법을 알아보세요. 먼저 Google+ 설치를 고려해 보겠습니다.

    1. 사이트에 Google+ 버튼 추가

    2. VKontakte 및 Facebook의 "좋아요" 버튼을 사이트에 추가합니다. 2.1. 나는 FaceBook에서 그것을 좋아한다

    Facebook 버튼 코드를 가져오는 것부터 시작해 보겠습니다. 이렇게 하려면 https://developers.facebook.com/docs/plugins/like-button 페이지를 방문하세요. 다음 그림이 표시됩니다.

    오른쪽 상단에서 웹사이트에 버튼이 어떻게 표시되는지 확인할 수 있습니다. 설정할 수 있는 매개변수를 살펴보겠습니다.

    1. 좋아요를 누르고 싶은 URL
    이는 선택적 매개변수입니다. 필드를 비워 두면 각 페이지에 카운터와 같은 고유한 개별 항목이 표시됩니다. 거기에 특정 URL을 입력하면 카운터는 단일이 됩니다(이 사이트의 모든 페이지에서 좋아요가 합산됩니다).

    2. 보내기 버튼
    메시지 보내기 버튼을 추가하거나 제거합니다. 이 버튼을 제거하는 것이 좋습니다. 왜냐하면... 우리의 목표는 단순히 "좋아요" 버튼을 넣는 것입니다. 물론 여러분의 목표는 완전히 다를 수도 있습니다.

    3. 레이아웃 스타일
    버튼 표시 스타일. 개인적으로 스탠다드가 제일 맘에 드네요.

    4. 폭
    버튼의 너비(픽셀)입니다. 저는 보통 100픽셀 이하로 설정합니다.

    5. 표시할 동사
    버튼에 표시되는 내용: "좋아요" 또는 "추천합니다". 나는 보통 첫 번째 옵션(기본값)을 선택하는데, 그것이 사용자가 좋아하도록 동기를 부여하는 더 효과적인 방법이기 때문입니다.

    6.색 구성표
    색상 범위: 흰색 또는 검정색.

    7.폰트
    "I like"라는 문구의 글꼴을 설정하면 됩니다.

    설정을 완료한 후 "코드 받기" 버튼을 클릭하여 사이트에 배치하세요. Facebook의 공통 버튼 코드:

    (function(d, s, id) ( var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs) )(document, "script", "facebook-jssdk") ); 2.2. 나는 VKontakte에서 좋아한다

    이제 VKontakte에서 "좋아요" 버튼 코드를 얻는 방법을 살펴보겠습니다. 이렇게 하려면 다음 페이지로 이동하세요. https://vk.com/dev. 다음 페이지가 표시됩니다.

    먼저 새 사이트를 추가해야 합니다. 이렇게 하려면 "사이트/응용 프로그램" 드롭다운 메뉴에서 새 사이트를 연결하는 옵션을 선택하세요.

    새 사이트를 추가한 후 저장하세요. 이제 드롭다운 메뉴에서 원하는 사이트를 선택하세요. 그 다음에는 "버튼 옵션", "높이", "버튼 이름" 등 소수의 매개변수가 표시됩니다. 이 모든 항목은 취향에 맞게 사용자 정의할 수 있습니다. 마지막에는 버튼에 대한 코드가 있습니다.

    VK.init((apiId: 2872188, onlyWidgets: true )); VK.Widgets.Like ("vk_like", (유형: "버튼") ); 3. 사이트에 트윗 버튼 추가

    이전 사례와 마찬가지로 먼저 버튼을 받고 구성한 위치로 이동합니다.



     

    다음 내용을 읽어보면 도움이 될 수 있습니다.