在網頁加入「用LINE傳送」按鈕,快速分享文章!語法教學
wordpress部落格、手機版網頁,加入官方提供的設置資源連結LINE Share button

31. 三月 2016 社群軟體 0

LINE_share
在看文章或逛網站時,會看到「用LINE傳送」分享按鈕,除了利用AddToAny Share SettingsSumoMe嵌入社群按鈕外,我們也可以直接利用LINE官方提供的程式語法,在網頁放入LINE的按鈕,讓讀者可以共享我們的文章給多位好友,或是傳送至群組聊天室和個人主頁中。手機版行動網頁與電腦版都能顯示圖示。







在網站放入「用LINE分享」按鈕教學

用LINE傳送,設置頁面,選擇LINE分享按鈕樣式和傳送訊息內容。可以自行前往設定或參考以下教學。
用LINE傳送按鈕分享教學

行動網頁

行動網頁可加入以下分享鈕(只有手機版的行動網頁才能看的到連結)



<span><script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"zh-hant","type":"a"});
</script></span>

網頁及應用程式

「用LINE傳送」,直接在網站放入以下程式碼語法(網頁版瀏覽器也會顯示)用戶點後會開啟LINE分享連結,若無安裝則不會有任何反應。

用LINE傳送

<a href="http://line.naver.jp/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F"><img src="[按鍵圖片的URL]" width="[按鍵的寬度]" height="[按鍵的高度]" alt="用LINE傳送" /></a>

WordPress專用

WordPress部落格除了用上述方法之外,也可直接在佈景主題中嵌入以下code,讓每篇文章都能顯示LINE分享連結。


用LINE傳送

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[按鍵圖片的URL]" width="[按鍵的寬度]" height="[按鍵的高度]" alt="用LINE傳送" /></a>



LINE官方有提供各種不同尺寸的分享icon,免費打包下載
用LINE傳送按鈕下載1



前往官方教學:「用LINE傳送」鍵設置頁面
用LINE傳送鍵圖片檔:LINE傳送鍵按鈕下載

延伸閱讀:WordPress嵌入社群分享鈕-Facebook,LINE,Google+…..