Java Script, jQuery : 느린 소셜 미디어 버튼 로드 : 예제, 개념, 방법

Java Script, jQuery : 느린 소셜 미디어 버튼 로드 : 예제, 개념, 방법

 

웹 사이트 성공을 위해 페이지 로딩 속도가 매우 중요하므로 가능한 한 웹 사이트의 모든 영역을 가속화해야합니다. 현재 대부분의 웹 사이트에서 제공하는 기능 중 하나는 소셜 미디어 버튼으로, 방문자가 좋아하는 소셜 네트워크에서 기사를 쉽게 공유 할 수 있습니다. 

또한 방문자가 각 소셜 네트워크에서 페이지가 몇 번 공유되었는지 확인할 수 있습니다. 이러한 소셜 네트워크 버튼의 문제점은 AJAX를 통해 버튼을 표시하는 데 필요한 모든 정보를 얻기 위해 많은 HTTP 요청을 해야 한다는 것입니다. 버튼의 이미지와 페이지가 공유 된 횟수를 가져옵니다.

Facebook, Twitter 및 Google Plus에는 주요 소셜 네트워크가 3 개 이상있는 것이 일반적이지만 Pinterest, LinkedIn 및 기타 여러 네트워크를 가질 수도 있습니다. 페이지에 서로 다른 소셜 네트워크 버튼이 있으면 페이지에 대한 모든 정보를 얻기 위한 많은 HTTP 요청이 있을 수 있습니다. 이러한 HTTP 요청 각각은 페이지의 총 다운로드 시간에 영향을 미치므로 가능한 한 많이 줄이려고 합니다.

이를 수행하는 한 가지 방법은 기본 단추를 제거하고 간단한 공유 링크로 바꾸는 것입니다. 이 페이지를 이미 공유 한 사람의 수는 표시하지 않으므로 많은 사람들이 이 기사를 공유한다는 사실을 알리는 것이 브랜드에 중요 할 수 있습니다. 그러나 이것이 웹 사이트에 중요하지 않은 경우 공유 링크로 쉽게 바꿀 수 있습니다.

기본 소셜 미디어 버튼을 원한다면 지연로드를 사용하여 필요할 때만 HTTP 요청을 하는 옵션이 있습니다. 페이지를 아래로 스크롤하여 페이지 끝에 소셜 미디어 단추가 있고 페이지 하단 근처에있을 때만 로드 할 수 있습니다. 기본적으로 버튼을 숨기고 버튼을 클릭해야만 로드 할 수 있으며 HTTP 요청으로 소셜 버튼을 로드 할 수 있습니다. 다음 코드는 Twitter, Facebook, Google+ 및 LinkedIn의 4 가지 주요 소셜 미디어 버튼을 지연로드하는 방법을 보여줍니다.

 

 

자바 스크립트를 비동기 로드

소셜 미디어 버튼에 로드하는 또 다른 솔루션은 자바 스크립트가 비동기적으로 로드되도록 하는 것입니다. 이는 자바 스크립트가 로드되어 실행되지만 나머지 페이지로드에는 영향을 미치지 않음을 의미합니다. 즉, 소셜 미디어 버튼으로 인해 페이지 속도가 약간 느려지지만 페이지에서 여전히 HTTP 요청 및 대역폭을 사용해야 합니다. Javascript 파일을 비동기 적으로 로드하려면 다음 코드를 사용할 수 있습니다.

 

var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "http://www.domain.com/social_media.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);

 

그러면 새 스크립트 태그가 생성되고 src 속성에 소셜 미디어 자바 스크립트가 추가되고 문서 헤드 내부에 태그가 추가됩니다. Javascript로 작업 할 때 jQuery를 사용하는 것이 더 좋습니다. JQuery는 getScript ()라는 편리한 메소드를 가지고 있는데, 위 코드를 수행하지만 코드 줄이 적습니다.

 

(function() {
     $.getScript('http://www.domain.com/social_media.js');
});

 

이제 이 기술을 다음 예제와 함께 사용하여 클릭 버튼의 소셜 미디어 버튼에 로드하는 방법을 보여줍니다. 그러면 버튼의 Javascript에 로드됩니다. Javascript가 이미 로드 된 경우 다음 코드는 API를 사용하여 소셜 버튼에 로드하기 위해 호출 할 수있는 기능을 보여줍니다.

