65 포스팅 내보내기(SNS 공유하기)
65.1 SNS 공유하기 추가하기
포스팅 글을 소셜 네트워킹 서비스(SNS)로 내보내는 기능을 구현해보겠습니다. 우선은 트위터, 페이스북, 텔레그램 3가지를 추가하겠습니다.
65.2 sharing.html 만들기
새로운 파일을 만듭니다. /templates/base/sharing.html 로 만들었습니다.
SNS url과 파라메터에 내보낼 URL을 넣고, text 또는 title에 기본값으로 표시할 내용을 적으시면 됩니다.
페이스북 : http://www.facebook.com/sharer/sharer.php?u=내보낼URL&title=표시할내용
트위터 : https://twitter.com/intent/tweet?url=내보낼URL&text=표시할내용
텔레그램 : https://t.me/share/url?내보낼URL&text=표시할내용
아래는 sharing.html 소스입니다.
<div class="share-wrapper text-right">
<span class="share-label text-muted mr-1">Share</span>
<span class="share-icons">
<a href="https://twitter.com/intent/tweet?text={{pageInfo.title}}&url=https://{{request.get_host}}{{request.get_full_path}}" data-toggle="tooltip" data-placement="top" title="" target="_blank" rel="noopener" aria-label="Twitter" data-original-title="Twitter">
<i class="fa-fw fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?title={{pageInfo.title}}&u=https://{{request.get_host}}{{request.get_full_path}}" data-toggle="tooltip" data-placement="top" title="" target="_blank" rel="noopener" aria-label="Facebook" data-original-title="Facebook">
<i class="fa-fw fab fa-facebook-square"></i>
</a>
<a href="https://t.me/share/url?url=https://{{request.get_host}}{{request.get_full_path}}&text={{pageInfo.title}}" data-toggle="tooltip" data-placement="top" title="" target="_blank" rel="noopener" aria-label="Telegram" data-original-title="Telegram">
<i class="fa-fw fab fa-telegram"></i>
</a>
<i id="copy-link" class="fa-fw fas fa-link small" data-toggle="tooltip" data-placement="top" title="" data-title-succeed="Link copied successfully!" data-original-title="Copy link">
</i>
</span>
</div>
65.3 sharing.html 만들기
포스팅 상세 페이지 글 우측 하단에 표시될수 있도록 sharing.html을 인클루드하였습니다.
65.4 sharing 적용확인
잘 적용되었습니다. ^^
마우스 오버시 툴팁을 적용하려면 js에서 초기화 하는 스크립트를 추가합니다.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
부트스트랩 툴팁 참고 URL : https://getbootstrap.com/docs/4.0/components/tooltips/
현재글 : 65 포스팅 내보내기(SNS 공유하기)
Comments
Login: