如何把Facebook的like功能做到shopify页面

今天我们说下facebook的like功能,Facebook用户可以通过点击按钮对你的facebook page做出喜欢关注的行为,对于用户开发,精准营销,需求挖掘等等商业行为有很大帮助。

先说为什么要把facebook like做到shopify页面上?

我们引流渠道很多,SEO,付费广告,红人等等,流量进入后,往往很大比例上不能转化,但是中间有很多感兴趣,却因为一些小小的遗憾跳出了,那么我们要去留住这样的客户并努力转化成为订单。

如果我们在网站内加入like功能,而且有展示他的朋友也Like了,并有激励的语言,Like可以获得最新活动信息,折扣信息等等,如果他点击了,那么转化的可能性就很大,Like的基础是兴趣,需求还有懒惰,Like不像看直播刷飞机之类的,没有任何成本,点击一下即可。

好处还有很多,增加用户粘性,搜集受众信息等等,自己去想吧,也许你是因为了解好处才来找如何加入按钮的,那么我也不废话了,开启码奴状态。

添加facebook like到shopify页面

AddThis插件版,Facebook原生版,两个版本各有各的好处。
AddThis免费,选择样式,生成,安装代码即可。
原生版呢,正宗的Facebook产物,需要代码基础,不过也不难。如果整不明白可以加qq群:588470272。
至于用哪个自己看完下面的对照自己斟酌吧,我提供方法使用效果就看你们的造化了。^O^

AddThis版

注册AddThis,Addthis这个功能还是很强大的,有分享,关注,订阅等等网页工具。
选择Follow Button,选择Follow的样式类型,然后添加对应的社交账号名称,设置风格,保存,选择程序Shopify 按照引导安装即可。



这里只粗略一说,因为我感觉这个工具并不能把懒惰的习惯最大化,做出来是点击进入Page,然后再like的动作,但是样式风格还算好看,看个人喜好吧。而下面我要说的原生版则不同,更为方便,切展示风格原汁原味。

Facebook 原生版

我们先打开https://developers.facebook.com/docs/plugins/like-button

这里面他已经给出了教程,操作很简单,添加上你的facebook page链接,我的是https://facebook.com/adidog.pet,然后调整样式,获得代码。

代码分为两个部分,上面的安装代码位置是theme.liquid文件内的</body>上方即可。

第二段代码要放置在你想显示Like按钮的位置,我这里举例产品页面,我们放到描述的底部。




第一段安装在theme文件</body>之前.

第二段代码位置查找方法,先打开Templates文件夹内的product.liquid,这里面一般会引用Sections内的product-Template.liquid之类的名称如:{% section "product-Template" %}

有的会直接或者再引用Snippets内的product-Template.liquid之类的名称,如:{% include 'product-Template' %}

我们打开这个代码文件后,Ctrl+F查找哪个文件里面有(itemprop=“description”),点击这段代码,会有橘黄色高亮显示,然后下面代码结束位置也会有一个代码高亮显示。


那么我们就在这个代码下方放置第二段代码,即可保存刷新查看效果。

我的演示模板结构是,Templates文件夹内的product.liquid,引用了Sections内的product.liquid,然后这个文件又引用了Snippets内的product.liquid,比较绕对不对,简单的方法,打开一个就你搜索那段代码,有的就是对的,准没错。

有些模板有多个描述布局,也就是搜索itemprop="description"的时候是多个,那么我们随便放置查看效果,如果不行我们换另外一个。

这个Like的好处是,如果你登录了点击下直接Like,如果没有登录,他它会一个小窗口登录即可;它还可以展示你朋友圈内Like这个Page的用户,一个很容易获得用户信任值的小细节;再者就是原生态,配色样式等等接地气,没有违和感,点击概率高。

OK,讲的应该比较详细了。

2 个赞

:crazy_face:

感谢分享,如果图片跟图片还有图片跟文字之间有一个换行,那看起来就更舒服了

:crazy_face: :crazy_face: :crazy_face: :crazy_face: