저도 어제 밤늦게까지 작업해서 적용하였습니다.

쉬운 작업이지만 저처럼 어려워 하시는분들을 위해 글 남깁니다.

먼저 이렇게 좋은 모듈 만들어주신 개발자님게 감사드리고, 사용할 수있게 도와주신 웹지기님께도 감사드립니다.

 

모듈을 설치하시고  다운로드:   https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905

메뉴얼 대로 설치 이름과 설치 타입을 지정하세요 사용하실 갯수에따라 지정하시면 됩니다.

예: 이름: 좋아요 타입: like

 

사용하시는 board에 read 파일을 열으셔서 삽입하실 위치에 아래와 같이 붙여 넣으세요 갯수에 따라 복사하시면 됩니다.

 

 

 

<!--// 특정 게시판에서만 보이게 시작-->
<block cond="$oDocument->get('module_srl')!='166' && $oDocument->get('module_srl')!='모듈번호' && $oDocument->get('module_srl')!='모듈번호'">

<div class="voteextend">
<!--//무조건 한번만-->
{@
    $oVoteExtendModel = getModel('voteextend');
}
<script>
function voteExtend(type, document_srl)
{
    var params = {
        type       : type,
        document_srl : document_srl
    };
    exec_xml('voteextend','procVoteextendUserVote', params, function(args) { location.reload() });
}
</script>
<!--//무조건 한번만-->
<ul>
<li>
    <a herf="#" onclick="voteExtend('like','{$oDocument->document_srl}')"><img src="이미지주소"><br>좋아요<br><b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'like')}</b></a>
</li>
<li>
    <a herf="#" onclick="voteExtend('warm','{$oDocument->document_srl}')"><img src="이미지주소"><br>훈훈해요<br><b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'warm')}</b></a>
</li>
</ul>
</div>

</block>
<!--// 특정 게시판에서만 보이게 끝-->

 

그리고 board.css파일을 열으셔서 제일 아래 부분에 아래와 같이 입력하세요

