ブログ歴は１年ちょっとで、現在はインスタグラムの運用にも力を入れています。インスタアカウントはこちら
WordPressでブログを書いています。
インスタグラムのタイムラインを簡単で綺麗に貼り付けられる方法が知りたいです。あとギャラリーっぽくしたりカスタマイズする方法も合わせて教えてください。
この記事ではこのような疑問にお答えします。
ブログにインスタのタイムラインを貼り付ける方法の定番手段である、Instawidgeは2019年の９月あたりから使い物にならない状態に。
また似たようなサイトであるSnapwidgetは使い勝手はいいのだが、インスタ公式サイトに飛ぶのではなくてSnapwidgetの専用サイトに飛んでしまうため集客やマーケティング的には微妙。
「あーじゃあどれを使えばいいんだ！」と悩んでいる人が多いんじゃないでしょうか。
というわけで色々調べてみたところ、Wordpressで使うのであれば現時点ではこれがベストな方法だなというものに行き着いたので紹介したいと思います。
設定等は全て英語なのですが、自分の好きなようにカスタマイズもしやすいのでアプリとしては優秀な方じゃないかと思います。
その辺の設定方法も合わせて解説します。
WordPressブログにInstagramを貼り付ける方法
Smash Balloon Social Photo Feedを利用
結論としては、「Smash Balloon Social Photo Feed」というプラグインを使います。
１つの記事でいろんなプラグインやサイトを紹介する人が多いですが、僕的には一番いいやつだけさっくり紹介してくれよって感じ。
なのでこの記事ではそうします。
昔は「Instagram Feed」という名前だったようでググってもほぼこの名前で紹介されているため、多くの人がここで混乱します。
ちなみにInstagramと検索すれば１番に出てきます。
インストールするとワードプレス編集画面の左側にInstagram Feedという項目が出現しますのでクリック。
まずは「1. Configure」の項目から設定を行っていきます。
ここでは自分のインスタアカウントと提携させましょう。
PCでログインしたことがあればワンクリックで完了します。
あとここでとりあえずいじっておくべきところは「Check for new posts every」という箇所。
これは自分のインスタ情報をどのくらいの頻度で更新させるかというもの。
僕の場合は１日１回で充分だなと感じたのでDaysを選択。
次に「2. Customize」の設定に入ります。
ここではヴィジェットをどのようなレイアウトやデザインで表示させるかを設定する重要な項目です。
ヴィジェットに入れるのであればフィードのサイズは写真の表示枚数を選べばいい感じに表示されますので、特にいじらなくてもいいかなーと。
希望のサイズがある人はここで設定しておくといいでしょう。
レイアウトの方は有料サービスになるようです。
ぶっちゃけ無料でもクオリティは高いので充分だと感じます。
そのまま下に移動。
Number of Photos=合計で何枚の写真を表示させるか
Number of Columns=横何列で表示させるか
Padding around Images=写真周りの余白の大きさ
Disable mobile layout=横列が多い時に自動的にスマホ画面で調整してくれる機能
ここは上写真のように設定しました。
これで基本的な設定は完了です。
「3. Display Your Feed」に移動して赤枠のところをコピーします。
あとはヴィジェット画面でこのコードを貼り付ければ、設定したものが自動的に表示されます。
ちなみに上記のような設定だと、こんな感じの出来上がりです。
横ヴィジェットとかで無難に使いやすい形です。
フォトギャラリーっぽくする設定
ちなみに僕のこのブログをPCで見てもらえればわかりますが、こんな感じのワイドなフォトギャラリーっぽくしています。
旅系ブロガーなので、こういう感じがいいかなーと。
この設定方法は下記です。
まずポイントとしてはWidth of Feedを％ではなくてPX設定に変更。
あとは自分のブログを見ながらちょうど良いサイズに調整します。
下の「Set to be 100% width on mobile」をチェックするとスマホでは、普通にワイド100%表示にさせることができます。
これがマジで有難い機能ですね。
この辺の項目は先ほどと同じように好みで選びましょう。
というわけで、Wordpressでインスタ画面を綺麗に貼り付けられる方法を紹介しました。
【人気記事】
こんにちは、マーティンです。 フィリピン留学の英語学校でマネージャーとして働いていた経験があり、日本人学生向けに講師・カウンセラーもしていました。英語教育、英会話には自身有りです。 […]