みんビズ運用講座 お問い合わせや集客を増やすためのコツ 全3回 第3回 SNSの連携 執筆 原 一宣 株式会社Gazi工房 ホームページにおいて ソーシャルメディアを使ってビジネスに活用するためには その代表格であるSNS ソーシャルネッ トワーキングサイト のソーシャルプラグインと言われるパーツを導入する必要があります 今回は みんビズのコンテンツメニューに用意されている SNSのソーシャルプラグイン機能を利用して 簡単にSNSとの 連携をする方法を解説していきます 今回のテーマはSNSとの連携となります SNSと連携するためには 事前に登録し アカウントを作成する必要があ ります Twitter https://twitter.com/ Facebook https://www.facebook.com/ Google+ https://plus.google.com/?hl=ja Twitterと連携してみよう みんビズでTwitterと連携するには まず 管理メニュー から 設定 をクリック Apps から Twitter をクリックします 画面が切り替わるので JimdoとTwitterをリンクさせる をクリックしましょう 画面が一時的に Twitterへと移動しま す この時 ホームページと連携させたいTwitterアカウントであるかを確認しましょう 問題が無い場合は 連携アプリを認 証 をクリックします これで Twitterとホームページが接続された状態となりました 設定 から Twitter JimdoとTwitterをリンクさせる の順でクリック
Twitterアカウントを複数お持ちの方 個人アカウントと企業アカウントなど は JimdoとTwitterをリンクさせる をクリックし Twitterへ画面遷移した時に 連携させたくないアカウントが表示された場合 画面右上のアカウント 名横の 部分をクリックし 一度Twitterをログアウトすると下図のようにログインフォームが表示されます ここで 連携したいTwitterアカウントのユーザー名 または登録メールアドレス パスワードを入力し 連携アプリ を認証 をクリックします
フォローボタンの設置 今回のコラムで使用する コンテンツメニュー のボタンは上図の4つ
Twitterのフォローボタンを設置するには コンテンツメニュー から Twitter をクリックします 編集画面で Twitterのユーザー名 部分に 管理メニュー で設定した Twitterのユーザー名 を入力し お好みのス タイルを選び 保存 をクリックし 設定が終了です Twitterのユーザ ー名 数量 フォローボタン ホームページに表示させたいTwitterのユーザー名を入力します ホームページに表示させる最新のツイート つぶやき の数を指定できます 0 を指定した場 合 ツイートは非表示となります 表示するボタンのスタイルを ボタン 表示数 の2種類から選択できます フォローボタン ボタン の表示 フォローボタン 表示数 の表示 Facebookと連携してみよう Facebookとの連携する機能として みんビズでは いいね ボタン いいね ボックス シェアボタン の3種類の設置 が可能です シェアボタン については後述いたします
いいね ボタン とは ホームページを閲覧した人がホームページやブログに対して いいね と評価または意思表示 をするためのもので いいね ボックス は Facebookページのファン数や 最新のアップデートを表示させるものです いいね ボタン の設置 いいね ボタン を設置するには コンテンツメニュー から Facebook をクリックします 編集画面で いいね ボタン 部分にチェックを入れ スタイルを選び 表示方法や高さを調整し 保存 をクリックで設 定が終了です スタイル プロフィール写真 いいね ボタン のスタイルを Standard Button Box の3つから選択することができ ます プロフィール写真を表示する場合はチェックを入れます カラー 背景色に合わせたカラーを 白 黒 から選択できます 高さ 表示させる部分の高さを指定できます スタイルが Standard の表示 スタイルが Button の表示
スタイルが Box の表示 スタイルが Standard でプロフィール写真を表示した場合 いいね ボックス の設置 いいね ボックス を設置するには いいね ボタン と同じように コンテンツメニュー から Facebook をクリックしま す 編集画面で いいね ボックス 部分にチェックを入れ Facebook URL にFacebookページのURLを入力します 表示するアイテムを選び 高さを調整し 保存 をクリックで設定が終 了です 注記 Facebook URL に個人アカウントのURLを入力しても何も表示されることはありません いいね ボックス で表示されるのは Fa cebookページ のみとなるので ご注意ください
Facebook URL FacebookページのURLを入力します プロフィール写真 Facebookページに いいね をした方々のプロフィール写真を表示する場合はチェックを 入れます ストリーム Facebookページのストリームを表示する場合はチェックを入れます
カラー 背景色に合わせたカラーを 白 黒 から選択できます 高さ 表示させる部分の高さを指定できます Google+と連携してみよう Google+との連携機能は +1ボタン と シェアボタン Google+バッジ の3種類の設置が可能です +1ボタン とは Facebookの いいね ボタン とほぼ同じ使い方をする機能で Google+上で評価または意思表示を するためのものです シェアボタン はホームページの情報をGoogle+で共有 Google+バッジ は登録されているG oogle+のプロフィールページへリンクと サークルへの追加ができるものです +1ボタン の設置 +1ボタン を設置するには コンテンツメニュー から Google+ をクリックします 編集画面で +1ボタン 部分にチェックを入れ 表示させるサイズ スタイルを選び 保存 をクリックで設定が終了で す サイズ 小 中 標準 大 からサイズを選択できます スタイル 表示数 +1情報 無し から選択できます サイズ別スタイル 無し の表示 サイズ別スタイル +1情報 の表示
サイズ別スタイル 表示数 の表示 シェアボタン の設置 シェアボタン を設置するには コンテンツメニュー から Google+ をクリックします 編集画面で シェアボタン 部分にチェックを入れ 表示させるサイズ スタイルを選び 保存 をクリックで設定が終了 です サイズ 小 標準 大 からサイズを選択できます スタイル 横 縦 +１情報 無し から選択できます サイズ別スタイル 横 の表示 サイズ別スタイル 縦 の表示 縦表示に関しては 用意されているものが1種類のみとなるので サイズを指定しても変更されません
サイズ別スタイル +1情報 の表示 サイズ別スタイル 無し の表示 Google+バッジ の設置 Google+バッジ を設置するには コンテンツメニュー から Google+ をクリックします 編集画面で Google+バッジ 部分にチェックを入れ プロフィール/サイトURL にリンクさせたいGoogle+のプロフィー ルページのURLを入力します スタイルを選び 保存 をクリックで設定が終了です プロフィール/サイトURL リンクさせたいGoogle+のプロフィールページのURLを入力します スタイル Google+ バッジ ロゴ から選択できます カラー 背景色に合わせたカラーを 白 黒 から選択できます スタイル Google+ バッジ の表示
スタイル ロゴ の表示 シェアボタンの設置 みんビズは Twitter Facebook Google+を含め 様々なSNSに対し情報を共有することができる シェアボタン を設 置することができます シェアボタン を設置するには コンテンツメニュー から シェアボタン をクリックします 編集画面で 連携させたいS NS名にチェックを入れ 表示サイズを選び 保存 をクリックで設定が終了です サイズ ボタンのサイズを16px 32px 64pxから選択できます スタイル ボタンのスタイルを カラー グレースケール か選択できます SNSの選択 表示したいSNSまたはメールのボタンにチェックを入れます
全てのボタンを32pxのサイズで表示 上段がカラー 下段がグレースケール まとめ 今回解説したソーシャルプラグイン機能は 設置する場所によってリンクや意思表示されるページが変わります サイド バー テンプレートによってはフッター部分 に設置すると ホームにリンクし ホームページ全体に対しての いいね な どの意思表示や評価となります これに対し コンテンツ 本文部分 に設置をすると 設置したページに対してのものと なります これらを理解して SNSと連携をしてみましょう エキスパートコラムでは 大月 茂樹さんが ソーシャルメディアビジネス活用講座 全12回 を連載されています ソーシャルメディアをビジネスに活用するために必要なことを丁寧に解説されていますので そちらもぜひご覧くだ さい 原 一宣 はら かずのり 株式会社Gazi工房 代表取締役 JimdoExpert http://gazikobo.co.jp/ 1974年 福島県福島市生まれ 東北福祉大学社会福祉学部社会福祉学科卒業 山形県川西町在住 食品加 工会社 電子基板製造会社を経て フリーランスでWeb制作活動を開始 2007年に株式会社Gazi工房を設立 Webサイトの企画 設計 制作業務に従事 イラストやキャラクターデザイン 地域づくりの企画 助言 パソコン教室なども行う 元東北芸術工科大学 非常勤講師 クリエイティブユニット gabs メンバー CSS Nite in FUKUSHIMA実行委員 著書 HTML5+CSS3の新しい教科書 基礎から覚える 深く理解できる 共著 エムディエヌコーポレーション ああしたい こう変えたいが手にと るようにわかるCSS基礎 同 Copyright 2016 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/