どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
FacebookページやTwitterのタイムラインを、ワードプレスブログのサイドバーに表示することができますが、各SNSの方で埋め込みコードを生成する必要があり、少し面倒なんですよね。
Google＋ページに関しては表示する方法がわからなかったので、長らく放置していましたが、この３つのSNSを超簡単にブログに埋め込める方法が見つかりました。
その方法というのが、多機能プラグインの「Jetpack」なんですが、ワードプレスに導入すればSNSの埋め込み用ウィジェットが追加されるので、あとはパパッと設定するだけで表示させることができます。
そこで今回はJetpackのウィジェットを使って、３つのSNSをブログに埋め込む方法を解説していきたいと思います。
SNSアカウントの取得がまだの方は
ここでご紹介する方法は、Facebookページ・Twitter・Google＋ページのアカウントを、すでに取得・作成されていることが前提となっています。
もしもまだ取得されていないという場合は、以下の記事の内容を参考にして取得作業を完了させていきましょう。
| Facebook：ビジネス向けFacebookページの作り方や必要になる６つの設定について Twitter：Twitterのアカウントを複数作成できる！Gmailならメアド１つで超簡単 Google＋：google+アカウントの取得からビジネス用ページを作成する方法 |
上記３つのSNSの準備が完了したら、次にJetpackプラグインをワードプレスブログに導入していきます。
Jetpackをワードプレスに導入する
Jetpackは通常のプラグインと違って、「WordPress.com」のアカウントが必要になるので、プラグインをインストール&有効化した後は、アカウントを取得する流れになります。
作業の手順については、Jetpackプラグインを導入する方法で解説していますので、わからないという方は参考にされてみて下さい。
プラグインが導入されると様々な機能が使えるようになりますが、今回はSNSの埋め込み用ウィジェットしか使わないので、基本的にはすべてスルーします。
ワードプレスの管理画面左メニューから、「外観」⇒「ウィジェット」に移動すると、色々とウィジェットが追加されているはずです。
SNS用ウィジェットで埋め込み
それではFacebookページ・Twitter・Google＋ページを埋め込む設定方法について、順にわかりやすく説明していきます。
Facebookページの設定
ウィジェットの一覧に「Facebook ページプラグイン (Jetpack)」があるので、追加したい場所にドラッグ&ドロップまたはクリックで選択します。
ウィジェットを追加すると入力できる項目が出てきますが、ここで必要になるのは「Facebook ページ URL」だけなので、それ以外は任意で入力・選択して最後に『保存』をクリックします。
「Facebook ページ URL」は個人ページの方ではなく、Facebookページ画面のブラウザ上に表示されているURLになります。
幅や高さなどは自分のブログに合うものを、お好みで調整されるといいかと思いますが、サイドバーに表示させるなら「幅300px × 高さ400px」くらいがいいでしょう。
これでFacebookページの設定は完了です。
Twitterのタイムラインの設定
次に「Twitter タイムライン (Jetpack)」のウィジェットを、同じ要領で任意の場所に追加しましょう。
Facebookの時よりもレイアウトやカラーなどの詳細な設定ができ、ここでの必要な設定は「ウィジェットタイプ」と「Twitter ユーザー名」です。
タイプは「プロフィール」と「ウィジェット ID」が選択できますが、ここは「プロフィール」にして下さい。
ユーザー名はTwitterアカウントの「＠」から始まる名前を入力します。
あとはデザインなどを調整して『保存』すれば、Twitterの設定は完了となります。
Google＋ページの設定
最後に「Google+ バッジ (Jetpack)」のウィジェットを、同じ要領で好きな場所に追加して下さい。
Google+の入力項目では、「ウィジェットの種類」と「Google+ URL」の設定が必要になります。
種類は「人ウィジェット」「ページウィジェット」「コミュニティウィジェット」があり、ここではGoogle+ページを表示させたいので、「ページウィジェット」を選択します。
URLはGoogle+ページの左メニューにある、「プロフィール」内のブラウザ上に表示されているURLになります。
カスタムURLにしていない場合は、たくさん数字が並んでいるかと思います。
あとは表示幅などを調整して『保存』をクリックすると、Google+ページの設定は完了となります。
フッターの方がブログの表示速度が速い
私のブログではサイドバーではなく下部のフッター部分に、３つのSNSの埋め込み用ウィジェットを表示させています。
今まではサイドバーに表示していたんですが、ワードプレスの表示速度低下の原因になっていたので、とりあえずフッターに移動させることにしました。
速度を計測するツールの「PageSpeed Insights」と「GTmetrix」で確認してみると、フッターで表示させた方が安定して評価が高かったので、今後はこの形でいこうかと思います。
フッター部分はカスタマイズして３カラムにしているので、もし気になるという場合はこちらの記事を参考にされてみて下さい。
| 参考：STINGER8でフッター用ウィジェットを追加して足元をオシャレに演出！ |
SNSの埋め込みまとめ
Jetpackプラグインを使うと、Facebookページ・Twitter・Google＋ページを、手軽で簡単に埋め込むことができます。
これならイチから埋め込みコードを生成して、ブログに貼り付けるという作業をしなくても、ウィジェットを追加するだけなので非常に便利ですね。
は他にもワードプレスを高速化したり、ブログの統計情報を確認できたりと、機能性に優れているので、活用できる機会もたくさんあります。
まだ利用されたことがないという方は、ぜひJetpackを導入されてみて下さい。
| 合わせて読んでほしい |
