我是怎么把博客粉絲轉到公眾號的

在這個互聯網時代，擁有流量就仿佛于擁有了一切。

我大約在 2014 年底開了自己的個人博客，當時就是想自己記錄點學***結，一個是方便查閱，二是鍛煉一下自己寫總結或者文章的能力，最初就是記錄一些日常生活、編程學習的小知識點什么的。

一次偶然的機會我接觸了爬蟲，當時用 Python 寫爬蟲的仿佛也不多，正好有一位學長有研究，我也就跟著他學了起來，學的時候也是自己總結，然后把一些文章發表到博客上，累積了十幾篇左右。不知道是什么原因，漸漸地好像爬蟲火了起來，Python 也火了起來，不知不覺地我發現我的博客慢慢地流量漲起來了，一天幾百、幾千一直到現在上萬的瀏覽量，SEO 也逐漸好了起來，說實話我當時都沒有想到，感覺還是不少運氣成分在里面的。

同樣地我也遭受著同樣的苦惱，這時候我突然想起來，我似乎還有個博客呢？最近寫文都專注于公眾號，沒太有心思打理自己博客了。我在想要是能夠把我的博客流量轉換到我的公眾號上來該多好呢？一來我的博客讀者可以關注到我的公號平時發的文章或通知，二來也著實能為自己的公號漲一點粉絲，這樣該多好啊？

思來想去我想到了一個法子，就是在瀏覽博客文章的時候，把后續內容的隱藏，留一個二維碼，可以通過關注公眾號解鎖。

當時設想效果圖就是這樣子的：

預期效果

文章在某個位置會漸變隱藏，同時浮現一個公眾號的樣子，需要掃碼才能解鎖。這時候讀者掃碼自動關注了公號，博客文章也自然而然地解鎖，這樣博客的讀者就自然關注到公號上面來了。

功能要點

一聽到這樣的法子，大家肯定就罵起來了，文章還要解鎖來看？每篇文章都要解鎖一遍嗎？以后如果再打開還需要次次解鎖嗎？

如果真的是這樣，那我情愿不做這個功能，因為這太損傷「用戶體驗」了。為了盡量減少用戶體驗的損失，這個功能必須要滿足以下幾點：

不要添加用戶登錄注冊機制，一旦增加了這個機制，流程可能會大大復雜化，導致用戶體驗急劇下降。

不能每打開一個頁面都要解鎖一次，讀者訪問了我的博客，只需要一次解鎖，即可全面解鎖博客所有文章。

讀者在關閉瀏覽器再重新打開瀏覽器瀏覽博客的時候，同樣不能讓讀者再解鎖一遍，要直接可看。

讀者在手機或其他移動設備上不方便操作，手機站點禁止啟用本功能。

如果滿足了這些條件，讀者在一篇文章里面只要掃碼解鎖了一次，那么就可以永久解鎖全站文章了，沒有繁瑣的登錄注冊功能，也不需要次次頻繁解鎖，這樣用戶體驗就非常好了。

為了達成這個目的，我就開始開發這個功能了。

識別用戶

那么怎么來實現呢？要實現上面的功能，其實最重要的就是來識別是哪一個用戶，也就是說，我怎么知道到底是誰在瀏覽我的博客呢？我怎么來專門針對這個用戶解鎖呢？

有的同學可能說那就用 IP 地址唄，技術角度是可以實現的，但是其實仔細想想，用 IP 地址是很不友好的。一來是很多用戶可能都是內網的 IP 地址，多個公戶共享一個公網 IP 地址，所以假如兩臺設備接入了同一個公網 IP，我是無法判斷到底解鎖哪一臺設備的。二來是，如果一個用戶換了其他的地方或者用了 VPN，IP 地址變了，原本解鎖的設備又變成非解鎖狀態了。這樣也不好。

那么最方便簡單的用來標識一個瀏覽設備的東西是什么？當然是 Cookies。Cookies 里面保存了瀏覽網頁時自動生成的 Session ID，而且每一個用戶都是不一樣的，這樣不就可以來唯一標識一臺瀏覽設備了嗎？

解鎖邏輯

好，那有了用戶的 ID，我怎么才能把用戶 ID 和我的公眾號關聯起來呢？當然是把這個 ID 發到公眾號后臺，我來存起來就好了。然后博客這邊定時檢測我這邊有沒有把這個 ID 保存，如果保存了，那就呈現解鎖狀態，如果沒有保存，那就呈現非解鎖狀態。

最開始我就設想，既然公眾號要掃碼關注，那么我能不能把這個 ID 也糅到二維碼里面呢？這樣關注公眾號的時候既能查詢到公眾號，傳遞過來一個 ID 作為參數，然后后臺處理一下存起來就好了。

