Facebook分享貼文自帶#Hashtag

Facebook分享貼文帶＃ | 前言（可跳過）

嗨!大家今天過的好嗎?(理科太太上身)

忽然想到有一陣子沒有發新文章了嗚嗚嗚

因為最近出國採購、又碰上新房裝修，還有婚禮、工作

光是找資料跟自己設計就花掉米粒大半的時間了QQ

對，米粒是自己設計再找統包

各種設計、樣式都要自己先想好，再請統包幫忙發包

還因為之前在進口磁磚公司上班，所以連磁磚都是自己挑好自己叫貨送到現場

等新房裝修完再寫一篇心路歷程 如果我有空的話 哈…哈哈哈…(老爺白眼

Facebook分享貼文帶＃ | Facebook分享框語法

總之這篇文是因為前陣子有個case需要將網站分享到Facebook的功能

ok!這個米粒很會，就把超連結加上嘛!

<a href='//www.facebook.com/sharer/sharer.php?u=[your url]", "_blank", "toolbar=0,status=0")'>按我分享</a>

這樣不就完成哩!

Facebook分享貼文帶＃ | 如何讓貼文自帶hashtag

這時候業主又說惹…

神:「我想自動帶入hashtag，不要讓用戶自己打」

我:「歐…歐K，我試試」

自帶hashtag!?那都是有看過沒用過的功能啊啊啊~~

但業(ㄕ)主(ㄣˊ)都說了，只好硬著頭皮研究惹QQ

找了很久搜尋各種關鍵字，中英都拿去餵狗

結果只找到一個網站有寫到相關資訊

超簡單的啦!

只要綁剛剛的網址加上&hashtag=%23

簡簡單單就完成囉!

https://www.facebook.com/sharer/sharer.php?u=[your url]&hashtag=%23

欸!?

改網址改hashtag怎樣都不行，完全帶不出hashtag

只要javascript:window.open跟#hashtag放在一起，就會行不通，但不用javascript:window.open，分享對話框就會變成滿版大螢幕

就像這樣

又不是在看電影

不管怎樣都弄不上去，雖然查到Facebook的API-FB.ui的可以輕輕鬆鬆帶入 (文件看這裡:「分享」對話方塊)

但但但…業主沒有appId，米粒又怎麼丟程式都吃不到…(萬念俱灰

Facebook分享貼文帶＃ | js控制對話框尺寸

這時候的米粒忽然想到!

如果網址一樣用

https://www.facebook.com/sharer/sharer.php?u=[your url]&hashtag=%23

然後JS額外寫呢?

於是乎米粒又各種關鍵字餵狗，在各種原文問答中終於找到相關語法啦QQ

只要在js中加入以下語法(還可以改對話框尺寸喔!)

$(document).ready(function() {
    $('.share').click(function(e) {
        e.preventDefault();
        window.open($(this).attr('href'), 'fbShareWindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
        return false;
    });
});

再把以下語法加進你HTML中，就可以囉!

<div class="share">
        https://www.facebook.com/sharer/sharer.php?u=[your url]&hashtag=%23[your hashtag no #]
</div>

Facebook分享貼文帶＃ | 中文標題轉址

如果你的hashtag是中文的話

也要先用https://urldecode.org/轉成url encode唷!

例如這樣:點我點我

※因為是只用超連結的方式，所以大家看到的還是跳窗對話框喔!實際尺寸請見下圖~

啊大家都點了的話，就順便幫米粒分享出去啦~霸偷霸偷~

感謝GOOGLE和朋友的教學，以及偉哉業主

那這次的文章就到這啦XD

Bye~

👉其它前端筆記 延伸閱讀 【前端筆記】新增WINDOWS及macOS快捷鍵|如何用Visual Studio Code架設前端開發環境（pug [ jade ]、sass、gulp、browser-sync）