−FaceBook設定−
インスタグラム
埋め込みプラグイン
Smash Balloon Instagram Feed
https://junpei-sugiyama.com/smash-balloon-instagram-feed/
Google口コミ
Plugin for Google Reviews
https://designup.jp/wordpress-google-my-business-review-plugin.html
data-pid で検索してIDを探す
埋め込みURL
- FaceBook埋め込み（Edgeでは表示されない。Chromeで設定）
- twitter埋め込み
- Instagram埋め込み：プラグイン「Smash Balloon Social Photo Feed」を使う
- Instagramボタン設置もう一つhttps://saruwakakun.com/html-css/reference/instagram
やり方説明サイト
SNSオリジナルボタン設定
【 PHPファイル 】
<div class="sns">
<ul>
<li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" target="_new"><img src="<?php echo get_template_directory_uri(); ?>/img/sns1.gif" alt="facebookでシェア"></a></li>
<li><a href="http://twitter.com/share?url=<?php the_permalink() ?>&text=<?php the_title(); ?>" target="_new"><img src="<?php echo get_template_directory_uri(); ?>/img/sns2.gif" alt="twitterでツイートする"></a></li>
<li><a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php the_permalink() ?>" target="_new"><img src="<?php echo get_template_directory_uri(); ?>/img/sns3.gif" alt="共有する"></a></li>
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" target="_new"><img src="<?php echo get_template_directory_uri(); ?>/img/sns4.gif" alt="ブックマークする"></a></li>
<li><a href="http://line.me/R/msg/text/?<?php the_title(); ?><?php the_permalink(); ?>" target="_new"><img src="<?php echo get_template_directory_uri(); ?>/img/sns5.gif" alt="LINEで送る"></a></li>
</ul>
</div>
【 CSS 】
/*--------------------------------------------------------
SNSボタン
--------------------------------------------------------*/
.sns ul{
list-style:none;
display:table;
width:100%;
margin-left:20px;
margin-bottom:5px;
}
.sns ul li{display:table-cell;}
クリップボードにURLコピー
<!-- コピー対象要素とコピーボタン -->
<div class="copy-none"><input id="copyTarget" type="text" value="<?php the_permalink() ?>" readonly></div>
<img src="<?php echo get_template_directory_uri(); ?>/img/sns3.gif" onclick="copyToClipboard()" /><!--画像の場合-->
<button onclick="copyToClipboard()">Copy text</button><!--ボタンの場合-->
<script>
function copyToClipboard() {
// コピー対象をJavaScript上で変数として定義する
var copyTarget = document.getElementById("copyTarget");
// コピー対象のテキストを選択する
copyTarget.select();
// 選択しているテキストをクリップボードにコピーする
document.execCommand("Copy");
// コピーをお知らせする
alert("コピー完了 : " + copyTarget.value);
}
</script>
【 CSS 】
/*--------------------------------------------------------
SNSボタン設置
--------------------------------------------------------*/
#sns{margin-bottom:10px;}
#sns ul{
list-style:none;
display: -webkit-flex;
display: flex;
margin-left:0px;
}
#sns ul li{margin-right:5px;}
#sns ul img{border-radius:3px;}
/*選択したテキストの色を消す*/
copy-none input::selection{
background: #FFFFFF;
color: #FFFFFF;
}
copy-none input{
width:100%;
border:none;
color:#FFFFFF;
}
FaceBook設定
まずはFaceBookへログインしてから作業を始める。
ログイン後にページプラグイン（Page Plugin）ここで詳細を設定後、タグを貼り付ける。
タグはJavaScriptは<body>の直下に入れる。
ツイッターボタン作成https://about.twitter.com/resources/buttons#tweet
はてなブックマークボタン作成http://b.hatena.ne.jp/guide/bbutton
<!--SNSボタン設置-->
<ul class="sns">
<li><a href="http://www.facebook.com/share.php?u=共有したいＵＲＬ" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><img src="img/sns-fb.jpg" alt="フェイスブック" /></a></li>
<li><a href="http://twitter.com/share?url=共有したいＵＲＬ&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント"><img src="img/sns-tuitter.jpg" alt="ツイッター" /></a></li>
</ul>
<!--SNSボタン設置-->
共有したいページのURLを必ず入れる！！！！
<!--ツイッター-->
<script>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>
<!--はてな-->
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
{lang: "ja"}
</script>
<!--いいねＦＢ-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.6&appId=248399975504330";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--いいねＦＢ-->
