Blogger에서 조건부로 소셜 공유 버튼을로드하는 방법

트윗0

일반적으로 우리는 사이트의 소셜 공유 버튼을 사용하여 다양한 소셜 네트워킹 플랫폼에서 사이트의 콘텐츠를 공유합니다. 이러한 소셜 공유 버튼은 웹 페이지에 몇 바이트 크기를 추가합니다. 누군가가 느린 인터넷 연결로 특정 웹 페이지를 탐색하면 혼란이 생길 것입니다. 특히 반응 형 디자인에서이를 방지하려면 소셜 공유 버튼을 조건부로로드하고 모바일 장치에서로드하도록 중지하여 혼란을 방지 할 수 있습니다.

소셜 공유 위젯

조건부로 소셜 위젯을로드하는 방법 :

아래는 브라우저의 너비를 계산하는 간단한 기술이며 너비가 특정 너비를 초과하면 480px 만 소셜 공유 버튼이 표시됩니다.

여기서 가장 좋은 점은 CSS를 사용하여 숨기지 않고로드하는 것을 완전히 피하여 누군가가 모바일 장치에서 검색 할 때 많은로드 시간을 절약 할 수 있다는 것입니다.

블로그 / 웹 사이트에 조건부로드를 구현하려면 먼저 일반적인 절차를 사용하여 필요한 모든 소셜 위젯을 블로그에 추가하십시오. 예를 들어 다음을 방문 할 수 있습니다. facebook.com 좋아요 버튼에 대한 코드를 생성하는 동안 dev.twitter.com 트위터의 트윗 및 팔로우 위젯에 대한 코드를 제공합니다.

생성 된 코드에서 자바 스크립트를 제거하세요. tags – and add everything else to your website template. Then copy-paste the following snippet before the closing tag of your website template.


(function(doc, script, minimum) {

 // Calculate the width of the user's screen
 var browserWidth = window.innerWidth
 || doc.documentElement.clientWidth
 || doc.body.clientWidth;

 // Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
 if (browserWidth > minimum) {

 var js, frag = doc.createDocumentFragment(),

 // Credit : Stoyan Stefanov of phpied.com
 js_queue = function(url, id) {
 if ( ! doc.getElementById(id) ) {
 js = doc.createElement(script);
 js.src = url; js.id = id;
 frag.appendChild(js);
 }
 };

 // These are the most common social widgets, remove the ones you don't need
 js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
 js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
 js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
 js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
 js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");

 var fjs = doc.getElementsByTagName(script)[0];
 fjs.parentNode.insertBefore(frag, fjs);
 }

// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );

위의 JavaScript 코드는 Twitter, Facebook, LinkedIn, Google+ 및 Pinterest와 같은 인기있는 모든 소셜 위젯을 비동기식으로로드하지만 웹 사이트에서 사용하지 않을 위젯에 대한 js_queue 호출을 제거 할 수 있습니다. 변경 사항을 저장하면 완료됩니다.

웹 페이지 로딩 속도