簡単。WordPressでfacebookページとTwitterをサイドバーに埋め込む方法

WordPressでブログやメディアを運営している人は、

facebookやTwitterでも情報発信している人も多いはず。

そんな時にこういう風にサイドバーにfacebookやtwitterを埋め込む方法を紹介。

%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8

私もやりたくて実装したのだが、結構苦戦した割に凄い簡単だったのでメモの意味も込めて。

スポンサード

どちらもdeveloperページから

実はFacebookページもTwitterも、やり方はほとんど同じ。

Web初心者の私は、Wordpress上でわちゃわちゃいじっていたのだが、

実はどちらもfacebookとtwitterの開発者ページから設定を行うのだ。

Facebookページ

まずはFacebookページから。

1.Facebook Developersでコードを取得

検索エンジンで「facebook 開発者ページ」とかで検索すると、出てくる

「Facebook Developers – Facebook for Developers」にアクセスする。

facebook%e9%96%8b%e7%99%ba%e8%80%85%e3%83%9a%e3%83%bc%e3%82%b8

2016年12月時点では

ドキュメント→ソーシャルプラグイン→ページプラグイン

と進んでいくと、設定ページにたどり着く。

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

多分内部検索で「プラグイン」とかで調べたら、すぐ見つかると思う。

そこで、「埋め込みたいfacebookURL」「高さ」「幅」等を入力し、

「コードを取得」を押すと、Werdpress内に挿入するコードが出てくる。

%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e5%8f%96%e5%be%97

2つ出てくるのだが、どちらも使う。

facebook%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e3%82%b3%e3%83%bc%e3%83%89

2.Wordpress内のウィジェットで埋め込み

コードを取得したら、WordPressのウィジェットに移動。

テキストを選択し、埋め込みたい場所に置く。

そして、テキスト内にさっきのコード2つを添付。

%e5%9f%8b%e3%82%81%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95

これで、表示されるようになる。

twitter

お次はTwitter。

1.twitter側でコードを取得

Twitterにログインした状態でユーザータイムラインページにアクセスする。

もしくは、

検索エンジンで「Twitter 開発者ページ」にアクセス。

twitter%e9%96%8b%e7%99%ba%e8%80%85

メニューよりDocumentation→TwitterDevJP→埋め込みタイムライン

ここに来ると、やり方が書いてある。

Overview

アクセスすると、表示方法の選択があるので、好きな方を選ぶ。

%e8%a8%ad%e5%ae%9a2%e7%a8%ae

あとからすぐ変えられるので、とりあえずどちらか選んで進もう。

すると、「Copy code」ボタンが出てくるので押すとコードをコピーできる。

%e3%82%b3%e3%83%bc%e3%83%89%e5%8f%96%e5%be%97%ef%bc%86%e8%a8%ad%e5%ae%9a
「set customization options.」ボタンを押せば、大きさを変えるなどの設定画面が出てくる。

2.Wordpress内のウィジェットで埋め込み

あとはfacebookページの時と同様に、ウィジェットのテキスト内にコピーしたコードを埋め込むだけだ。

試してみよう

設定自体は非常に簡単でコードを書く必要もない。

是非試してみて欲しい。

このブログの中の人

すぎもん
すぎもん
1991年神奈川生まれ。ばあちゃんが民宿をやっていて、旅行が大好き。学生時代は海外20ヵ国以上旅したり、カフェを運営。
「お酒×観光」Webマガジン「トラべろマガジン」も運営中。

本ブログでは、ニッチな観光情報や旅行会社を作るための様子を発信中。
SNSをフォローして頂けると最新情報をお知らせします。

SNSをフォローする