예전에 라이믹스 업그레이드 전에 사용하던 "insp_yotube 유투브 게시판 스킨"을 라이믹스 업그레이드 이후 사용 하면서 게시판의 디폴트 sns 공유 리스트에 지금은 사용하지 않는 구글 플러스를 제거하고 이곳에 (네이버,핀터레스트,카카오톡) 공유를 편집하여 사용하고 있는 중 입니다.
글의 내용은 핀터레스트 공유기능에 모바일 에서 대표이미지만 긁어오지 못하고 전체 이미지가 올라오는 부분에 대한 질문겸, 혹 "insp_youtube" 게시판 사용자 분들 중 제가 커스텀한 공유기능이 필요하신 분들께 제가 편집한 부분에 대한 정보를 공유하는 내용의 글 입니다;;;
우선 아래 내용들은 편집한 부분들 입니다.
총 편집한 내용들은
_read.html , board.default.js , skin.xml , default.css 등이며 "default.css" 에서는 xeicon 폰트 크기를 12px ->16px 로 확장하고 ".sns li " 부분의 padding 값 "0"이였던 부분을 "padding:2px;"로 수정만 하였습니다. 스킨의 default.css가 압축되어 있으니 각각 ".sns li i " 로 검색 하시고 " font-size: 16px;" 로 하시고 "sns li "로 검색후 padding 값만 2px 정도로 수정하시면 될듯 합니다.
*커스텀 편집 리스트 (skin.xml , _read.html , board.default.js , default.css)
skin.xml 을 편집하여 카카오공유 앱키 설정을 이곳에서 반영할수 있게 만들고
skin.xml 문서 하단에 "group"을 추가하여 모바일 설정을 만들고 거기에서 카카오 앱키를 기입할수 있게 만들었고
<group> <title xml:lang="ko">*모바일 설정</title> <var name="kakao_key" type="text"> <title xml:lang="ko">*카카오톡 앱키 입력</title> <description xml:lang="ko">카카오톡 링크를 사용하려면 'https://developers.kakao.com/'에서 발급한 API 앱키(Javascript 키)를 입력하셔야 합니다. 자세한 사항은 카카오 개발자 사이트를 참조하세요. 'https://developers.kakao.com/docs/js#카카오톡-링크-예제:-동적으로-바뀌는-내용의-카카오톡-링크-보내기'</description> </var> </group>
모바일 설정 카카오 펑션 스크립트를 만들기 위해
_read.html 문서의 상단에
<!-- // 카카오톡 공유를 위한 파머 링크 // -->
{@
$slink=$oDocument->getPermanentUrl().'?l='.$lang_type;
$sTitle=$oDocument->getTitleText();
}
<!--// 최상상단 카카오공유 내용 추가 소스-->
<load target="//developers.kakao.com/sdk/js/kakao.min.js" />
<script type='text/javascript'>
//<![CDATA[
// // 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('{$mi->kakao_key}');
// // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
function sendLink() {
Kakao.Link.sendScrap({
requestUrl: '{$slink}'
});
}
//]]>
</script>
카카오톡 공유 " function sendLink() " 펑션 링크"를 불러올수 있게 편집 후 "XE-icon" 으로 링크된 리스트 목록 과 "board.default.js" 파일로 넘겨지는 script 편집 까지 하여 네이버, 핀터레스트, ,카카오 톡 공유 편집 을 하였고
_read.html 문서의 하단 sns 공유관련 편집
<!--//sns-->
<div class="bnt_set">
<div class="sns sns_center">
<ul>
<li><a href="#" class="insp_btn clipboardBtn" data-docurl="{$oDocument->getPermanentUrl()}"><i class="xi-link"></i></a><input id="clip_target" type="text" value="" style="position:absolute;opacity:0;top:-9999em;"/></li>
<li><a href="#" class="facebook insp_btn"><i class="xi-facebook"></i></a></li>
<li><a href="#" class="twitter insp_btn"> <i class="xi-twitter"></i></a></li>
<li><a href="#" class="naver insp_btn"><i class="xi-naver"></i></a></li>
<li><a href="#" class="pinterest insp_btn"> <i class="xi-pinterest"></i></a></li>
<li><a href="javascript:sendLink()" class="kakao insp_btn"><i class="xi-kakaotalk"></i></a></li>
<li><a href="{getUrl('act','dispDocumentPrint')}" class="insp_btn" target="_blank"><i class="xi-print"></i></a></li>
</ul>
</div>
<script>
var sTitle = '{$oDocument->getTitleText()}';
jQuery(function($){
$('.twitter').snspost({
type : 'twitter',
content : sTitle + ' {$oDocument->getPermanentUrl()}'
});
$('.facebook').snspost({
type : 'facebook',
content : sTitle
});
$('.pinterest').snspost({
type : 'pinterest',
content : sTitle
});
$('.naver').snspost({
type : 'naver',
content : sTitle
});
});
</script>
</div>
<!--//sns-->
그리고
board.default.js 문서안의 sns 공유에 관한 코드를 아래처럼 편집 하여 기존의 구글플러스 를 제거한후 네이버,핀터레스트,카카오톡 공유를 반영하여 사용중 입니다.
*board.default.js 문서
// SNS post
(function($) {
$.fn.snspost = function(opts) {
var loc = '';
opts = $.extend({}, {type:'twitter', event:'click', content:''}, opts);
opts.content = encodeURIComponent(opts.content);
switch(opts.type) {
case 'facebook':
loc = 'http://www.facebook.com/share.php?t='+opts.content+'&u='+encodeURIComponent(opts.url||location.href);
break;
case 'delicious':
loc = 'http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(opts.url||location.href)+'&title='+opts.content;
break;
case 'twitter':
loc = 'http://twitter.com/share?text='+encodeURIComponent(opts.url||location.href)+'&title='+opts.content;
break;
case 'naver':
loc = 'https://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(opts.url||location.href)+'&title='+opts.content;
break;
case 'pinterest':
loc = 'https://www.pinterest.com/pin/create/button/?url='+encodeURIComponent(opts.url||location.href)+'&title='+opts.content;
break;
}
this.bind(opts.event, function() {
window.open(loc);
return false;
});
};
$.snspost = function(selectors, action) {
$.each(selectors, function(key,val) {
$(val).snspost( $.extend({}, action, {type:key}) );
});
};
})
(jQuery);
*수정 후 재배포가 금지된 스킨이라, 재배포는 못하고 혹시라도 저와같이 편집하여 반영하실 분들은 위에 편집된 코드 부분 들을 참고하여 반영 하세요..
여기까지 편집 하였으니 해당 스킨을 사용하시는 분들은 편집 하실때 참고 하시기 바랍니다;;;;
*지금 문제가 되고있는 부분은 핀터레스트 모바일 공유 부분 입니다.
pc 에서는 "핀터레스트" 공유에 별다른 문제점은 안보이는데 모바일 에서 공유시 게시물의 대표 이미지만 불러오지 못하고 문서내의 모든 이미지를 불러오게 되는 문제가 있는데 모바일 에서 대표이미지로 등록된 이미지만 긁어올수 있게 하려면 핀터레스트 공유에서 어떤 부분을 편집해야 하는 지 아시는 분 계실까요?
아 그리고 추가 질문 하나 더 드립니다;;;
레이아웃 설정시 설정에 반영하기 위해선 "$layout_info->" 이런식의 구문으로 불러오는데 혹시 문서내에 삽입된 스크립트 파일의 문서에 레이아웃 설정의 키값등을 이용 하려면 어떤식으로 반영해야 하는지 궁금하네요;;;
예를 들어 저는 지금 레이아웃에 카카오톡을 이용한 메시지 공유로 해당 카카오 공유 스크립트를 레이아웃의 js 폴더 내에 "sendLink.js" 이런 식의 파일을 만들어 레이아웃에 링크시켜 사용 하는 중인데 보안에 문제가 있어 보여서(해당 파일안에 있는 앱키값이 노출됨) 이 부분을 레이이웃에서 따로 설정하여 키값을 넣어주면 감춰지지 않을까 싶은데 이 부분을 어떻게 적용 시켜야 할지 막막해서요... 혹 이부분에 대한 지식공유도 좀 부탁 드립니다;;;