テーマBLOGお知らせ機能紹介お客さまの声オカンでも分かるWPお問い合わせまずは無料体験!FacebookTwitterTOPBLOGオカンでも分かるWPWordPressへのFB・Twitter・Instagramのタイムライン埋込方法WordPressへのFB・Twitter・Instagramのタイムライン埋込方法2016.12.05オカンでも分かるWPTweetWordPressで作ったHPに、SNSのタイムラインを埋め込む方法についてご紹介します。FacebookやTwitterなどのSNSは、Web集客では非常に大切。下のように、タイムライン形式で表示しているページも多いですよね。コーディングなどの難しいことをしなくても、WordPressなら簡単にSNSを埋め込むことができます。本稿ではこの方法をご紹介していきます。SNSを埋め込む方法それではWordPressで作ったHPに、SNSのタイムラインを埋め込む方法について見ていきましょう。Standard(バージョン1.1)のフッターにSNSウィジェットを表示していきます。準備編まずは準備として、SNSを埋め込む設定をします。WordPressの管理画面を開いたら、画面左の「外観」から「ウィジェット」を選択します。下のような画面が表示されたでしょうか。「ウィジェットを追加」ボタンをクリックしてください。1に「テキスト」ウィジェットが追加されました。後ほど、ここの「内容」欄を使うのですが、ひとまず「保存」ボタンを押して途中経過を保存しておきましょう。3」にも「テキスト」ウィジェットを追加しておいてください。Facebookの埋め込みそれではFacebookの埋め込み方法に入っていきましょう。Facebookにログインした状態で、下のリンクをクリックしてください。ソーシャルプラグイン表示されたページにて、下のように必要事項を入力して「コードを取得」ボタンを押します。「ステップ3」のところにあるコードをコピーしてください。1のテキストウィジェットの「内容」欄にペーストして「保存」ボタンをクリック。ここまで出来たら、HPを見てみてください。Facebookのタイムラインが表示されましたね!Twitterの埋め込み次はTwitterです。Twitterアカウントにログインしたら、設定画面を開いてください。左側のメニューから「ウィジェット」をクリックします。「新規作成」から「プロフィール」を選択すると、下のような画面がひらきます。あなたのTwitterのURLを入力してEnterを押します。Timeline」をクリックしてください。※ここでもう一度URLの入力を尋ねられる場合があります。その際はあなたのTwitterのURLを入力してください。下のような画面になったでしょうか。options」をクリックすると、タイム欄の幅や高さなどの設定ができます。必要であればFacebookと同様に幅(width)と高さ(height)の設定をしておいてくださいね。Code」をクリックすると、HPに貼りつける用のコードがコピーできます。2のウィジェットの「内容」欄にコピペします。保存をしたのち、HPでの表示を確認しておきましょう。Instagramの埋め込み最後はInstagramの埋め込みです。いくつかの方法があるのですが、SnapWidgetを利用した方法が簡単でおすすめ。下記のリンクからSnapWidgetのページをひらいてください。TODAY」をクリックして、アカウントを作成してください。アカウント登録ができたら、左上のSNS選択欄から「INSTAGRAM」を選択。photos.」をクリックしましょう。ウィジェットの作成ページが表示されました。WIDGET」をクリック。3のテキストウィジェットに貼りつけます。※タイムラインの幅と高さを変更したい場合は、埋め込み用コードの「width:〜px」(幅)と「height:〜px」(高さ)の値を書きかえておきましょう。下のように、Instagramのタイムラインが表示されたでしょうか?ウィジェットの調整についてさて、上の画像をもう一度見てみてください。3つのウィジェットのサイズ(横幅と高さ)がまちまちです。これではちょっと見た目が悪いですよね。Standardのデモサイトのフッターは横幅300px、高さ400pxなので、各SNSもそれに合わせてコードを作ると下の画像のようにきれいに揃います。あなたのサイトに合わせた幅と高さの設定を試してみてください!あとがきWordPressサイトにSNSのタイムラインを埋め込む方法についてご紹介しました。記事内ではフッター部分に貼りつけましたが、ウィジェットのテキストを使えばフッターやサイドバー等どこにでも埋め込みができます。株式会社ninoya代表取締役はじめまして。Standardは多くの法人・個人事業主さまにご利用いただいています。ご不明な点がありましたらどうぞお気軽に問合せフォームよりご質問ください。Standardは事業を営むあなたのためのWordPressテーマです。多くの事業者が選ぶその理由を、あなたの目でお確かめください。ver2.0をリリースしました記事一覧へ*広告を任意で表示/非表示にできます分からないことはこちらFAQページよくある質問をまとめています。オカンでも分かるWordPressカスタマイズ方法等をまとめています。テクニカルサポートお悩みに直接回答いたします。株式会社ninoyaブログサイドバーにこのようなプロフィール欄を掲載することができます。見出し・名前(社名)・役職・画像・テキスト・SNSアイコンを自由に設定することができます。HTML入力は不要です。Standardはレスポンシブデザインで設計されています。お手持ちのタブレットやスマートフォンにてデザインをご確認ください。画像を貼ってURLを設定するだけで、自動的にサイズが調整されバナーとして活用できます。告知タイトル画像を使わずに、このようにテキストだけで指定のURLに飛ばす告知欄をつくることもできます。ダミーの電話番号が表示されます。