Webサイトを作ったとき、blogやWebサイトを多くの人に見てほしいので各種SNSへのリンクを付けたり、タイムラインを表示したいと思います。
今回はテーマSimplicityとJetpackを使って簡単にWebサイトにリンクボタンとタイムラインの表示方法について書きます。
FacebookページとTwitterへのリンクボタンを付ける
Webサイトを作ったらまずFacebookページを作って、Twitterアカウントも作るといいと思います。
Facebookページの作り方については、
[ryus_blogcard url=”https://usortblog.com//how-to-make-facebookpage/”]
こちらを参考にしてください。
今回は新しく作った ゆうそうと というWebサイトに付けたいと思います。作業をする前は、
このように Feedly と RSS のボタンが表示されています。
ここに、FacebookとTwitterのボタンを表示します。
ダッシュボード 外観＞カスタマイズ をクリック
SNS をクリック
Twitterの
この部分にある @マーク以下の文字を入力します
Facebookは
このようにurlの最後の部分の文字を入力します。
保存して公開 をクリックして、表画面を見ると、
このようにFacebookページとTwitterへのリンクボタンがつきました(^^)/
FacebookとTwitter のタイムラインをサイドバーに表示する
次にFacebookとTwitter のタイムラインをサイドバーに追加したいと思います。プラグインのJetpackのウィジェットを使います。
Facebookのタイムラインを指定する
ダッシュボード 外観＞ウィジェット をクリック
Facebook ページプラグイン（Jetpack) をクリック、
サイドバーウィジェット をクリックして、ウィジェットを追加 をクリックします
入力画面が開くので、このように入力し 保存 をクリック。
すると、サイドバーに
このようにFacebookページのタイムラインが表示されました。
Twitterのタイムラインを指定する
Twitter タイムライン（Jetpack) をクリック、
サイドバーウィジェット をクリックして、ウィジェットを追加 をクリックします
このような画面が表示されます。Twitter.comでウィジェットを作成 をクリック
Twitter.comでウィジェットを作る画面になります。ウィジェットを作成 をクリック
すると、埋め込む というテキストエリアにコードが表示されるのでコピーします
<a class="twitter-timeline" href="https://twitter.com/u_sort" data-widget-id="717016347431964676">@u_sortさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
このコードの中の data-widget-id= のあとにダブルコーテーションで囲まれた数字があります。これをコピーして、
ウィジェット ID という欄にペーストします。そして、保存 をクリック。
表画面を見てみると、
Twitterのタイムラインが表示されました(^^)/
コメント