Element XD lab
哥教的不是CG,是偷雞
快速導引

【Blogger】一次裝一整排分享按鈕的ShareThis,再加上反反盜拷解法

裝分享按鈕說複雜倒也不會,但是搞了半天才裝好一個,如果要把好幾個按鈕要裝在一起,又會出現大小不一致排排站不好看的樣子。

我在摸索不同的分享按鈕時,無意間找到了這個東西,如上圖紅框框處,只要幾個步驟就裝完一整排的分享按鈕,完全不用動到自定HTML,看起來排在一起挺協調,而且還有好多不同種類可以選擇,竟然還有Evernote,真是太有趣了趕快看下去。



安裝ShareThis

看圖就知道他是要搞社群分享的
首先按下綠色的Get Sharing



1.選擇Blogger,然後按右下角的Next



2.這裡是選擇樣式,還不是選擇按鈕種類,我選的是第二種,有數字但不會佔用高度,確定後再按右下角Next




3. 在Preview部分顯示的是預設按鈕的排列,下方為可自定增減想要的類型,用拖曳的就可以了,很方便,決定之後按右下角的Finish





第一次使用的話,請在左邊這一區註冊,只要輸入email跟密碼即可,或者是選擇上面黑色方塊的以別的社群帳號登入,然後按下Create Account。
我是選擇上面黑色方塊的以Google註冊,然後收到歡迎註冊的email,但是印象中沒有要確認的按鈕,這裡可能要請大家測試一下,應該不複雜。




接著出現這一個,左邊的類型是,當讀者按下分享按鈕,會在同一頁跳出小框框給讀者填入想要分享的訊息,這樣可以在同一頁做不同的分享動作,看起來比較方便,我選的是這一個預設設定。
右邊的類型是,當讀者按下分享按鈕,會重新導向至社群頁面,這個我就沒有測試了。
選完之後按下GO!






這是我最喜歡的畫面,看到這裡表示即將完工,根本不用進範本原始碼修改,選取你想要放這一排按鈕的網誌,然後按下新增迷你組件。



在不同平台或不同瀏覽器的情況下,有時候會出現一個白頁面,不用擔心,這只是小bug,完成動作之後他忘了關閉這個頁面,我們自己關掉就好。





到後台版面配置的地方,會看到有一個ShareThis小工具,代表已經裝好了,前台按鈕的位置已經排在文章下面,為了自己管理方便(有一說可以增加讀取效率?)請把它移到文章下方。

如下圖


馬上到前台看看,已經跑出一堆按鈕囉。



基本上完工~


在我的測試中,即使先前沒有依照這裡的方法裝過Facebook的外掛,預先寫入fb:app_id、fb:admins等等Facebook提供的程式碼,依這裡方法做出來的讚按鈕與分享按鈕,還是可以成功使用,這是讓我很驚訝的一點。



但是(寫教學文總要有這個但是)
我認為接下來的內容才是這一篇的價值。


反反盜考的解法

當我們安裝完這一個外掛時,他會很貼心(雞婆)地加上反盜拷的功能,以下圖為例,上半部反白處為網頁的內容,複製貼上到下方(以純文字軟體作範例)的時候,內容會打折扣,有< >的程式碼都不見了,同時最後方還出現
See more at: xoxoxoxooxxxxooxoxoxooxox

反盜考這個功能真的是見仁見智,用血汗結晶寫出來的辛苦文章,當然不會想讓人家隨隨便便就拷走(對,我說的就是那種四處抄文不打招呼去頭去尾轉到自己部落格的小偷),所以這功能是貼心的。

不過對我來說,如果這裡是一個不能拷貝程式碼的blogger教學網站,那還不如廢了算了,所以我覺得這功能令我困擾。

經過一番爬文得到解法,答案藏在官網CopyNShare Settings,要不是出了問題用大神爬文,我還真找不到這個網頁連結放在哪裡。



請打開ShareThis小工具




行數不多,請直接看反白的地方,前面一大串都是按鈕的程式碼,後面有一串數字,每個人的不一樣,但是格式都是英數夾雜,加上連字符號,舉例我的是這個
"ab435f57-32e0-4c00-98a0-46708a2706c1"




請在後方貼上這一串,要整串含第一個逗點
,{doNotHash:true,hashAddressBar:false,doNotCopy:true} 




請參考下圖反白處


存檔完成,請看再測試一次同樣文章內容,原文跟貼文的內容完全一樣,溫馨(惱人)的See more at:xxoxoxoxoxooxoxoxox也不見了



完工~

技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved