Korea SNS 플러그인을 통해 공유되는 카운트 기록 및 확인

SNS 공유 회수에 대한 트래킹을 확인할 수 있도록 어드민에 적용을 해 본 내용입니다.

이 중 어드민에 컬럼을 추가하는 부분,

그리고 Ajax(화면 전환 없이 이벤트 처리)는 상당히 유용한 부분인데 방법도 꽤 간단한 거 같아서 필요하실 경우 한 번 응용을 해 보시라 공유합니다.

크게 두가지 방법을 참고했습니다.

1. 어드민에 포스트 메타 정보 컬럼 추가하기 (sort 가능하도록)

2. Ajax 호출 방법 활용 (Korea SNS 플러그인의 구조상 직접 수정이 어려움 > 클릭 이벤트를 다른 데 영향을 주지 않고 체크하기 위해서 Ajax 활용)

위 두가지 내용은 구글을 통해 검색을 해 보면 수많은 정리 글을 확인할 수 있습니다.

그 중 따라만 해도 정확한 결과가 나오던 글들은…

위 내용을 토대로 적절히 조합을 했더니,

각 SNS 클릭 시의 클래스를 체크해서 어떤 버튼이 눌렸는지 확인 후 그 정보를 토대로 메타 정보를 불러다 하나씩 + 를 하고, 어드민에 공유 카운트에 따라 오름차순/내림차순 정렬이 가능한 컬럼들을 추가할 수 있었습니다. (예제에서 필요한 정보들로 일부만 조정)

코드를 functions.php에 등록을 해도 되고, 또는 플러그인 형태로 만들어서 적용해도 됩니다.

(※ 아래는 두 파일을 플러그인 형태로 한 폴더에 담고 플러그인 형태로 설치했을 때의 예입니다.)

– korea-sns-share-track.php 파일 내용

/**
 * Plugin Name: KoreaSNS Share Track
.......
*/

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) exit;

// ------------------------------------------- Share Count Add to post meta (by Ajax)
// ----------------------------------------------------------------------------------
add_action( 'wp_enqueue_scripts', 'sns_share_count_assets' );
function sns_share_count_assets() {
    
    wp_enqueue_script( 'koreasns_track', plugins_url( '/track.js', __FILE__ ), array('jquery'), '1.0', true );

    wp_localize_script( 'koreasns_track', 'shareinfo',      // .js 파일로 배열 객체를 전달할 수 있음 
        array('ajax_url' => admin_url( 'admin-ajax.php' ),   
               'post_ID' => get_the_ID()                    // 현재 글 ID를 전달함 
        )
    );  
}

add_action( 'wp_ajax_nopriv_post_share_count', 'post_share_count' );     
add_action( 'wp_ajax_post_share_count', 'post_share_count' );
function post_share_count() {   // js 파일에서 호출하는 함수, 저장된 카운트를 불러와서 하나 +하고 다시 메타 정보에 저장   
    $count = get_post_meta( $_POST['post_id'], $_POST['meta_key'], true );    
    $count++;
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { 
        update_post_meta( $_POST['post_id'], $_POST['meta_key'], $count );
        echo $_POST['meta_key']. ':' .$count;  // console.log확인용 결과 표시   
    }
    die();
}

// ------------------------------------------------- Share Count Show to Admin Column
// ----------------------------------------------------------------------------------
// Function: Get the number of Share [ Count ]
function get_ShareCount_meta($post_ID, $key) {   
    $count = get_post_meta($post_ID, $key, true); 
    return $count;   
}
// 어드민의 글(post) 리스트에 컬럼 추가  
function regist_share_count_columns($columns){
    $columns['share_facebook'] = __('Facebook');
    $columns['share_kakaostory'] = __('KStory'); 
    $columns['share_kakaotalk'] = __('KTalk'); 
    $columns['share_naverline'] = __('Line'); 
    $columns['share_naverband'] = __('Band');   
    $columns['share_naverblog'] = __('NBlog');     
    return $columns;
}
add_filter( 'manage_post_posts_columns', 'regist_share_count_columns' ); 
add_filter( 'manage_product_posts_columns', 'regist_share_count_columns' );      
 
// Function: new 컬럼들에 컨텐츠 출력 (카운트 수)
function show_share_count($column_name, $id) {   
    if($column_name === 'share_facebook'){    
        echo get_ShareCount_meta($id,'korea-sns-facebook');    // $id or get_the_ID()   
    }  
    if($column_name === 'share_kakaostory'){    
        echo get_ShareCount_meta($id,'korea-sns-kakaostory'); 
    }
    if($column_name === 'share_kakaotalk'){    
        echo get_ShareCount_meta($id,'korea-sns-kakaotalk'); 
    }
    if($column_name === 'share_naverline'){    
        echo get_ShareCount_meta($id,'korea-sns-naverline'); 
    }
    if($column_name === 'share_naverband'){    
        echo get_ShareCount_meta($id,'korea-sns-naverband'); 
    }
    if($column_name === 'share_naverblog'){    
        echo get_ShareCount_meta($id,'korea-sns-naverblog'); 
    }
}
add_action('manage_posts_custom_column', 'show_share_count',10,2);   
  
// Function:  추가된 컬럼들을 sort 가능한 컬럼으로 등록 
function regist_share_count_columns_sortable( $columns ) {
    $columns['share_facebook'] = 'share_facebook';
    $columns['share_kakaostory'] = 'share_kakaostory';
    $columns['share_kakaotalk'] = 'share_kakaotalk';
    $columns['share_naverline'] = 'share_naverline';
    $columns['share_naverband'] = 'share_naverband';
    $columns['share_naverblog'] = 'share_naverblog';
    return $columns;
}
add_filter( 'manage_edit-post_sortable_columns', 'regist_share_count_columns_sortable' );     // to post list 
add_filter( 'manage_edit-product_sortable_columns', 'regist_share_count_columns_sortable' );  // to product list

// Function: 각 칼럼의 정렬 방법 설명 
function sort_share_count_columns( $vars ) {
    if ( isset( $vars['orderby'] ) && 'share_facebook' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-facebook',   
                'orderby' => 'meta_value_num',  ));
    }
    if ( isset( $vars['orderby'] ) && 'share_kakaostory' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-kakaostory',   
                'orderby' => 'meta_value_num',  ));
    }
    if ( isset( $vars['orderby'] ) && 'share_kakaotalk' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-kakaotalk',   
                'orderby' => 'meta_value_num',  ));
    }
    if ( isset( $vars['orderby'] ) && 'share_naverline' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-naverline',   
                'orderby' => 'meta_value_num',  ));
    }
    if ( isset( $vars['orderby'] ) && 'share_naverband' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-naverband',   
                'orderby' => 'meta_value_num',  ));
    }
    if ( isset( $vars['orderby'] ) && 'share_naverblog' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
                'meta_key' => 'korea-sns-naverblog',   
                'orderby' => 'meta_value_num',  ));
    }
    return $vars;
}
add_filter( 'request', 'sort_share_count_columns' );

jQuery( document ).on( 'click', '.korea-sns-button', function() {   
    var snsClass =  jQuery(this).attr("class").split(' ').pop();   // get element's last class, 어느 버튼인지 체크 위해  
//  console.log(snsClass);

    var post_id = shareinfo.post_ID;  
    
    jQuery.ajax({
        url : shareinfo.ajax_url,    
        type : 'post',
        data : {
            action : 'post_share_count',
            post_id : post_id, 
            meta_key : snsClass     
        },
        success : function( response ) {
        //  jQuery('#sns-count').html( response );
        //  console.log(response);
        }
    });

    return false;
})