iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

30天肝出購物網站系列 第 29

Day29:29 - Facebook、Line分享

mhoro,我是Charlie!

在Day28的時候我們完成了按讚系統,而今天我們將看看如何增加Facebook跟Line的分享按紐。

================================◉‿◉=================================

今天製作分享按鈕是使用vue-social-sharing的套件,網址如下:

https://www.npmjs.com/package/vue-social-sharing

先利用指令安裝套件:

*$ npm install –save vue-social-sharing

安裝完後,先到main.js當中使用套件:

import VueSocialSharing from 'vue-social-sharing'

Vue.use(VueSocialSharing)

主要分享的地方會是商品的詳情頁面,所以到productDetail.vue當中新增按鈕。

vue-social-sharing的按鈕語法如下:

<ShareNetwork
network=”sharenetwork”
url=”shared url”
title=””
description=””
quote=””
hashtags=””
>
</ShareNetwork>

各個參數的作用如下:

network – 分享網路,vue-social-sharing可以分享到Email、Facebook、Line、Linkedin等,
這裡我們將製作Facebook跟Line的部分。

title – 分享標題

description – 分享敘述

quote – 分享節錄,這部分的話只有Facebook有

hashtags – 標籤,支援Facebook跟Twitter

另外還有一些參數的部分,有興趣的話可以參考vue-social-sharing的github官方檔案:

https://github.com/nicolasbeauvais/vue-social-sharing

接著來新增sharebutton,我們可以先在google上面找尋適合的facebook圖片,把他p成分享按紐:

https://ithelp.ithome.com.tw/upload/images/20211013/20141666mw6UNyH6Oz.png

然後放到assets裡面,在ShareNetwork當中放入img:

<b-row>
	<b-col cols="3">
        <ShareNetwork
        network="facebook"
        :url="'http://127.0.0.1:8080/#/productDetail/' + item.id"
        :quote="'我在鍵盤貿易發現了好棒的' + item.name + '!快來鍵盤貿易發現更多商品!'"
        :hashtags="'keyboardmarket,鍵盤貿易,' + item.name"
        >
          <img src="@/assets/facebookShare.png" style="width:60px;height: 35px;" alt="">
        </ShareNetwork>
   </b-col>
</b-row>

就可以看到效果了:

https://ithelp.ithome.com.tw/upload/images/20211013/20141666hZVTThBLkv.png

還有LINE的部分,一樣找到LINE的圖片進行加工:
https://ithelp.ithome.com.tw/upload/images/20211013/20141666QnwzvEmcYp.png

接著加上分享按紐:

<b-col cols="3">
    <ShareNetwork
    network="Line"
    :url="'http://127.0.0.1:8080/#/productDetail/' + item.id"
    :title="item.name + '鍵盤貿易'"
    :description="'我在鍵盤貿易發現了好棒的' + item.name + '!快來鍵盤貿易發現更多商品!'"
    >
      <img src="@/assets/lineShare.png" alt="" style="width: 60px;height: 35px;">
    </ShareNetwork>
</b-col>

就可以看到效果了:
https://ithelp.ithome.com.tw/upload/images/20211013/201416663Utzkzib0m.png

這樣就完成了LINE跟Facebook的分享。

================================◉‿◉=================================

Day29結束了!在今天我們完成了Facebook跟LINE的分享,而明天就是總結了,See ya next day!


上一篇
Day28:28 - 後端&前端 - 按讚收藏
下一篇
Day30:30 - 總結
系列文
30天肝出購物網站30

尚未有邦友留言

立即登入留言