你別說還真有這個功能，我在微信平臺官方文檔里面查詢到了一個「生成帶參數的公眾號二維碼」，生成的二維碼里面可以指定任意的參數，然后生成的二維碼圖案就是公眾號的二維碼，然后處理一下關注公眾號的回調函數就可以執行某一些操作了。看到之后我就想起來了很多關注公眾號自動登錄的功能就是這么做的。

但是經過一系列操作，發現了一個很悲傷的事情，只有服務號才有這個功能，我一小小的訂閱號，是沒有這個權限的，不能生產帶參數的二維碼。哎，難道涼了嗎？

不，沒有，既然這個參數不能通過二維碼傳遞，那就只好麻煩讀者手動把這 ID 輸入到我的公眾號了，我的小小的訂閱號還是有處理消息的功能的。我的公眾號后臺接收到消息，然后處理下這個消息 ID，然后存起來，那不就好了嗎？

說干就干！

隱藏文章

怎么開始做呢？那就從隱藏文章開始做吧。首先這個隱藏不能是真正的后臺的隱藏，需要在前臺隱藏。如果是后臺隱藏的話，搜索引擎所能爬到的我的網站內容就會缺失了，會影響 SEO 的。所以只需要前臺 CSS 隱藏一下就好了。

怎樣看起來隱藏得比較自然呢？就取文章的的一半的地方，把文章的下面部分用 CSS 藏起來，然后加個漸變效果就好了。

比如要隱藏一半的內容吧，首先可以獲取文章區塊的高度，然后把文章頁面高度用 CSS 強制設置為原來的一半就好了，這個很好操作，然后再在最底下加個漸變的樣子，仿佛底下還有文字的樣子。

這個 CSS 用 background 屬性就能實現了，參考代碼如下：

#locker?{

height:?240px;

width:?100%;