각 소셜 버튼에 로드하는 두 가지 방법이 있습니다. 버튼의 HTML이 이미 DOM에 있는 경우 $ .getScript () 메소드를 사용하여 Javascript에 로드하기만하면 됩니다. 이 자바 스크립트가 로드되면 올바른 HTML을 검색하여 Twitter 버튼으로 바꿉니다. Twitter 버튼에 필요한 HTML은 다음과 같습니다.

 

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"></a>

 

트위터 버튼으로 HTML은 DOM에 있으며 이제 $ .getScript () 메소드를 사용하여 자바 스크립트에 로드 할 수 있습니다.

 

$.getScript('http://platform.twitter.com/widgets.js');

 

이 Javascript가 로드되면 모든 Twitter 링크를 검색하여 Twitter 버튼으로 바꿉니다. 그러나 자바 스크립트가 이미 페이지에 로드되어 있고 페이지에 새 트위터 링크를 추가한 경우 위젯로드 스크립트를 다시 실행하여 트위터가 링크를 검색하여 버튼으로 변환 할 수 있는 방법이 필요합니다. Twitter Javascript가 페이지에로드되면이 오브젝트에 twittr이라는 오브젝트가 작성되며 위젯을 다시로드하는 데 사용할 수 있는 메소드가 있습니다. Twitter로드 스크립트를 다시 실행하려면 다음 코드를 사용할 수 있습니다.

 

if (typeof (twttr) != 'undefined'){
     twttr.widgets.load();
}

 

이 두 가지 방법으로 twittr 객체가 설정되어 있는지 확인하는 함수를 만들 수 있습니다. twitter 객체가 설정되어 있지 않으면 Twitter Javascript 파일을 로드 할 수 있습니다. 설정되어 있으면 로드 함수를 호출하여 모든 것을 표시 할 수 있습니다.

 

function loadTwitter()
{
    if (typeof (twttr) != 'undefined'){
        twttr.widgets.load();
    } else {
        $.getScript('http://platform.twitter.com/widgets.js');
    }
}

 

 

Facebook Button

Facebook 버튼으로 버튼을 로드하는 두 가지 방법이 있습니다. Javascript를 로드 한 다음 버튼의 HTML을 검색하여 Facebook 버튼으로 바꿀 수 있습니다. Javascript 메소드를 호출하여 단추를 로드 할 수도 있습니다. Facebook 버튼 용 HTML을 추가 할 수있는 여러 가지 방법이 있습니다. 아래는 Facebook 버튼 용 HTML을 추가 할 수 있는 방법 중 하나입니다.

 

<div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90"></div>

 

페이지에 HTML을 사용하면 이제 자바 스크립트에로드 할 수 있습니다. 이렇게하면 HTML을 검색하여 Facebook 버튼으로 바꿉니다. 다음은 $ .getScript () 메소드를 사용하여 Facebook Javascript에서 로드하는 방법이며, $ .getScript () 메소드의 두 번째 매개 변수는 스크립트가로드 된 후 실행되는 콜백 함수입니다. 이 함수 안에서 Facebook 객체를 인스턴스화 할 수 있습니다. 그러면 HTML이 Facebook 버튼으로 바뀝니다.

 

$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
     FB.init({ status: true, cookie: true, xfbml: true });
});

 

자바 스크립트가 이미 페이지에 로드되어 있고 FB 객체의 영향을 받지 않는 새로운 HTML 요소를 생성하는 경우 HTML을 Facebook 버튼으로 전환하기 위해 객체를 다시 로드하는 방법이 필요합니다. Facebook Javascript에 로드하면 FB라는 객체가 생성됩니다. 그런 다음이 객체가 있는지 확인하고 이미 존재하는 경우 Facebook 버튼을 다시로드 할 init () 메소드를 호출 할 수 있습니다.

 

if (typeof (FB) != 'undefined') {
     FB.init({ status: true, cookie: true, xfbml: true });
}

 

 

이 두 가지 방법을 사용하면 Facebook 버튼을 새로 고침 할 때마다 호출 할 함수를 만들 수 있습니다. 이 방법을 사용하면 Javascript가 로드되었는지 여부에 관계없이 함수가 버튼을 다시 확인하고 다시 로드합니다. 먼저 FB 객체가 존재하는지 확인하여 init () 메소드를 간단히 다시 실행합니다. 그렇지 않으면 Javascript에로드되고 FB 객체에서 init () 메소드를 호출합니다.

 

function loadFacebook()
{
    if (typeof (FB) != 'undefined') {
        FB.init({ status: true, cookie: true, xfbml: true });
    } else {
        $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
            FB.init({ status: true, cookie: true, xfbml: true });
        });
    }
}

 

 

