WordPressでInstagramの投稿一覧を埋め込みたい方へ

営業の大魔王です。
 
SNSプロモーションツール「fvCuration」を利用して、 InstagramやTwitterの投稿一覧をWordPressへ埋め込みたいというお問い合わせが増えてきましたので、利用方法をまとめました。ご参考にしていただければ幸いです。
 
fvCurationを自社のWebサイトなどの独自のHTMLに組み込む際には、fvCuratonの「jQuery用のプラグイン」をご利用いただけます。
ですので、基本的にはWordpressで一般的なjQueryのプラグイン製品を組み込む形と同じになります。
 
注意事項:
動作対象jQueryバージョン
ver.1.12.4 – ver.3.1.1

1. head.phpに編集を行う

ヘッダー(head.php)にjQueryを読み込む際の記述を行う。
 

<?php wp_enqueue_sctipt(‘jquery’); ?>

 

2.投稿ページ、個別ページ内の表示した部分にfvCuration用のhtmlタグを記載する

 

<!-- 対象ラッパー要素 -->
<div id="fvcfeed"></div>

 

 
 

3. カスタムフィールドを使いタグを組み込む

 
 
ご参考:WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法
https://nelog.jp/custum-field-in-theme
 
1) 上記のサイトなどを参考に、WordPressのカスタムフィールドを使って、 「headタグ」の内、「/bodyタグ」の前に特定のコードを組み込むための準備を行う。
 
具体的な作業としては、「head-custom-field.php」 「footer-custom-field.php」を作成する。
 
2) SNSのフィードを表示したい固定ページもしくは投稿ページのカスタムフィールドに下記の手順を行う。
 
2-1) カスタムフィールドを表示させるために、wordpress上部から表示オプションで、カスタムフィールドをチェックする。
 

 
2-2) カスタムフィールドの新規追加をクリックして、名前に「head_custom」と入力して、値に下記を入力する。
 

<script src='//campaign.gnzo.com/js/embed.min.js'></script>

 

 
2-3) カスタムフィールドの追加をクリックして、名前に「footer_custom」と入力して、値に下記を入力する。

<script>
    jQuery(document).ready(function () {
       jQuery("#fvcfeed").fvcFeed(‘アクセストークン');
    });
</script>

※WordpressのjQueryの記述方法については、お気をつけください。
※アクセストークンについては、fvCurationの管理画面よりご確認ください。
 

 
 
以上で、公開します。
 
そうしますと、下記のようにWordpressの投稿ページ内に表示がされました!
 

 
ぜひ、Wordpressで構築しているサイトでのSNSキャンペーンをご検討の方は、fvCurationを一度お試しください。
 
fvCuration
fvCurationの7日間お試しの申し込み