background:?-webkit-gradient(linear,?0?top,?0?bottom,?from(rgba(255,?255,?255,?0)),?to(#fff));

}

這里就是設置個 240 像素的區塊，然后從上面到下面是透明度漸變顏色就好了，整體效果是下面這個樣子：

image-20190914231647956

好，既然隱藏了，那么下面就加個提示吧，把公眾號的二維碼先放上，然后把那個 Session ID 放上，提示用戶關注公眾號后發送這個 ID 就能解鎖了，但這個 ID 又不能太長，多少呢？六位吧那就。

類似做成這樣的樣子：

效果

好，那么這個 ID 怎么獲取的呢？

剛才說了，從 Cookies 里面獲取就行了，找那個能夠標識 Session ID 的一個 Cookies 字段，然后摘取其值的其中幾位就行了，摘取的位置也有講究，前幾位仿佛重復率很高的樣子，后面幾位幾乎不重復，那就截取最后六位數字吧。

好，然后我就在博客里面加了這么一點 JavaScript 代碼來實現這個 ID 的提取：

function?getCookie(name)?{

var?value?=?";?"?+?document.cookie;

var?parts?=?value.split(";?"?+?name?+?"=");

if?(parts.length?==?2)?return?parts.pop().split(";").shift();

}

function?getToken()?{

let?value?=?getCookie('UM_distinctid')

if?(!value)?{

return?defaultToken

}

return?value.substring(value.length?-?6).toUpperCase()

}

這里 getCookie 方法是用某個名字獲取一個 Cookies 字段，getToken 方法是截取了 Cookies 這個字段值的后六位并做了大寫處理。

這里我的一個可以用來標識 Session ID 的 Cookies 字段叫做 UM_distinctid，就用它了。

這樣一來，每個用戶瀏覽的時候就能生成這樣的一個 ID 了，六位的。

勝利似乎越來越近了。

持久化存儲

這里就又遇到一個問題，剛才不是說還要在用戶關閉瀏覽器之后再重新打開，依然能保持解鎖狀態嗎？這就要求這個 ID 在用戶關閉又打開瀏覽器的時候是不變的。

這個怎么解？很簡單，反正已經是從 Cookies 里面讀了，這個 Cookies 持久化就行了，只要不在瀏覽器關閉后清除就行了，怎么辦？設置個過期時間就好。

由于我的站點是 WordPress 做的，所以這個功能自動有了，如果沒有的話用一些插件也能實現的。

公眾號處理

好，現在 ID 也有了，用戶掃碼把這個 ID 發到公眾號后臺就行了吧，然后公眾號對接開發者模式處理一下就好了。

這里就其實就很簡單了，其實僅僅就是把用戶的 OpenID 和這個碼存到了一個數據庫里面。我后臺是用 Django 寫的，所以用了 Django 里面的 Model，實現邏輯如下：

def?unlock(source,?target,?content):

"""

解鎖博客

:param?target:?微信平臺

:param?source:?用戶

:param?content:?用戶發來的碼

:return:

"""

Unlock.objects.get_or_create(openid=source,?token=content.upper())

return?reply_text(source,?target,?'恭喜您已經解鎖博客全部文章~')

就是這么兩行，插入了一條數據，然后返回了一個信息提示。

插入之后怎么辦呢？博客得知道我已經把這條數據插入進來了呀？那就再提供一個 API 查詢吧，實現如下：

def?is_locked(request):

"""

判斷是否已經解鎖

:param?request:?包含token的請求

:return:

"""

token?=?request.GET.get('token')

result?=?Unlock.objects.filter(token=token.upper()).first()

return?JsonResponse({

'locked':?False?if?result?else?True

})

把這個方法對接一個 API 接口，比如?/api/locked?token=xxxxx，就可以知道是否解鎖了。

所以，在公眾號后臺我就用開發者模式對接了這么兩個功能，一個用來存，一個用來查。只要用戶發送了這個能夠用來表示自己瀏覽設備的碼，我就存下來，然后博客定時請求這個 API 查詢狀態，如果返回結果是未解鎖狀態，那就繼續鎖住，如果是解鎖狀態。那就把博客解開。

博客端處理

那么博客端具體怎么來處理呢？就基本的輪詢就好了，定時幾秒查一次 API，然后把這個碼當做參數傳過去，然后根據查詢結果執行解鎖或非解鎖操作就好了。

核心代碼如下：

(articleSelector).ready(function?()?{

var?articleElement?=?$(articleSelector)[0]

if?(articleElement)?{

var?height?=?articleElement.clientHeight

var?halfHeight?=?height?*?0.3

var?token?=?getToken()

$('#locker').find('.token').text(token)

function?detect()?{

$.ajax({

url:?'https://weixin.cuiqingcai.com/api/locked/',

method:?'GET',

data:?{

token:?token

},

success:?function?(data)?{

if?(data.locked?===?true?||?data.locked?===?false)?{

locked?=?data.locked

}

},

error:?function?(data)?{

locked?=?false

}

})

}

}

})

這里就用基本的 jQuery 實現的，其實就是調了個 Ajax，也沒啥高深的技巧。這里唯一值得注意的一點設計就是，如果 API 請求失敗，這基本上證明我的 API 服務掛掉了，這里就需要把 locked 設置為 false，證明為解鎖狀態。這樣，萬一我的 API 后臺掛了，博客會直接是解鎖狀態，這樣就避免了讀者永遠無法解鎖了。這是一個細節上的設計。

至此，一些技術上的問題就基本解決了。

手機端處理

最后回過頭來看看，那個需求還沒有滿足？

讀者在手機或其他移動設備上不方便操作，手機站點禁止啟用本功能。那么怎么實現呢？很簡單，判斷一下瀏覽器的 User-Agent 就好了，這里實現了一個判斷是否是 PC 的方法：

var?os?=?function?()?{

var?ua?=?navigator.userAgent,

isWindowsPhone?=?/(?:Windows?Phone)/.test(ua),

isSymbian?=?/(?:SymbianOS)/.test(ua)?||?isWindowsPhone,

isAndroid?=?/(?:Android)/.test(ua),

isFireFox?=?/(?:Firefox)/.test(ua),

isChrome?=?/(?:Chrome|CriOS)/.test(ua),

isTablet?=?/(?:iPad|PlayBook)/.test(ua)?||?(isAndroid?&&?!/(?:Mobile)/.test(ua))?||?(isFireFox?&&?/(?:Tablet)/.test(ua)),

isPhone?=?/(?:iPhone)/.test(ua)?&&?!isTablet,

isPc?=?!isPhone?&&?!isAndroid?&&?!isSymbian;

return?{

isTablet:?isTablet,

isPhone:?isPhone,

isAndroid:?isAndroid,

isPc:?isPc

}

}()

這樣一來，調用 os.isPC 就可以知道當前瀏覽器是不是手機瀏覽器了。

在處理的時候加上這個條件判斷，就可以實現手機功能的解除了。

效果

可能大家想知道效果是如何的，這里就截圖看看了，現在這個功能已經在我的博客 cuiqingcai.com 上線了，大家可以進去體驗一下。

首先進去文章是這個樣子的：

解鎖前效果

然后關注了公號，發送了代碼：

發送代碼

發送完畢之后，大約一兩秒之后，抬頭看看博客，就是這個樣子了：

解鎖后效果

這已經就完成了解鎖和轉化，讀者可以全站永久解鎖我的博客文章，我也增長了粉絲。

現在過一段時間就會有讀者發來代碼解鎖，同時成為了我的粉絲，訂閱號助手看到消息如下：

后臺

現在依靠這種方法，每天可以穩定轉來幾百粉絲，終于不再顯得那么慘淡了！以后好好經營博客，搞好流量，也可以為公眾號這邊添一把火了。

以上便是這個博客轉化的思路分享和實現，大家也可以到我的博客 cuiqingcai.com 體驗一下，謝謝！

API TCP/IP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。