瞭解如何將 Facebook 的讚和分享、推文、Google 地圖、YouTube 及其他社交內容新增到您的 Adobe Muse 網站,並加以設定。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

Adobe Muse 的社交 Widget 可讓您迅速且便利地在網站中新增社交分享及追蹤工具。只要按一下滑鼠,您即可新增像是 Facebook 讚、Google 地圖、Tweet 等社交工具。  Adobe Muse 支援以下社交 Widget:

  • Adobe Muse 標誌
  • Facebook 讚
  • Facebook 追蹤
  • Facebook 留言
  • Google 地圖
  • Google+
  • LinkedIn
  • PayPal
  • Pinterest
  • Twitter 關注
  • Twitter 推文
  • Vimeo
  • Youtube

若要將 Widget 新增至您的頁面,只要從「視窗 > Widget 資料庫 > 社交」將 Widget 拖移並置入。閱讀以下文章以深入瞭解新增及配置社交 Widget 的方法。

新增社交 Widget

社交 Widget 可讓您輕鬆設定自訂 HTML,並將其嵌入 Adobe Muse 頁面。多數「網頁」Widget 提供的功能也可透過嵌入第三方網站 HTML 取得。與其在應用程式外產生程式碼,再將其作為嵌入式 HTML 貼入 Adobe Muse,您可以藉由從 Adobe Muse 內新增和設定網頁內容來節省時間。

若要新增社交 Widget 至您的 Adobe Muse 頁面,請執行以下步驟:

  1. 開啟您想要新增社交 Widget 的頁面。按一下「視窗 > Widget 資料庫」,再按一下「社交」。

    社交 Widget 的完整清單即會顯示。

    Adobe Muse 的社交 Widget
    Adobe Muse 的社交 Widget
  2. 拖移您要新增的社交 Widget,然後使用「選取」工具將其擺放入版面。

    拖移並將社交 Widget 置入 Design View。
    拖移並將社交 Widget 置入 Design View。
  3. 您可使用「選取」工具拖移所選 Widget 的控制點使其變形。您也可以按住並拖移 Widget 中央,將其重新放置在其他網站元素旁邊。

  4. 請注意在 Widget 右上方的藍色箭頭。按一下此箭頭以開啟「選項」面板。此面板可讓您配置社交 Widget。

    在已選擇 Widget 的期間,按一下 Widget 右上方的藍色箭頭,即可隨時存取「選項」面板。

    按一下在 Widget 右上方的藍色箭頭
    按一下在 Widget 右上方的藍色箭頭

    閱讀以下流程以深入瞭解每個社交 Widget 的配置方法。

配置社交 Widget

