저자정보 및 푸터에 사용자 소셜 추가하기

탕비수다 이마고 스킨은 대표적인 소셜 계정 링크를 쉽게 설정할 수 있도록 기능(http://tangbisuda.tistory.com/3#guide-social-config)을 제공하고 있습니다. 더불어 몇 번 업데이트를 통해 추가적으로 소셜 계정 링크를 추가했습니다. 하지만 모든 소셜 계정을 스킨 기능에서 제공하는 것은 어렵다는 생각합니다. 따라서 사용자가 임의로 특정 소셜 링크를 추가할 수 있도록 팁을 제공하고자 합니다.

스킨 옵션을 통해 푸터에 소셜 아이콘을 추가했다면 아래 설정을 통해 추가할 수 없습니다. 스킨 옵션을 지원하는 탕비수다 이마고 스킨은 다른 방법으로 소셜 아이콘을 추가하고 있습니다. 설명서 카테고리에서 푸터 관련 글을 찾아 살펴보세요.

일단 아래 코드를 한 번 살펴보세요.

<script type="text/javascript">
  $( document ).ready(function() {
    /**
    * 저자정보 소셜 추가:
    */
    $( '.author-desc ul' ).append( $( '<li/>' ).html( '<a href="//ch.kakao.com/">storychannel</a>' ) );

    /**
    * 푸터 소셜 추가:
    */
    $( '#footer .social ul' ).append( $( '<li/>' ).html( '<a href="//ch.kakao.com/" target="_blank" title="스토리채널"><img src="./images/ico_storychannel.png" width="20" height="20"></a>' ) );
    $( '#footer .social' ).show();
  });
</script>

사용자 소셜 추가하기는 자바스크립트를 모를 경우 어려울 수 있습니다. 다만, 아래 그림에서 볼 수 있는 것처럼 body 태크가 끝나는 부분 위에 해당 코드를 추가하면 됩니다. 단, 굵은 글씨로 된 부분은 본인이 원하는 소셜 정보로 변경해야 합니다.

마지막으로 소셜에서 사용할 이미지는 "HTML/CSS 편집 > 파일업로드"를 통해 업로드 후 코드에서 해당 이미지 파일명으로 변경해야 합니다.