訂閱文章臉書頁籤設計－戀上草莓唇色範本教學
最近為了新書的撰寫一直在Facebook進行測試，要先跟被我的流彈打擾到的朋友說聲抱歉XD，左方的目錄新增了Facebook的標籤連結，以後會不定時發表一些自訂頁籤設計或教學，對這塊有興趣的朋友歡迎一起交流討論，還有可愛痞之族影像工作坊的粉絲專頁開張囉！裡面有一些工作室的作品，希望能不吝惜給個讚並幫忙推薦給朋友，感謝～＊。
Facebook自訂頁籤設計－戀上草莓唇色，主打新色口紅上市，顏色仿若鮮嫩欲滴的草莓，構圖甜美中不失個性，用簡潔的配色突顯主題，俏皮的箭頭指向粉絲專頁的Like Button（讚按鈕），提醒潛在消費者加入粉絲團，這也是Static FBML Design常見的手法之一；在設計技巧方面，採用了吸睛的滑鼠移動效果、加強宣傳力度的分享按鈕，而非像一般Static FBML Design僅以單圖呈現，增加互動性及記憶度。
舊自訂頁籤工具－Static FBML在製作滑鼠移動效果和平常的CSS排版沒有甚麼不同，但是，一旦牽扯到切圖，圖片的相接處就會出現難看的白色空隙，如果不切圖，整張圖製作滑鼠效果，分享按鈕就無法正常顯示，另外，十分弔詭的是分享按鈕只支援Firefox瀏覽器，以IE觀看則一律隱形不存在，而Social Plugin中的Like Button（讚按鈕）不能被使用在Static FBML，若官方新版本的Iframe自訂頁籤工具製作，分享按鈕須改用另外一種Facebook提供給外部網站的語法，能被所有瀏覽器支援、切圖間不會有間隔，也可以放置Like Button。
可愛痞之族影像工作坊粉絲專頁
http://facebook.com/qnop.fb
Facebook自訂頁籤設計－戀上草莓唇色
http://facebook.com/qnop.fb?sk=app_189284291092063
by雪球媽
- 滑鼠移動效果CSS語法
#test a {
width: 圖片寬度;
height: 圖片高度;
display: block;
background: url(http://圖片網址) no-repeat;
}
#test a:hover {
background: url(http://圖片網址) no-repeat;
}
- 滑鼠移動效果HTML語法
<div id="test">
<a href="#"></a>
</div>
- 分享按鈕HTML語法
置於<head>和</head>之間
<meta property="og:title" content="分享標題" />
<meta property="og:description" content="分享簡述" />
<meta property="og:image" content="http://縮圖網址" />
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
置於<body>和</body>之間
<a name="fb_share" type="button" share_url="http://分享網址"></a>
0 Comments:
Post Comments