現在,您已將社交 Widget 新增至頁面,下一步即是配置這些 Widget 以符合您的要求。請參閱以下流程以深入學習 Adobe Muse 中每個社交 Widget 的配置方法。

  1. 若要配置 Adobe Muse 標誌,請從「Widget 資料庫 > 社交」拖移並放置該 Widget。按一下在 Widget 右上方的藍色箭頭。在「色彩配置」欄位中選取「淺」或「深」。

    配置 Adobe Muse 標誌 Widget
    配置 Adobe Muse 標誌 Widget
  2. Facebook 讚 Widget 讓您得以新增「讚」方塊,訪客可在此檢視與造訪與此網站相關的 Facebook 頁面。若要配置該 Widget,請從「Widget 資料庫 > 社交」拖移並放置 Facebook 讚 Widget。按一下在 Widget 右上方的藍色箭頭。您可以設定下列選項:

    • 動作」:從此欄位選取「讚」或「推薦」。根據您所選取的項目,顯示「讚」或「推薦」的數量。
    • 版面」:您可從此欄位選擇「標準風格」、「按鈕風格」或「方塊風格」。當您選取「標準風格」版面,按讚數會與鼓勵用戶註冊的文字一併顯示。當您選取「按鈕風格」,則只會顯示按讚數和推薦數。「方塊風格」版面會以方塊型式顯示按讚數和推薦數。
    • 色彩配置」:為此 Widget 選取「淺」或「深」的色彩配置。
    • 按讚的 URL」:輸入訪客應該會按讚的 URL。如果您想要網站訪客在即時網站的目前頁面上按讚,請選取「目前頁面」核取方塊。
    • 顯示傳送」:如果您想要在「讚」跟「推薦」之外顯示「分享」按鈕,請選取此核取方塊。
    配置 Facebook 讚 Widget
    配置 Facebook 讚 Widget
  3. 若要配置 Facebook 追蹤 Widget,請從「Widget 資料庫 > 社交」拖移並放置 Widget。按一下在 Widget 右上方的藍色箭頭。您接著可以配置下列 Widget:

    • 版面」:選取「標準風格」、「按鈕風格」或「方塊風格」,依您喜好配置 Widget 在網站中的顯示方式。
    • 色彩配置」:為 Widget 選取「淺」或「深」的主題。
    • 個人檔案 URL」:指定網站訪客應追蹤的 Facebook 個人檔案 URL。
    配置 Facebook 追蹤 Widget
    配置 Facebook 追蹤 Widget
  4. 若要配置 Facebook 留言 Widget,請從「Widget 資料庫 > 社交」拖移並放置該 Widget。按一下在 Widget 右上方的藍色箭頭。在「選項」面板,您可以配置以下選項:

    • 顯示行動使用者介面」:選取此核取方塊以顯示適合手機螢幕的不同 Widget 版面。
    • 色彩配置」:為此 Widget 選取「淺」或「深」的色彩配置。
    • 排序方式」:選取「排序方式」選項,以根據日期 (最舊或最新) 或社交排名來排序留言。
    • 文章數目」:指定您想要在網站上顯示的文章數目。
    • 要留言的 URL」:指定可供網站訪客張貼留言的 URL。如果您想要使用目前的 Adobe Muse 頁面作為 URL,請選取「目前頁面」核取方塊。
    配置 Facebook 留言 Widget
    配置 Facebook 留言 Widget
  5. 若要配置 Google 地圖,請從「Widget 資料庫 > 社交」拖移並放置 Google 地圖 Widget。按一下在 Google 地圖 Widget 右上方的藍色箭頭。從「選項」面板,您可以配置以下設定:

    • 地址」:新增地址以指定要顯示的區域。 
    • 地圖類型」:選取「道路地圖」或「衛星」,來選擇道路地圖或 Google Earth 衛星視圖。您也可以選取「混合」或「地形」作為地圖類型。
    • 展開標記資訊」:選取此核取方塊,在用戶點選地圖上的標記時顯示資訊視窗。
    • 縮放等級」:設定 Google 地圖的縮放等級。
    配置 Google 地圖 Widget
    配置 Google 地圖 Widget
  6. 若要配置 Google + Widget,請在「設計」視圖中拖移並放置 Widget。按一下在 Widget 右上方的藍色箭頭,開啟「選項」面板。您接著可以配置下列選項:

    • 尺寸」:選取 Widget 在即時網站上顯示的尺寸大小。選擇「小」、「中」或「標準」尺寸。
    • 附註」:選取與此 Widget 相關之附註文字的顯示位置。您可以將附註放置於行內作為泡泡,或是選擇不加任何附註。
    • URL」:指定您想要訪客點擊此 Widget 之後前往的 URL。如果您想要以目前頁面作為目的地,請在此欄位輸入目的地 URL,或選取「目前頁面」核取方塊。
    配置 Google+ Widget
    配置 Google+ Widget
  7. 若要配置 LinkedIn Widget,請在「設計」視圖中拖移並放置 Widget。按一下在 Widget 右上方的藍色箭頭,開啟「選項」面板。您接著可以配置下列選項:

    • 分享的 URL」:指定訪客點擊 Widget 時會前往的 URL。您可以在此欄位輸入 URL,或選取「目前頁面」核取方塊。
    • 計數」:指定連線計數。選取「右方」或「上方」以選取顯示的屬性。您也可以選取「」,不顯示連線計數。
    配置 LinkedIn Widget
    配置 LinkedIn Widget
  8. 使用「PayPal」Widget 設定線上付款交易。您可以將按鈕新增到頁面,然後將相關費用設定為,透過帳戶的電子郵件地址轉帳到指定的 PayPal 帳戶。按一下 Widget 右上方的藍色箭頭以配置以下設定。

    • 類型」:從此欄位中選擇一個按鈕類型。例如:「立即購買」、「查看購物車」、「新增購物車」等。
    • 按鈕影像」:為按鈕新增影像檔案。按一下「新增檔案」以瀏覽本機電腦的影像檔案。此欄位可作用於「自訂購買」、「自訂捐贈」、「自訂新增至購物車」,以及「自訂查看購物車」按鈕類型。
    • 尺寸」:顯示即時網站上的按鈕大小。您可以選擇小或大的尺寸。
    • 受款人電子郵件」:收件人的電子郵件地址。
    • 金額」:此欄位中的數值金額。
    • 貨幣」:執行交易的貨幣。
    • 項目名稱」:您可以指定項目的自訂名稱。
    • 項目標號」:為項目進行編碼或給予代碼。
    • 稅率」:項目的稅額。
    • 運送費用」:項目的運費。
    在 Adobe Muse 內配置 PayPal Widget。
    在 Adobe Muse 內配置 PayPal Widget。
  9. 若要配置 Pinterest Widget,請在您的版面中拖移並放置 Widget。按一下 Widget 右上方的藍色箭頭以開啟「選項」面板。您可以在此面板中配置下列選項:

    • 按鈕類型」:選擇您想要在網站中顯示的按鈕類型。從此下拉式欄位選取「標記」或「追蹤我」。
    • Pinterest 使用者名稱」:在此欄位中指定 Pinterest 使用者名稱。此欄位只會在您於「按鈕類型」欄位中選擇「追蹤我」時啟用。
    • 標籤」:指定標籤名稱,或是當您於「按鈕類型」欄位中選擇「追蹤我」時顯示的名稱。
    配置 Pinterest Widget
    配置 Pinterest Widget
  10. 若要配置「Twitter 關注」Widget,請在您的版面中拖移並放置 Widget。按一下在 Widget 右上方的藍色箭頭。使用「選項」面板來配置以下選項:

    • 追蹤 @」:指定此欄位中的 Twitter 控制點。依預設,該值會顯示於 Widget 之中。
    • 尺寸」:選取「」或「」,讓 Widget 以您所選擇的大小顯示。
    • 顯示使用者名稱」:如果您想要顯示已在 Widget 中指定的使用者名稱,請選取此核取方塊。
    配置 Twitter 關注 Widget
    配置 Twitter 關注 Widget
  11. 若要配置「Twitter 推文」Widget,請在您的 Adobe Muse頁面中拖移並放置 Widget。按一下在 Widget 右上方的藍色箭頭。您可以從「選項」面板配置下列選項:

    • 分享的 URL」:指定訪客點擊 Widget 時會前往的 URL。若要使用即時網站的目前頁面作為目的地,請選取「目前頁面」核取方塊。
    • 尺寸」:選取「」或「」作為 Widget 的尺寸大小。
    • Tweet 內文」:在此欄位中指定自訂 Tweet 內文。
    • 推薦 @」:指定此攔位中的 Twitter 控制點或使用者名稱。
    • 顯示計數」:如果您想顯示與該 Tweet 相關的數字計量,請選取此核取方塊。
    配置 Twitter 推文 Widget
    配置 Twitter 推文 Widget
  12. 若要配置「Vimeo」Widget,請從「Widget 資料庫」>「社交」新增 Widget。請按一下 Widget 右上角的藍色箭頭。在「選項」面板,您可以配置以下設定:

    • Vimeo ID」:在此為影片檔案指定 ID。
    • 影片控制鈕顏色」:輸入十六進位制代碼或從此欄位選擇想要的影片控制鈕顏色。
    • 顯示圖片」:若您要在影片播放時將圖片顯示為背景,請選擇此選項。
    • 顯示標題」:若您要顯示影片標題,請選擇此選項。
    • 顯示署名」:若您希望影片內顯示署名,請選擇此選項。
    • 自動播放」:若即時網站應自動播放影片,請選擇此選項。
    • 循環」:若您要在即時網站上循環播放影片,請選擇此選項。 
    配置 Vimeo Widget
    配置 Vimeo Widget
  13. 若要配置「Youtube」Widget,請從「Widget 資料庫」>「社交」新增 Widget。請按一下 Widget 右上角的藍色箭頭。在「選項」面板,您可以配置以下設定:

    • 影片 ID」:輸入要新增至網站的影片 ID。
    • 主題」:為此 Widget 選取「淺」或「深」的主題。
    • 進度顏色」:為進度列選擇白色或紅色。
    • 開始時間」:指定影片應在網站上播放的開始時間。
    • 顯示控制」:若您要在網站中的 Youtube 影片內顯示控制選項,請選擇此選項。
    • 允許全螢幕」:請選取此核取方塊,允許用戶以全螢幕模式觀看此影片。
    • 顯示資訊」:若您要在影片下方顯示影片資訊,請選擇此選項。
    • 顯示附註」:若您要在影片中顯示附註或圖層文字,請選擇此選項。
    • 自動播放」:若您要在即時網站上自動播放影片,請選擇此選項。
    • 顯示相關影片」:若您要顯示相關 Youtube 影片,請選擇此選項。
    • 循環」:若您要持續循環播放影片,請選擇此選項。
    配置 Youtube Widget
    配置 Youtube Widget

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策