top of page

ソーシャルリンクと埋め込み

サイトにソーシャルアイコンを設置する方法や、外部サイトのブログ、note、ツイッター、instagram、pixiv、YouTubeなどを埋め込む方法を紹介します。

ギャラリーの埋め込みで紹介した方法と同じHTML iframeを使った方法です。

SNSのソーシャルアイコン

SNSのソーシャルアイコン

スクリーンショット 2020-08-15 18.12.00.png
スクリーンショット 2020-08-15 18.24.18.png

【ソーシャルアイコンの設置の仕方】

左カラムの「追加」から「ソーシャル」を選択

  ↓

ソーシャルバーの中から好きなデザインを選択

(横一列が1セットになっています)

  ↓

「ソーシャルリンクを設定」をクリックして編集​します

  ↓

​編集したいアイコンを選択して、アイコンのリンク先を編集

【アイコンの追加の仕方】

wixのソーシャルアイコンの一覧にないSNS(pixiv、minne、creemaなど)を追加したい場合は、アイコン用の正方形の画像を用意して​オレンジ色の「+アイコンを追加」から追加すると設定できます。

ツイッターを埋め込む方法

ツイッターを埋め込む方法

まずは、ツイッター公式が紹介しているタイムラインを埋め込む方法を御覧ください。

スクリーンショット 2020-08-15 22.27.50.png

図1

スクリーンショット-2020-08-15-22.30.jpg

図2 表示するデザインの選択画面

スクリーンショット-2020-08-15-22.30.jpg

図3 コード生成画面

スクリーンショット 2020-08-15 23.17.12.png

【ツイッターを埋め込むやり方】

https://publish.twitter.com/ に移動します。

  ↓

 

埋め込みたいタイムライン(自分のTwitterのURLなど)のURLを

入力します。(図1)

例:https://twitter.com/○○←自分のID

 

  ↓

 

​表示するデザインを2種類のうちから選ぶんですが、

右のデザインはちゃんと表示されないようです。(図2)

  ↓

生成されたコードをコピーします。(図3)

  ↓

wixの左カラムの「追加」→埋め込み→HTML iframeを選択

​詳しくは「ギャラリーについて」のページの下記を参照(図4)

3、HTML iframeを使ってTumblrやpixivを埋め込む方法

  ↓

「コードを入力​」​に先程コピーしたコード生成をペースト(図5)

これでtwitterに投稿した内容が自動でサイトにも反映されます。

​表示するサイズは枠のサイズを調整することで変えられます。

​また自分のタイムライン以外にもモーメントなども表示できます。

Tumblrやピンタレストを埋め込む場合もHTML iframeを使います。

instagramを埋め込む場合は、左カラムの「アプリ」から

「instagramフィード」をはじめinstagramの表示に特化した

アプリを使う方法もあります。

図4 HTML iframeを選択

スクリーンショット 2020-08-15 22.31.19.png

図4 wixの「コードを入力」でコードを貼り付ける

bottom of page