소셜 네트워크에 공유할 수 있는 서비스입니다. 공유 설정, 소셜 네트워크용 버튼 스타일 선택. 공식 소셜 미디어 버튼
여기에 "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을 위한 가장 좋은 방법이 있습니다. 디버거로 이동하세요.
왜냐면 거기에 쓰여진 내용을 다시 설명하지는 않을 테고, 글 내내 참고해야 할 것이기 때문입니다.
이제 JavaScript 자체부터 시작해 보겠습니다. 카운터에 관한 스크립트 작업은 두 부분으로 나뉩니다.
- 페이지가 로드될 때 소셜 네트워크의 각 버튼에 카운터를 추가해야 합니다.
- 버튼 클릭이 발생하면 공유 수를 변경합니다.
스크립트 로직의 첫 번째 부분을 구현하려면 init() 메서드를 추가해야 합니다.
초기화: function(element)( $(document).ready(function())( $(element).each(function(idx)( var countApiUrls = ( 트위터: "https://urls.api.twitter.com/ 1 /urls/count.json?callback=?&url=", vk: "https://vk.com/share.php?act=count&index=" + idx + "&url=", 페이스북: "https:// graph .facebook.com/?callback=?&ids=" ); var pageUrl = $.parseJSON($(element + " div:eq(0)").attr("data-share-data")).url; if (pageUrl)( share.getCountLikes($(element).find(".twitter"), countApiUrls.twitter, pageUrl, "twitter"); share.getCountLikes($(element).find(".vk"), countApiUrls .vk, pageUrl, "vk"); share.getCountLikes($(element).find(".facebook"), countApiUrls.facebook, "facebook") return false;
GetCountLikes: function(box, apiUrl, pageUrl, type)( if(apiUrl && pageUrl)( if(type == "twitter")( $.getJSON(apiUrl + pageUrl, function(data)( var num = data.count | | 0; if(num > 0)( share.setCountLikes(box, num); )); if(type == "vk")( $.getScript(apiUrl + pageUrl); if(!window.VK)( .VK = (); ); window.VK.Share = ( 개수: function(idx, count)( var num = count || 0; if(num > 0)( share.setCountLikes(box, num ); ) ) ; if(type == "facebook")( $.getJSON(apiUrl + pageUrl, function(data)( var num = data.shares || 0; if(num > 0)( share .setCountLikes(box, num);
getCountLikes() 메서드는 4개의 매개변수를 사용합니다.
- box – 각 소셜 네트워크 버튼에 대한 래퍼입니다.
- apiUrl – 호출이 이루어진 API 주소입니다.
- pageUrl – 데이터를 수신하려는 페이지의 주소입니다.
- 유형 - 소셜 네트워크의 유형입니다.
jQuery $.getJSON() 메서드를 사용하여 생성된 URL = apiUrl + pageUrl에 액세스합니다. 소셜 네트워크에 따라 응답(주로 json)을 받아 처리합니다. 예외는 "VKontakte"입니다. 요청을 하면 VK.Share() 메서드가 실행되어 페이지에 자연적인 오류가 발생합니다. VK 개체가 없지만 다음의 도움을 받기 때문입니다. "간단한" 목발을 사용하면 필요한 결과를 얻을 수 있습니다.
마지막으로 남은 일은 버튼에 숫자를 그리는 것입니다. 새로운 setCountLikes() 메소드를 사용하여 이 문제를 해결합니다. 이 함수는 래퍼 지정자와 숫자 자체라는 두 가지 매개변수를 사용합니다.
SetCountLikes: function(box, num)( box.append("" + num + ""); return false; )
팝업: function(box, url)( var countBox = box.find(".count"); if(!countBox.length)( share.setCountLikes(box, 1); )else( countBox.text(parseInt(countBox. text()) + 1); window.open(url, "", "toolbar=0, 상태=0, 너비=626, 높이=436");
이전에 설명한 대로 새 상자 매개변수를 추가하고 내부에서 if() 조건 연산자를 사용하여 이전에 공유한 매개변수 수에 따라 카운터를 늘립니다. 이것은 스크립트 자체를 완료합니다. 물론 twitter(), vk(), facebook() 메서드의 줄을 업데이트해야 합니다.
Share.popup(url);
Share.popup($this, url);
이제 HTML 마크업과 관련하여 위에서 init() 메서드를 살펴보았는데 이것이 스크립트의 시작/실행 지점이므로 파일을 연결한 후 페이지에서 이를 호출합니다.
share.init(".share");
또한 버튼에 아이콘 클래스가 포함된 범위를 추가해야 합니다.
CSS에도 약간의 변화가 있었습니다. 이 단락을 읽을 때쯤에는 이미 예제가 포함된 아카이브를 다운로드했기를 바랍니다. 그렇지 않은 경우 다운로드하여 사용하세요. 모든 것이 작동합니다. 나 자신도 여러 프로젝트에서 이 솔루션을 사용하고 있는데 어떤 문제도 발견하지 못했습니다.
저자로부터: 안녕하세요. 오늘날 소셜 네트워크는 총 30억 명이 넘는 사람들이 등록되어 있는 수준으로 발전했습니다. 이는 잠재적으로 매우 강력한 잠재 고객이므로 오늘은 웹 사이트에 소셜 미디어 버튼을 추가하는 방법을 알려 드리겠습니다.
WordPress 사이트에 추가하기WordPress를 사용하는 경우 가장 쉬운 방법은 이 문제에 대한 일부 플러그인을 설치하는 것입니다. 어느? 예를 들어 Juiz Social Post Sharer를 사용했습니다. 일반적으로 플러그인 검색에 social이라는 단어를 입력하고 거기에 무엇이 있는지 확인하세요. 여기서 유일한 장점은 아무것도 구성할 필요가 없다는 것입니다.
Yandex는 또한 버튼을 직접 사용자 정의하고 설치할 수 있는 페이지를 개발했습니다. 이 페이지에서는 필요한 서비스를 선택할 수 있습니다(그 중 약 25개가 있습니다). 오른쪽에서는 블록의 모양을 선택할 수 있습니다. 이는 사용자가 버튼을 클릭한 횟수를 보여주는 카운터일 수 있습니다. 이는 결과적으로 해당 자료가 독자에게 유용한지 여부를 추적하는 데 도움이 됩니다.
당연히 세 가지 옵션을 모두 사용할 필요는 없습니다. 하나가 더 좋습니다. 페이지의 시작과 끝 모두에 블록이 있는 사이트를 본 적이 있습니다.
이제 기사를 표시하는 코드가 포함된 파일을 찾아야 합니다. 예를 들어 WordPress에서는 일반적으로 Single.php 또는 이와 유사한 이름으로 불립니다. 따라서 기사 뒤에 버튼이 있는 블록을 추가해야 한다면 the_content 줄을 찾으세요. 여기에 코드를 붙여넣을 수 있습니다. 템플릿 개발자가 코드에 설명을 추가하면 많은 도움이 될 것입니다.
여러 가지 방법으로 사이트 파일을 편집할 수 있습니다. 예를 들어 엔진 관리 패널(외관 - 편집기)을 통해 직접 수행할 수 있습니다. 이 경우 코드가 강조 표시되지 않으므로 탐색이 그리 편리하지 않습니다. 또 다른 방법은 FTP를 이용하는 것입니다. FTP 클라이언트를 사용하여 사이트에 연결하고 wp-content - 테마로 이동합니다. 여기에서 현재 활성화된 템플릿을 찾아야 합니다. 우리는 그것에 들어가서 동일한 Single.php를 찾거나 이름이 비슷한 것을 찾습니다.
코드 파일 자체에서 검색(Ctrl + F)을 사용하여 the_content 줄을 찾습니다. 이 코드를 그 뒤 어딘가에 붙여넣으세요.
댓글은 위 스크린샷에서 녹색으로 강조표시된 내용입니다. 보시다시피 개발자는 기사 자체의 텍스트가 여기에 표시된다는 점을 명확하게 표시했습니다. 훌륭합니다. 기사 바로 뒤에 코드를 붙여넣기만 하면 원하는 결과를 얻을 수 있습니다.
Pluso의 버튼
웹 개발의 최신 동향 및 접근 방식
웹 사이트 구축 시 처음부터 빠른 성장을 위한 알고리즘을 학습하세요.
버튼 스타일을 선택하고 배경, 위치 및 크기를 사용자 지정할 수 있습니다. 카운터가 내장된 아이콘을 선택할 수도 있습니다. Pluso 버튼의 또 다른 장점은 놀라운 외관과 거의 모든 디자인에 통합할 수 있는 능력입니다.
모든 것이 구성되면 코드를 복사하여 해당 블록을 보고 싶은 위치에 붙여넣기만 하면 됩니다.
또 다른 옵션은 Share42입니다.이전 옵션이 마음에 들지 않으면 사이트에 소셜 네트워킹 버튼을 추가하는 또 다른 방법이 있습니다. 이것은 share42.com 서비스입니다. 소셜 서비스 버튼이 만들어질 당시에는 42개의 소셜 서비스 버튼이 있었지만 현재는 43개이기 때문에 이름이 붙여진 것 같습니다.
모든 것이 이미 단계별 지침의 형태로 웹사이트에 제시되어 있으므로 프로세스를 자세히 설명하지는 않겠습니다. 이 아이콘의 디자인은 변경할 수 없으며 크기만 변경할 수 있습니다. 그러나 그들은 나빠 보이지 않습니다.
필요한 아이콘은 마우스로 클릭하여 선택해야 합니다. 이와 별도로 브라우저 즐겨찾기 추가, RSS 링크 및 "맨 위로 가기" 버튼과 같은 흥미로운 기능이 있다는 점에 주목하고 싶습니다.
다음으로 패널 유형을 선택할 수 있습니다: 수평 또는 수직? 두 번째 항목을 선택하면 버튼 수가 제한될 수 있습니다. 인코딩을 UTF-8로 두는 것이 좋습니다. 또한 페이지의 사용자가 해당 서비스로 이동하여 이러한 버튼을 직접 설치할 수 있도록 버튼 세트에 서비스 자체의 아이콘을 추가할 수도 있습니다.
또한 RSS 아이콘을 추가하려는 경우 피드 주소를 지정해야 하며, 버튼 클릭 횟수를 표시하려면 마지막 두 확인란을 선택해야 합니다.
아래에는 2개의 버튼이 있습니다. 첫 번째 버튼을 사용하면 구성한 소셜 버튼의 모양을 확인할 수 있습니다. 두 번째를 사용하면 스크립트가 다운로드됩니다. FTP를 통해 웹사이트 루트 폴더에 업로드해야 합니다.
다음 단계는 서비스 페이지에서 이 폴더의 경로를 지정하는 것입니다. site.com을 도메인 이름으로 바꾸는 것만으로도 충분할 때가 많습니다. 이제 남은 것은 코드를 삽입하고 먼저 리소스가 실행되는 cms를 선택하는 것입니다. 코드를 삽입할 위치를 이미 이해하셨기를 바랍니다.
소셜 버튼을 만들 수 있는 다른 일반 서비스가 몇 개 있고 이를 추가하는 스크립트와 플러그인도 엄청나게 많다는 것은 의심할 여지가 없습니다. 오늘 저는 제 생각에 최고의 옵션을 나열했습니다.
오늘 우리는 인터넷 프로젝트에 소셜 네트워크 및 서비스용 버튼을 추가하는 방법을 배웠습니다. 이제 감사한 독자들이 귀하의 유용한 자료를 소셜 네트워크에 자동으로 배포할 수 있습니다. 그리고 그게 전부입니다.
웹 개발의 최신 동향 및 접근 방식
웹 사이트 구축 시 처음부터 빠른 성장을 위한 알고리즘을 학습하세요.
인터넷에서 자신이 감시당하는 것이 두렵다면 컴퓨터를 끄십시오.
조만간 모든 웹마스터는 자신의 웹사이트에 소셜 버튼을 설치하는 것에 대해 생각합니다. 결국, 이제 일부 사람들은 소셜 네트워크 없이는 자신의 삶을 상상할 수 없습니다. 왜 기사를 공유하는 능력을 박탈합니까? 그러나 시간이 지남에 따라 많은 소셜 버튼 서비스는 정신을 잃고 코드로 원하는 작업을 수행하며 필요하지 않은 모든 것을 밀어 넣습니다. 이 기사에서는 귀하의 웹 사이트에 대한 가장 깔끔한 소셜 네트워크 공유 버튼에 대한 코드를 찾을 수 있다는 편집증적인 아이디어 때문입니다.거의 모든 소셜 버튼 서비스가 필요할 때마다 사용자에 대한 정보를 유출한다는 것은 비밀이 아닙니다. 맙소사! 그럴 수 없어! 나는 이것에 대해 방금 알았습니다! - 축하해요! 그들은 자신의 일과 노력을 위해 어떻게든 당신을 사용해야 합니다. 그들은 훌륭한 기능성, 편리성 및 "품질"을 갖춘 좋은 서비스를 만들었습니다. 당신이 해야 할 일은 필요한 것을 선택하고 필요한 곳에 코드를 삽입하는 것뿐입니다. 그게 다야. 그리고 인터넷에서 무료로 그러한 작업을 수행하면 어떤 이점이 있습니까? 오른쪽. 아니요. 따라서 때때로 이러한 각 사무실은 일부 DMP에 데이터를 덤프하는 일에 휘말리게 됩니다.
이러한 서비스 각각에 대해 설명하지는 않겠습니다. 모두 좋은 기능과 몇 가지 고유한 기능을 가지고 있지만 별도로 소개하고 싶지는 않습니다. 아래에 짧은 목록을 작성했습니다.
사이트에서 가장 인기 있는 소셜 버튼 서비스 목록- share.pluso.ru
- uptolike.ru
- tech.yandex.ru/share
- share42.com
- sharethis.com
- pip.qip.ru
- www.addtoany.com
- www.po.st
- www.addthis.com
- sharebuttons.com
시간이 충분하지 않거나 손과 손가락 지골을 몇 번 이상 움직이기에는 너무 게으른 경우 이러한 서비스를 안전하게 사용할 수 있습니다. 그들은 웹사이트와 방문자 모두에게 좋습니다. 그러나 어느 누구도 사용자 데이터의 100% 보안, DNS 작동 및 사이트 로딩을 100% 보장할 수 없습니다. 저것들. 소셜 버튼 서버에 오류가 발생하면 사이트가 평소보다 느리게 로드됩니다. 예, 이런 일은 거의 발생하지 않지만 발생합니다. 물론 이러한 스크립트의 비동기 로딩을 설치하고 작업을 최적화할 수 있지만 이는 게으른 사용자를 위해 작성한 몇 가지 단계 이상입니다.
물론 인터넷에는 웹사이트 내부에 배치되어 어디에도 정보를 유출하지 않는 소셜 미디어 코드가 있지만, 그 중 다수에는 동일한 소셜 네트워크에 대한 외부 링크가 포함되어 있습니다. 웹마스터는 외부 링크를 좋아하지 않으므로 가장 편집증적인 웹마스터를 위해 goodshare.ru 스크립트를 기반으로 기성 코드를 수집했으며 이에 대해 실제로 감사드립니다.
이 코드를 설치하는 예제는 HTML이나 CSS의 기본을 모르는 분들을 위한 것이 아니지만, 손과 약간의 시간이 있다면 지침을 엄격하게 따르면 성공할 것입니다. 그래서 우리는 갔다:
그것들은 다음과 같습니다:
표준에 따라 Facebook, VKontakte, Odnoklassniki, Moi Mir, Google Plus, Twitter 등 6개의 소셜 네트워크가 구성됩니다. 스크립트 설정에는 30개 이상이 있지만 원하는 경우 이 모든 항목을 별도로 설치할 수 있습니다. 저자가 언급한 이 버튼의 장점은 다음과 같습니다. 저는 이에 전적으로 동의합니다.
스크립트 자체는 무엇을 하며 일반적으로 이 스크립트가 필요한 이유는 무엇입니까? 이 버튼의 스크립트에는 모든 소셜 네트워크의 모든 API가 포함되어 있으며 스크립트는 사이트의 모든 위치를 활성 공유 블록으로 만듭니다.
예를 들어 빈 DIV 블록, Span, 이미지, 빈 링크에 배치할 수 있으며 사이트의 거의 모든 요소를 이러한 버튼으로 바꿀 수 있습니다. 내 예에서는 빈 Div에 대한 스크립트를 사용했습니다.
사진에 관해서: 그것들은 여기에 없습니다. 표시되는 아이콘은 글꼴에서 가져온 것이며 단지 기호일 뿐이며 그 이상은 아닙니다.
에서 버튼 아카이브를 다운로드할 수 있습니다.이 버튼을 설치하는 것은 매우 쉽습니다. 아카이브에는 글꼴, CSS, JS, TXT의 네 가지 파일만 있습니다.
1). 서버의 폴더에 글꼴을 업로드해야 합니다. JS 또는 CSS와 같은 위치에 넣을 수 있습니다.
2). 그런 다음 JS를 서버에 업로드하고 어디에서나 코드를 사용하여 사이트에 표시하십시오. 단, 페이지 맨 아래에 표시하는 것이 좋습니다.
이 스크립트는 두 부분으로 구성됩니다. 첫 번째 부분은 Jquery이고 두 번째 부분은 버튼 코드 자체입니다. 사이트에서 이미 Jquery를 활성화한 경우 코드의 첫 번째 부분을 제거하여 파일 크기를 줄일 수 있습니다.
중요: (Jquery 코드의 일부를 제거한 사용자의 경우) 버튼 스크립트는 Jquery 스크립트 다음에 로드되어야 합니다.
삼). JS와 글꼴을 설치한 후 사이트에 CSS를 추가해야 합니다. soc.css 파일의 전체 내용을 사이트의 CSS 플러그인 중 하나에 복사하기만 하면 됩니다.
중요: soc.css 파일의 82번째 줄에서 URL을 글꼴 위치로 변경하세요!
4). 그런 다음 HTML.TXT 파일의 HTML 코드를 멋진 버튼을 보려는 사이트로 복사하세요.
스크립트의 구조에는 소셜 네트워크 공유 카운터를 설치할 수 있는 기능이 있지만 웹 사이트의 설명서에서 자세한 내용을 읽을 수 있습니다.
그리고 내 블로그에 설치된 스크립트이기 때문에 이 줄 바로 아래에서 스크립트의 작동을 확인할 수 있습니다.
관심을 가져주셔서 감사합니다. 설치에 대해 궁금한 점이 있으면 의견을 적어주세요.
나는 너와 함께 있었다, 게으른 스타우루스.
안녕하세요, 블로그 사이트 독자 여러분. 제목에서 이미 추측하셨듯이, 성공적인 상황과 기사 자체의 높은 품질 하에서 귀하의 사이트에 있는 기사를 유치하는 데 매우 도움이 될 수 있는 소위 소셜 버튼에 대해 이야기하겠습니다. 소셜 네트워크 및 서비스 방문자.
사이트 순위를 매길 때 검색 엔진에서는 소셜 신호도 고려합니다. 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 - 확장된 기능을 갖춘 사이트용 소셜 버튼 빌더