Google Plus Button

Google 플러스 버튼은 다른 버튼과 동일한 방식으로 작동합니다. 버튼 중 하나를 식별하기 위해 추가 할 HTML이 있습니다. 페이지에 로드하는 데 사용할 수 있는 자바 스크립트와 버튼을 렌더링하는 Google API 객체의 메소드가 있습니다. 다시. 다음은 Google 플러스 버튼에 사용해야하는 HTML입니다. 포함해야 할 중요한 속성은 class = "g-plusone"입니다. 이것이 Google API에서 렌더 메소드를 분류하는 데 사용할 것입니다.

 

<div class="g-plusone" data-annotation="inline" data-size="medium" data-width="120"></div>

 

HTML이 페이지에 있으면 Google plus Javascript를 호출 할 수 있습니다.이 코드가 로드되면 페이지에서 HTML 버튼을 확인하고 발견되면 HTML 버튼을 Google 플러스 버튼으로 바꿉니다.

 

$.getScript('https://apis.google.com/js/plusone.js');

 

다른 버튼과 마찬가지로 페이지에 자바 스크립트가 이미로드 된 다음 HTML을 삽입하면 Google API는 버튼을 다시 렌더링하는 메소드를 호출하지 않고 이를 Google Plus 버튼으로 변환하지 않습니다. Google plus Javascript가 페이지에 로드되면 gapi 객체가 생성되며 여기에는 render()라는 메소드가 있어 요소를 전달하여 Google plus 버튼으로 렌더링 할 수 있습니다. 즉, 이제 g-plusone 클래스를 사용하여 모든 요소를 검색하여 렌더 메서드에 전달하면 모든 요소를 Google 플러스 버튼으로 재설정합니다.

 

$(".g-plusone").each(function () {
     gapi.plusone.render($(this).get(0));
});

 

이 두 가지 방법을 사용하여 Google plus 전용 함수를 만들 수 있습니다. gapi 객체가 설정되어 있는지 확인한 다음 gapi 객체에서 render () 메소드를 실행하면 Google plus 클래스를 검색 할 수 있습니다. HTML에서 이 요소를 render () 메소드에 전달합니다. gapi 객체가 존재하지 않으면 $ .getScript () 메소드를 사용하여 Google plus Javascript 파일에 로드해야합니다.

 

function loadGooglePlus()
{
    if (typeof (gapi) != 'undefined') {
        $(".g-plusone").each(function () {
            gapi.plusone.render($(this).get(0));
        });
    } else {
        $.getScript('https://apis.google.com/js/plusone.js');
    }
}

 

 

LinkedIn Button

다른 버튼과 마찬가지로 LinkedIn 소셜 버튼은 자바 스크립트 파일에 로드하거나 단일 렌더링 방법을 사용하여 렌더링 할 수 있습니다. LinkedIn 버튼과의 차이점은 표준 HTML 태그를 사용하지 않지만 버튼이 나타나는 곳에 Javascript 태그를 사용한다는 것입니다.

 

<script type="IN/Share" data-counter="right"></script>

 

페이지에있을 때 LinkedIn API 객체 IN을 생성하는 LinkedIn Javascript 파일을 추가 할 수 있습니다.이 파일이 로드되면 LinkedIn 공유 버튼 태그를 검색하여 LinkedIn 버튼으로 변환합니다.

 

$.getScript("http://platform.linkedin.com/in.js");

 

자바 스크립트가 이미 로드되어 있고 페이지에 새 LinkedIn 버튼을 추가하려면 IN 객체를 사용하여 parse () 메서드를 호출하면 모든 LinkedIn 스크립트 태그가 LinkedIn 버튼으로 바뀝니다.

 

if (typeof (IN) != 'undefined') {
     IN.parse();
}

 

이 두 메소드에서 LinkedIn 객체가 설정되어 있는지 확인하기 위해 호출 할 수 있는 함수를 만들 수 있습니다. 이미 설정된 경우 parse () 메소드를 호출하여 LinkedIn 버튼을 다시 렌더링 할 수 있습니다. 객체가 아직 설정되지 않았다면 $ .getScript () 메소드를 사용하여 필요한 자바 스크립트를 로드 할 수 있습니다. 이것이 로드되면 LinkedIn 버튼을 자동으로 렌더링하는 IN 객체를 생성합니다.

 

function loadLinkedIn()
{
     if (typeof (IN) != 'undefined') {
          IN.parse();
     } else {
          $.getScript("http://platform.linkedin.com/in.js");
     }
}