こんばんわ。たいそん(@ttaison)です。
皆さん、この記事にたどり着いたということは、さぞ
「SNSの投稿や写真を、自分のブログやホームページで表示したい、、、」
「できるだけカンタンに投稿を埋め込みできるサービスが知りたい、、！」
と思っているのではないでしょうか？
そんなSNSの写真をカンタンに表示できる最適のツール「snapwidget」の使い方を最初から最後までまるっとお届けいたします！
※この記事は２０１９年に執筆し直しました。
そもそもsnapwidgetとは
webサイトやブログにSNS(Instagram、Twitter、Facebook)の投稿写真を埋め込み表示するためのツールです。
ウィジェットといわれるブログパーツのようなもので、作成したURLを貼り付けるだけで、カンタンにブログやサイトへSNSの写真を埋め込み表示できちゃうすごいツールです。
しかも基本的な機能は無料で使用可能！
投稿の更新もすべて自動でおこなってくれるので、
更新の手間もまったくかかりません。
それではさっそく使い方を見てみましょう。
snapwidgetの使い方
まずはsnapwidgetのサイトに飛び、初めての方は画面右上にある
「SIGN UP」ボタンをクリックしてください。
クリックすると下記の画面に飛ぶので、メールアドレスもしくはFacebookアカウントで
snapwidgetに登録をします。
登録が完了すると、軽快なあいさつ文とともに、「ウィジェットを作りましょう！」という画面が出るので、画面に従って作成をしましょう。
画面内の青いボタン「CHOOSE SERVICE」を押すとスタート！
Q&Aのような形ですすめていき、項目を設定していくだけで
ウィジェット作成が出来てしまいます。
※最終的に下の画像と同じ画面になるかと思います。
よければ一番下の「CONFIGURE WIDGET」ボタンを押して、次に進みましょう。
snapwidgetにアカウントや表示レイアウトを設定する
次にウィジェットに表示したいアカウントを設定し、どのような画像表示レイアウトにするかを決めていきます。
ウィジェットに紐づけたいSNSのアカウントを登録
画面左の項目一番上に「Username」という項目があるので、ここをクリックもしくは
SNSのアカウント名を入力すると、SNSアカウントを紐づけるログイン画面が登場します。
Twitterを例に挙げると、下記のような画面が出ます。
ここに自身の紐づけたいアカウントを入力して、ログイン。
連携アプリを認証をしてください。
snapwidgetで表示する内容のデザインやレイアウトを調整する
「Username」以外の項目でデザインやレイアウトに関わる部分は、以下のとおりです。
①Description
作成したツールの説明文なので、特に必要ありません。
複数作るようならば、判別用につけておきましょう。
②Thumbnail Size
表示される一枚単位の画像のサイズを変更します。
③Background Color
画像の背景にあたる部分に色を付けたりできます。
貼り付ける場所の色と区別したい時は色付けするといいかも
④Photo Padding
画像の間にある隙間のサイズを調整します。
⑤Hover Effect
画像にマウスカーソルをあてた時にアニメーションみたいなエフェクトをあてる項目です。
ぼかしたり拡大したり、いくつかの項目を設定可能です。
⑥Sharing Button
画像の所にSNSなんかでシェアしてもらうボタンを設置します。
⑦Responsive
ウィジェットが閲覧する画面サイズに合わせて伸縮するかどうかを設定する項目。
いわゆるレスポンシブというやつですね。
上記の設定が完了したら一度「UPDATE PREVIEW」ボタンでどんな表示になるか確認してみましょう。
プレビューに問題がなければ、「GET WIDGET」ボタンでウィジェットを作成します。
snapwidgetで作成したウィジェットをブログ、webサイトに埋め込む
ここまできたらもうちょっとでゴールです。
表示されたコードを、ブログまたはwebサイト上でSNSの画像を表示したい場所
に貼り付けてください。
貼り付け方法が分からない方は、各ブログなどのカスタマイズを検索して貼り付けてみてください。
例：「Wordpress html 貼り付け」みたいな形で検索したら出てくると思います。
まとめ
うまく設置できましたか？
ちなみにsnapwidgetには有料プランもいくつかあり、それぞれの費用に合わせた機能が拡張可能です。
今度機会があったら使ってレビューしてみようと思います。（本当か？）
それではまた！
