13 11 月 2020

Google Maps API 嵌入方式與地址搜尋啟用

我們想要在網站上加入 Google Map API 功能,讓使用者可以使用 Google Map,該怎麼做呢?

自2018年5月3日起,Google Map API 開始收費了,如果您所使用的 Google Map API 是免費服務,您的地圖上會出現 “這個網頁無法正確載入 Google 地圖” 訊息,如果想要正常使用 Google Map API,以及相應的地址搜尋功能,您就必須使用付費服務,即您需要有效的 API 密鑰,並且在 Google Cloud Platform 帳戶啟用帳單結算功能,才能保證網站調用 Maps JavaScript API 次數,讓 Google 地圖正常運作。

不過若您是使用地圖嵌入(iframe)的話,則沒有這樣的影響。

Google Map API 提供用戶每月$200 美元的免費額度,可於使用地圖、路徑和地點介面集時折抵,因此雖然您申請的是付費服務,但是不一定會收到帳單唷!

 

首先,以您的 Google 帳號登入 Google APIs,網址為 https://console.developers.google.com/apis/dashboard

然後依序點下:GOOGLE MAP API → 新增專案。

接著,輸入專案名稱、帳單帳戶、位置。

建立憑證:點選左側的憑證按鈕,再點選”建立憑證”。

金鑰產生了,把它複製起來再貼到您的程式中吧!

 

然後,我們要限制此金鑰的用途,我們要限制它只能使用在我們的網站上,請點選 “限制金鑰”。

 

應用程式限制選擇”HTTP 參照網址 (網站)”,並點擊”新增項目”後,輸入您的網站網址(包含http或https),最後面加個符號*,代表接受此網域中的所有頁面使用。

 

接著,按下 儲存 按鈕。

返回資訊主頁,並確認您現在正在剛剛建立的專案中,確認後點入”啟用 API 和服務”。

 

請分別啟用以下服務,一次一個唷!

  • Maps JavaScript API
  • Geocoding API
  • Maps Embed API
  • Place API
  • Directions API

 

連結並建立您的帳單帳戶,需要輸入信用卡資訊。

 

以上完成後,輸入預算名稱,並設定預算花費。

 

以上,做到這邊就算是大功告成了。

 

Share this
03 12 月 2019

[Woocommerce] 運送方式設定之運送區域、運送選項以及運送類別

在woocommerce購物車中建立實體商品時一定會遇到運費設定的問題,如果您的商品皆已包含運費是最簡單的 (即一般的免運費),但如果您的運費會依尺寸、重量與不同類別的商品而有不同時,這樣在運費設定上就會有一些技巧,請參考以下說明。

運送區域

這裡以台灣地區進行說明,請點擊編輯。

接下來,您會看到有幾種不同的運送方式,每種運送方式皆可 啟用/關閉,或者進行編輯或是新增運送方式。

您可以設定各個運送方式須滿足的條件,例如,一個有效的免運費優惠碼、最小訂購金額、每筆訂單的最小金額或使用優惠碼、每筆訂單的最小金額以及使用優惠碼,等等。若有選擇優惠碼,則需搭配優惠券功能使用。


運送選項

運送選項中的設定可按照個人經營方式做勾選,一般來說如果要提供較為快速的結帳流程,建議勾選『在購物車頁面啟用運費計算』與『預設客戶帳單地址』,如果客戶沒有建立預設帳單地址,則在結帳時運送地址欄位會顯示為空白,當顧客於結帳時填寫一次後,就會自動在顧客的帳戶個人資料中同步建立。


運送類別

運送類別可以用來將相似類型的商品分在一組且可供一些運送方法使用 (例如運費均一價) 以提供種商品類別不同的費率。

比如說我們先建立一個 “熟食類” 的運送類別,別名可手動輸入也可留空讓系統自動產生。

回到運送區域,選擇描述是單一費率的運送方式按一下編輯,若沒有也可新增運送方式,但一樣要選擇單一費率。

進行設定時您會看到剛剛所新增的運送類別,輸入費用金額後考按一下 儲存修改 後離開。

接下來進行商品的編輯,後編輯商品即可看到已有一個新的運送類別,選擇新的運送類別後,此商品即會套用此類別所設定的運費。

這些設定有些複雜,可能需要花點時間練習一下喔,加油!