/* 좋아요 감정버튼  */
.voteextend {display: -webkit-box;text-align: center; margin: 0 auto 15px;; width: 303px;}
.voteextend .topnum {color:#000;font-size: 12px;display: block; font-weight:bold;}
.voteextend ul {display:inline;}
.voteextend li {display:inline; list-style-type:none; float: left; text-align:center; padding:0 12px; color:#676565;}
.voteextend li a{cursor:pointer; font-size: 13px; color: #8C8C8C;}
.voteextend li a:hover{cursor:pointer; font-size: 13px; color: #393939;}

 

사이트 위치에 따라서 width 값과 padding 값을 조정해주시면 될 것 같아요

보고하비

profile
작은 커뮤니티 사이트를 운영하고 있는 사람입니다. xe town이 있어서 정말 행복합니다.
  • profile
    </font> 로 닫은게 좀 이상해 보이구요. </a> 로 닫은 부분이 보이지 않는 점이 이상하네요.
    그리고 버튼 여러개 하실분들 이 것 전체를 반복해서 만드시면 안되고 li 요소만 반복하셔야 할 것 같네요. 물론 아시겠지만 붙여넣기만 하실 줄 아는 분들은....
  • profile profile
    네 </font> 지워야겠네요 ^^
  • profile ?
    </a>도 추가해야해요.
  • ? profile
    넵 수정했습니다. ^^
  • profile
    저도 커뮤니티 운영을 한다면 꼭 한 번 적용해보고 싶은 모듈과 팁이네요. 부럽습니다~
  • ?

    <li>
        <a herf="#" onclick="voteExtend('like','{$oDocument->document_srl}')"> <img src="이미지 주소 입력하세요">
    <b>{$oVoteExtendModel->getVotedCount($oDocument->document_srl,'like')}</b></a>
    </li>

    조금만 첨언 하자면 이 부분만 반복되어야 합니다~ 

     

    스크린샷 2017-07-22 오후 1.14.36.png

     

    다운로드 링크 : https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905

  • ? profile
    개발자님 맞으시죠?.. 사이트를 새로 설치 하는과정에 모듈을 그대로 사용하였는데 타입설정후 저장을 눌러도 전혀 반응이 없는 현상이 있어서 문의드립니다.
  • profile
    이게 애드온으로 제작되면 굉장히 편리하겠네요.
  • ?
    보고하비님 생각 보다는 실력자 이십니다 ㅎㄷㄷㄷ
  • ? profile
    저도 따라한건데요.. 적용은 하셨나요?
  • profile
    추천은 알겠는데 비추천은???
    예를 들어 화나요를 크릭해서 비추천으로 할려면 어떻케 저용해야하는건지요.
    잘 몰겠네요
  • profile profile

    음 모듈이 그렇게 만들어진게 아니라서요 모듈 개발자님한테 여쭤봐야될것 같아요 ^^

     https://xe1.xpressengine.com/index.php?mid=download&package_id=22753905

  • profile
    이해를 잘해야하는 부분인거 같네요. 좋아요 재밌어요, 슬퍼요 화나요 모두 추천으로 집계가 되어야 되는게 맞는거 같기도 하고 화나요 같은경우는 어디로 분류를 해야할지...조금 고민이네요
  • profile profile
    글의 내용이 좋아요,재미나요,슬퍼요,화나요 등 모두 글을 공감한다는 다른분들에게 추천해 주고 싶은 글 이라는 공감의 표시입니다. 모두 추천행위죠.

    굳이 글쓴이에게 부정적인 영향을 주는 비추천에 연결되어야할 공감버튼들이 아니라고 봅니다.

    정말 글 자체가 말이 안되고 엉터리 같다는 의견을 전달하려는 버튼으로 제공한다면 누르는 사람은 사연이 슬퍼서 화가나는 뉴스라 공감이간다는 의미로 누른것이 글 쓴이에게 비추천을 한지도 모르고 비추천을 하게 될 것입니다.

    엉터리 글에 비추천을 하라고 제공하려는 버튼은 비추천이 맞다고 봅니다. 비추천 버튼 하나면 충분하지 않나요?

    이 자료 제작 의도가 다양한 감정으로 추천을 하게 만드는 추천확장모듈 이라는 것이어서 비추천에 연결하는 것은 처음부터 고려되지 않은 부분입니다.
  • profile profile
    그런거 같더군요.. 생각을 조금더하니 ^^
  • ?
    이미지를 넣고싶은데 꼭 이미지 파일로해야할까요..?
    css에 저렇게 웃는 것들은 없는지..
  • ?

    자답입니다:)

    http://www.freepik.com/free-vector/whatsapp-emoji_904078.htm?utm_campaign=flaticon&utm_medium=banner


    https://www.flaticon.com/packs/emoticon-set

    여기 이용하여 추가했습니다.

  • ?
    그리고 기존에 추천시 refresh 안되게 동작되었었는데

    적용하면 refresh 현상이 생기네요 ㅠ
  • ?
    location.reload() 이부분이 refresh 하는데

    ajax로 업데이트 되면 좋았을텐데 ㅠ_ㅠ;
  • ?
    location.reload() 부분에

    alert('추천완료');
    로 바꾸면 바로 숫자 변경은 없지만 refresh현상은 막을 수 있습니다~!
  • profile
    이거 적용법이 기억이 잘 안나서 그러는데요 ㅇ

    링크를 마우스 커서를 올리면 줄이 생기는데 줄이 안생기게 하고 싶은데 css적용을 어떻케 하면 될까요
  • profile

    css를 좀 개선하고 필요없는 게시판에서는 안나타나게 코드를 추가 했습니다. 위에글 수정하였으니 참고하세요
     

  • profile ?
    .voteextend li a:hover{text-decoration: none; cursor:pointer; font-size: 13px; color: #393939;}

    데코레이션 none 이 들어가야 될 것 같아요`
  • ?

    qwert.png

     

    그리고 지금 css가 중앙 정렬에서 좌측으로 쏠려있는데..

    float: left; 때문인거같은데 방법이 없을까요 ㅠ

     

  • ? profile
    css의 width 값과 padding 값을 조정해주시면 되요 제 사이트도 그렇게 조정했는데 가운데 안맞나요? http://zazak.net/
  • profile
    코알못인데, 공유해주신 소스와 @웹지기님 홈페이지와 각종 css 중앙정렬 알려주는 홈페이지 오백번도 더 보고나니까 겨우 가지런히 정렬했습니다. 그래봤자 코드 개판이지만, 나름 만족하고 있어요. 시작 코드 공유해주셔서 감사해요.