테크노트 구버전에 SNS연동 기능 적용방법
안내
테크노트에 SNS 연동기능을 원활하게 적용하려면 TECHNOTE7.5 버전으로 업그레이드 해야 합니다.
그러나 여러가지 파일 변경작업을 통해서 제작된 홈페이지는 전면적인 업그레이드가 쉽지 않습니다.
전체 업그레이드 안한다, 단지 TECHNOTE7.5 에 들어 있는 SNS연동 부분을 현재 사용중인
테크노트 구버전에 적용하고자 한다면 다음과 같이 하십시오.
1, 다운로드
[TECHNOTE7.5] 를 새로 내려 받습니다.
http://www.technote.co.kr/php/technote1/board.php?board=consult&command=skin_insert&exe=insert_down_shop
공개버전이건 상용버전이건 상관없고, charset(euc-kr/utf-8)은 현재 사용중인 것과 같은걸 받아야 합니다.
현재 사용준인 테크노트의 charset을 모르겠다면 전체관리 메인페이지의 [설치정보] 란에서 버전명칭을 확인하면 됩니다.
2, 압축해제
PC 에서 압축해제합니다.
3, 파일추가
이 파일을 현재 설치-운용중인 홈페이지에 제위치를 찾아 FTP 로 올려 줍니다.
technote7/util_include_sns_meta.php
technote7/skin_board/스킨폴더/b_img/i_button/sns_twitter.gif
technote7/skin_board/스킨폴더/b_img/i_button/sns_facebook.gif
technote7/skin_board/스킨폴더/b_img/i_button/sns_kakao.gif
technote7/skin_board/스킨폴더/b_img/i_button/sns_band.gif
technote7/skin_board/스킨폴더/b_img/i_button/sns_google.gif
위의 .gif 이미지 파일은 현재 사용중인 '스킨폴더' 에만 올리면 됩니다.
현재 사용하는 '스킨폴더' 가 어떤건지 잘 모르겠다면 게시판 본문페이지에 접속해서
[수정,삭제] 버튼 이미지를 마우스우측버튼으로 클릭하고 [속성] 에서 이미지 URL 을 확인하면 됩니다.
또는 게시판의 설정페이지를 열고 [2, 스킨설정] 항목에서 확인할 수도 있습니다.
5, 파일교체
technote7/include/admin/board/
게시판 관리설정 폴더입니다.
FTP 전송시 파일전송 모드를 Binary 로 지정하고 올려야 됩니다.
6, 파일수정 1
technote7/skin_board/스킨폴더/1_main_html.php
현재 운용중인 홈페이지의 메인 html 파일의 <head>..</head> 영역에 util_include_sns_meta.php 를
include 하는 코드를 넣습니다.
기존의 다른 <mata ....> 태그들 보다 위쪽에 넣어 줘야 합니다. 다운 받은 [TECHNOTE7.5] 의 1_main_html.php 파일을
참조하세요.
ex,
<html>
<head>
<? include 'util_include_sns_meta.php'; ?>
<meta http-equiv...기존의 meta 태그..>
.....
.....
</head>
수정대상 파일인 '현재 운중인 홈페이지의 메인 html 파일' 이란 기본적으로
technote7/skin_board/스킨폴더/1_main_html.php 파일을 뜻하는데요,
홈페이지 제작과정(또는 빌더실행)에서 게시판 설정이 바뀌면서 이게 다른 파일로 설정되었을 겁니다.
현재 운용중인 게시판의 설정페이지를 열고 [2, 스킨설정] → [2-1. 전체 레이아웃 html 스킨] 항목을
보면 어떤 파일로 지정되어 있는지 확인해서 그 파일을 수정하면 됩니다.
7, 파일수정 2
technote7/skin_board/스킨폴더/3_body.php
게시판 본문출력 스킨파일에 버튼출력 함수를 [TECHNOTE7.5] 것으로 교체합니다.
480번 라인 부근에 있는 아래와 같은 코드입니다.
// 버튼출력
function Sub_body_foot_button(){
**** 버튼출력 코드 ****
}
현재 사용중인 본문출력 스킨파일이 여러개라면 모두 수정하십시오.
각 게시판의 설정 [2-3 본문 출력 스킨] 항목에서 해당 파일을 확인할 수 있습니다.
8, 파일수정 3
technote7/skin_board/스킨폴더/b_script/main_script.js
SNS 버튼 클릭시 실행될 javascript 함수를 복사해 넣어 줍니다.
main_script.js 파일의 맨 하단부에 SNS 관련함수 5개 입니다.
function : [witter] , [Facebook] , [kakao] , [band] , [google plus]
main_script.js 파일을 원본 그대로 사용중이라면 파일 자체를 덮어 쓰는게 일이 더 수월할 겁니다.
9, 적용결과 확인
게시판의 설정의 [5-20. 본문 페이지의 출력요소 지정] 항목에서 [버튼-SNS] 를 출력지정(체크)하고
해당 게시판 본문페이지에서 본문내용 아래쪽에 나타난 SNS 버튼을 클릭해서 연동상태를 확인합니다.
그림파일이 첨부된 글과 첨부되지 않은 글을 각각 비교 확인합니다.
웹부라우저의 캐시 영향으로, 자바스크립트 파일 수정한것이 바로 적용되지 않을 수 있으니
접속상태에서 [F5] 키를 눌러서 [새로고침] 을 실행하십시오.
페이스북의 경우 특정 URL에 대한 연동정보를 자체서버에 보관해 두었다가 같은 URL의 요청이 들어 오면 그 캐시 데이타를
재사용하기 때문에 잘못 생성된 데이타가 수정되지 않고 계속 SNS 폼에 나타나는 일이 생길 수 있습니다.
그럴땐 https://developers.facebook.com/tools/debug/og/object/ 에 접속해서 해당 URL을 입력, 캐시 갱신해 주면 됩니다.
실제 사용하는 도메인에서 테스트 해야 합니다. 127.0.0.1 이나 localhost 같은 로컬 URL에선 안됩니다.
적용예 http://www.technote.co.kr/php/tech75test/board.php?board=ggghome&command=skin_insert&exe=home.php
게시판 부분은 여기까지 하면 업데이트 작업 끝입니다.
이하 내용은 쇼핑몰에만 해당됩니다.
현재 쇼핑몰을 사용하지 않는다면 다음 과정은 진행하지 않아도 됩니다.
향후 쇼핑몰을 개설하고자 할때는 technote7/skin_shop/ 폴더 전체를 새버전것으로 교체하고 사용하면 됩니다.
10, 쇼핑몰 - 파일추가
SNS 버튼 이미지 파일입니다.
technote7/skin_shop/스킨폴더/s_img/button/sns_twitter.gif
technote7/skin_shop/스킨폴더/s_img/button/sns_facebook.gif
technote7/skin_shop/스킨폴더/s_img/button/sns_kakao.gif
technote7/skin_shop/스킨폴더/s_img/button/sns_band.gif
technote7/skin_shop/스킨폴더/s_img/button/sns_google.gif
SNS 버튼 이미지 파일입니다. 현재 사용중인 '스킨폴더' 에만 올리면 됩니다.
현재 사용하는 스킨폴더가 어떤건지 잘 모르겠다면 쇼핑몰 본문(상품상세정보) 페이지에 접속해서
[장바구니] 버튼 그림을 마우스우측버튼으로 클릭하고 [속성] 에서 이미지 URL 을 확인하면 됩니다.
또는 쇼핑몰관리→환경설정→매장출력설정→[2, SHOP 스킨 설정] 에서 확인할 수도 있습니다.
11, 쇼핑몰 - 파일수정 1
위의 6 번 항목 내용을 쇼핑몰 해당 메인 html 에도 적용해 주어야 합니다.
테크노트 기본 설치시 쇼핑몰 메인 html 은 technote/skin_board/t_shop_default/1_main_html.php 이 파일입니다만
사이트 제작과정에서 다른 스킨 파일을 적용해서 사용할 가능성이 큽니다. 그 파일을 쉽게 알아내려면 쇼핑몰 홈페이지
좌상단의 사이트 로고(HOME)를 클릭해을때 접속되는 주소를 보고 확인하면 쉽습니다. 그 주소가
http://www.technote.co.kr/php/tech75test/board.php?board=tnshopmain&command=shop
이런 주소로 접속된다라고 가정하면 'tnshopmain' 게시판의 설정페이지를 열고
[2, 스킨설정] → [2-1. 전체 레이아웃 html 스킨] 를 확인하면 됩니다.
수정방법은 위 6번 항의 내용과 같습니다.
12, 쇼핑몰 - 파일수정 2
technote7/skin_shop/스킨폴더/2_view_body/body_default.php
쇼핑몰 본문(상품상세정보) 페이지에 SNS 버튼 출력코드를 복사해서 넣어 줍니다.
450번 라인 부근에 있는 아래와 같은 코드입니다.
<?
// SNS 버튼
**** SNS 버튼출력 코드 ***
?>
13, 쇼핑몰 - 파일수정 3
technote7/skin_shop/스킨폴더/css_javascript/shop_default.js
SNS 버튼 클릭시 실행될 javascript 함수를 복사해 넣어 줍니다.
shop_default.js 파일의 맨 하단부에 SNS 관련함수 5개 입니다.
function : [witter] , [Facebook] , [kakao] , [band] , [google plus]
shop_default.js 파일을 원본 그대로 사용중이라면 파일 자체를 덮어 쓰는게 일이 더 수월할 겁니다.
14, 쇼핑몰 - 적용결과 확인
쇼핑몰 본문(상품상세정보) 페이지에 SNS 버튼을 클릭해서 연동상태를 확인합니다.
페이스북,구글플러스에 연동시 상품명,상품정보,상품이미지 등이 전송되어야 합니다.
웹부라우저의 캐시 영향으로, 자바스크립트 파일 수정한것이 바로 적용되지 않을수 있으니
접속상태에서 [F5] 키를 눌러서 [새로고침] 을 실행하십시오.
적용예 : http://www.technote.co.kr/php/tech75test/board.php?board=tnshopmain&command=shop
이것 역시 페이스북은 캐시적용 때문에 일단 등록된 데이타는 수정되지 않고 계속 SNS폼에 나타나게 됩니다.
그럴땐 https://developers.facebook.com/tools/debug/og/object/ 에 접속해서 해당 URL을 입력, 캐시갱신해 주면 됩니다.
15. 기타
전면적인 업그레이드는 안하더라도 [TECHNOTE7.5] 를 따로 설치해서 살펴 보면서 부분 업데이트 하는게 좋습니다.
현재 사용중인 테크노트에 아무 영향이 미치지 않게끔 [TECHNOTE7.5] 를 추가설치 하려면
technote7/lib.php 파일에서 첫번째 설정항목인 $db_ident='a_tn'; 를 변경해서 설치하면 됩니다.
예를 들어 $db_ident='b_test'; 처럼 영문자로 임의 지정해 주면 됩니다. 이렇게 하면 db 테이블 생성시
테이블명이 기존것과 다르게 생성되므로 간섭,충돌이 없이 설치됩니다.
PC에 설치해 보고자 한다면 APMSETUP(http://www.apmsetup.com) 으로 로컬서버 환경을 만들어
설치하는게 가장 수월한 방법입니다.
잘 안되는건 질문게시판에 올려 주십시오.
홈페이지란게 다 제각각의 구조라서 직접 보지 않고 짐작만으로 답변을 하기가 어렵습니다.
질문시 홈페이지 주소를 적어 주시면 질문하는 사람도 답변하는 사람도 힘이 덜 들것입니다.
|
공지사항
질문,답변