Share this
13 6 月 2018

如何讓顧客可以使用InstaGram帳號登入並取得照片

當顧客在登入網站時,該如何使用顧客自己的 InstaGram 帳號登入必且取得顧客自己的照片呢?網站管理員必須先取得 InstaGram 相關權限之授權方可進行,也就是必須先在 InstaGram 提交審查。

開始申請之前…

  1. 一部登入示範影片網址,即影片已經上傳至網路上也有其專屬網址。
  2. 隱私政策網址。
  3. 服務條款網址。

請特別留意步驟二之『應用程式編號』以及『應用程式密鑰』,如果您不是程式開發人員,請將此2資料提供予開發人員。


步驟一

登入 InstaGram Developer 開發人員 → https://www.instagram.com/developer/


步驟二

登入後請點一下『Manage Client』,接著點『Register a New Client』註冊一個新的應用程式。

填寫以下欄位資料…

  1. Application Name:應用程式名稱,自己好記就可以囉!不過不可以使用 Instagram、IG、insta 或是 gram 這類字詞作為應用程式的名稱。
  2. Description:應用程式描述。這支應用程式的用途,您將會怎麼使用它呢?
  3. Company Name:公司名稱。
  4. Website URL:網站網址,填寫完整包含 https://…..。
  5. Valid redirect URIs:https://您的網址/tshirtecommerce/upload_instagram.php (此為範例僅供參考,實際網址請詢問您的程式開發人員)。
  6. Privacy Policy URL:隱私權政策網址

取消核取 Disable implicit OAuth 後,按一下 Register 按鈕。


步驟三

在列表中找到您剛剛您建的應用程式,按一下 MANAGE。

再次確認 Disable implicit OAuth 是沒有核取的

提交送審 Start a submission

接下來的 Permissions Review 要開始填寫送審的相關資料了,第1個步驟選擇『My app allows people to login with Instagram and share their own content.』

第3個步驟請用英文鉅細靡遺說明您要如何使用這個應用程式,並附上說明影片的網址。

以上完成後,請按下 Submit 按鈕送出審核。

不過要注意的是,審核結果並不會以 email 進行通知,您要自行到 Permissions 進行確認。

Pending Review 表示處理中。


結語

以上步驟到此即告一段落,剩下的部分就是等待 InstaGram 審查通過,也有可能未能通過,就要再確認一下問題在哪裡了,祝您成功。

Share this
12 6 月 2018

如何讓顧客可以使用FaceBook帳號登入並取得照片

當顧客在登入網站時,該如何使用顧客自己的 FaceBook 帳號登入必且取得顧客自己的照片呢?網站管理員必須先取得 FaceBook 相關權限之授權方可進行,也就是必須先在 FaceBook 提交審查。

開始申請之前…

  1. 您必須先授權 Facebook 存取信箱,才可使用 Facebook 登入功能。若尚未授權 Facebook 者,請到 Facebook → 關於 → 聯絡和基本資料 → 電子郵件收信認證。
  2. 準備一張應用程式的代表圖片,尺寸1024×1024。
  3. 一部登入示範影片。
  4. 隱私政策網址。
  5. 服務條款網址。

請特別留意步驟二之『應用程式編號』以及『應用程式密鑰』,如果您不是程式開發人員,請將此2資料提供予開發人員。


步驟一

登入 FaceBook Developer 開發人員 → https://developers.facebook.com/

選擇 新增應用程式

建立新的應用程式編號,自行輸入方便辨識的即可。

在 FaceBook 登入中按一下『設定』。

在『網站』上按一下。

接下來,網址部分請務必填寫 https 開頭的網址然後按『Save』。


步驟二

接著切換到 設定 → 基本資料。

請特別留意 應用程式編號 以及 應用程式密鑰,如果您不是程式開發人員,請將此2資料提供予開發人員。

應用程式網域:如果您的網站首頁網址為 https://www.abc123.com,則請填寫 www.abc123.com 和 abc123.com 共 2 個。

隱私權政策網址以及服務條款網址也請分別輸入。

完成後按一下頁尾『儲存變更』。

 


步驟三

切換到 → FaceBook登入 → 設定。

用戶端 OAuth 登入:設為『是』。

網路 OAuth 登入:設為『是』。

強制採用 HTTPS:設為『是』。

