JQUERY｜如何在部落格的圖片加上Pinterest的圖釘功能

在Flickr、Facebook及Twitter等社群網站之後，Pinterest 是近來興起的社群圖片分享應用網站，使用者可以按主題分類添加和管理自己的圖片收藏，並與好友分享。在網頁圖片中加入這個分享就是今天要學的語法。

1. 編輯範本

2. 貼上語法

找到</BODY>這個標籤，在這上面貼上語法：

<script> //<![CDATA[ var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfMmnt3NgiTV5FRGNwWdYnc7GS9XwRO2loFL2ilwEFDkzn6BADAQ2CaRMgGGmBgV690JfL023hyom2i5UX2tljiT38tZ56sfLcK7rPPlybNaODHHLmOKfvMWCQ5dTmgIec4R48A/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'> // This Pinterest Hover Button is brought to you by bloggersentral.com. // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details. // Feel free to use and share, but please keep this notice intact. </script>

，完成後記得儲存。

3. 自訂功能

• bs_pinButtonURLPinterest圖釘網址
• bs_pinButtonPos圖釘在圖片中的位置
  可以設定topleft,topright,bottomleft,bottomright這4個選項。
• bs_pinPrefix前置字串
• bs_pinSuffix後置字串
• 另外，如果有特定的圖片不想加上Pinterest圖釘功能，作法如下：
  
  

  <img class='nopin' height="391" border="0" width="400" src="http://1.bp.blogspot.com/-YCbNO9wFQrQ/UPrZegPAXVI/AAAAAAAACK8/b7p-0NuZScI/s400/photo.jpg">

  只要加上nopin這個css類別即可去除Pinterest圖釘功能了。