對重新導向 URI 使用 Strict 模式:設為『是』。

有效的 OAuth 重新導向 URI:設為 https://您的網址/tshirtecommerce/upload_facebook.php (此為範例僅供參考,實際網址請詢問您的程式開發人員)。


步驟四

切換到『應用程式審查』將『是否將應用程式公開』設為『是』。

接著我們需要提交新的項目並獲得批准才能取得FaceBook帳號中的照片。

在『提交項目以進行批准』點擊『開始提交』。

找到 user_photos,並點擊 Add 1 Item 按鈕。

因為這項功能並不是預設開放的,因此要向FaceBook解釋說明我們要怎麼使用它,點一下『新增詳細資料』吧!

在接下來的畫面中….

  1. 你的應用程式使用 user_photos 的狀況如何?選擇『讓用戶列印自己的 Facebook 相片,或是使用這類相片製做個人化的產品』。
  2. 你的應用程式在哪個平台上使用 user_photos?選擇『開啟網站』。
  3. 填寫『詳細的逐步指示』。
  4. 上傳『螢幕錄影檔案』。必須顯示的內容為 用戶如何使用 Facebook 帳號登入 以及 用戶看到此權限運用在您應用程式中的方式。
  5. 按下儲存。

結語

以上步驟到此即告一段落,剩下的部分就等FaceBook通知 審查通過 或是 審查修改了,祝您成功。

 

Share this
21 5 月 2018

什麼是主機的流量?

主機的流量指的是『主機允許使用的傳輸流量』,流量通常是以月為單位做計算,當虛擬主機一開通上線,網站開始運作,主機上的流量即開始計算,一直到次月1日凌晨歸零並重新計算當月的傳輸量。

若用比較簡單好理解的方式說,如果有某個人,他用電腦開啟了一個圖文並茂的網頁,這網頁上所使用的資料共有1MB,從主機傳輸到這個人的電腦,就會花費了1MB的流量,如果有100人觀看這個網頁,那麼主機就會傳送100MB的資料量出去,也就是使用了100MB的流量。

流量就像是水塔,這個水塔固定每個月1日凌晨會裝滿,只要有人開始用水,水塔的水就會開始減少,如果月中水塔的水就用完了造成缺水或服務中斷的情形,那麼就要額外購買補充,如果這樣的情形成為常態,也就是缺水的狀況常常出現,那麼就要考慮購買更大的水塔以供應流量需求了。

流量的造成有正常使用造成的,也有搜尋引擎到您的網站上蒐錄資料造成的,也有的是遭人惡意使用造成(如惡意往復掃描網站造成無謂流量損耗)。

如果您想要了解流量損耗的原因,可以請您的主機公司提供報表或資料給您。

Share this
16 5 月 2018
16 5 月 2018

[DIY線上設計(進階版)] 附加功能 – Control Layout Product

可以讓管理員設定顯示或隱藏任一位於編器上的選單,它可以….

  1. 對指定單一的商品
  2. 全局設定

指定單一的商品

新增/編輯商品時,先找到 Product Data 區塊後,點開 Advanced 頁籤。

 

找到 Change product layout 後,核取打勾可以點開一堆設定。

全局設定

而在這裡則是可以設定預設的所有編輯介面。

Share this
16 5 月 2018
16 5 月 2018

[DIY線上設計(進階版)] 附加功能 – Color Picker

允許可以讓管理員設定該項商品的顏色列表是固定色或是可由選色器選擇。

顏色列表會用在很多地方,像是文字、描邊、商品顏色等,舉凡會用到選色的地方都可以使用。

設定商品資料時,可分別對該項商品進行設定,當 Product use color picker 為核取打勾時即生效啟用。

 

Share this
16 5 月 2018

[DIY線上設計(進階版)] 附加功能 – Shape Image

允許使用者上團片後,進一步進行多邊形裁切。

載入圖片之後,點一下左邊編輯功能浮動視窗的 Shape。

點左下角選擇想要裁切的形狀,如心形。您可以移動區域,也可以縮放。

點左下角選擇想要改變裁切的形狀

核取打勾 解鎖等比例 Unlock proportion。

解鎖後就可以任意改變比例和尺寸了

最後,儲存生效您要的裁切結果。

 

 

 

Share this

© 2020 60km.com. All rights reserved.

Click Me