Chaca-log

Chaca-log

1年間の1人暮らし。何か新しい事を始めたいと悪戦苦闘しながらもBLOGに挑戦中です。

初心者でもできたSNSシェアボタンをコピペで設置

こんばんは、Chacaです

 

有言実行!

ブログに書いた以上は実行いたします。

僕にはまだ「HTML」「CSS」などの知識がありませんので、コピペにて設置いたしました。

こんな僕でも簡単に設置できたのは、いつ俺さんのブログを参考にさせていただいたからです。

shun@ハイパーこじらせブロガー (@shun_hatena) on Twitter

www.ituore.com

 

まずは、Before Afterをご覧ください。

【Before】

f:id:shuyax:20170913230003p:plain



【After】

f:id:shuyax:20170913230148p:plain


どうでしょうか、違いに気づいていただけたでしょうか。

 

コピペでなら初心者でもできる「SNSシェアボタン」の設置手順

 

 お願いします

コピペにて「SNSシェアボタン」を設置する前に必ずコードをバックアップしておいてください。

僕は一度バックアップを取らずにカスタマイズを行い、苦労したことがありますので、是非ともお願いいたします。

ちなみに僕は、メモ帳+スマホで写真を撮りました。

 

最初にすること

僕には良く分からないのですが、この作業をしなけれがGoogle+・Pocketの画像表示ができないということです 。(理由は聞かないでください)

 記事の管理画面 ➡ 設定 ➡ 詳細設定 ➡ 検索エンジン最適化 ➡ head このような流れです。

 

まずは記事の管理画面の設定をクリック

f:id:shuyax:20170913235446p:plain

 

続いて、詳細設定をクリック

f:id:shuyax:20170913235958p:plain

 

検索エンジン最適化の headに要素を追加があります。

ここにコードを貼り付けます。

f:id:shuyax:20170914000033p:plain

 

【貼り付けコード】

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

 

コピペするとこのようになります。

f:id:shuyax:20170914002924p:plain

最後に下の方にスクロールして変更するをクリック

f:id:shuyax:20170914000439p:plain

これで、下準備は完了です。

 

JQueryコードのコピペ(シェア数をかぞえる)

JQueryとは僕も良く理解できないのですが、「シェア数」をかぞえるコードです。

要するに、何人の人がクリックしてくれたのかが分かるんですね。

 

記事管理画面 ➡ デザイン ➡ 記事 ➡ 記事下

 

管理画面からデザインをクリック 

f:id:shuyax:20170914002409p:plain

 

続いて、カスタマイズをクリック

f:id:shuyax:20170914004147p:plain

 

そして記事をクリック

f:id:shuyax:20170914004204p:plain

 

スクロールし記事下をクッリク

ここにコードを貼り付けます。

f:id:shuyax:20170914004227p:plain

 

JQuery貼り付けコード】

<!--JQueryを使用-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--シェア数の取得-->
<script>
//はてなブックマークのシェア数
function getHatenaBookmarkCount(entryUrl, selcter) {
  entryUrl = 'http://api.b.st-hatena.com/entry.count?url=' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp',
  }).then(
    function(result){ $(selcter).text(result || 0); },
    function(){ $(selcter).text('0'); }
  );
}
//Facebookのシェア数
function getFacebookCount(entryUrl, selcter) {
  entryUrl = 'https://graph.facebook.com/' + encodeURIComponent(entryUrl)
  $.ajax({
    url:entryUrl,
    dataType:'jsonp'
  }).then(
    function(result){
        if(result.share && result.share.share_count) {
            $(selcter).text(result.share.share_count);
        } else {
            $(selcter).text('0');
        }
    },
    function(){ $(selcter).text('0'); }
  );
}
$(function(){
  getHatenaBookmarkCount('{Permalink}', '.hatena-bookmark-count');
  getFacebookCount('{Permalink}', '.facebook-count');
});
</script>

 

するとこのようになります。

f:id:shuyax:20170914004248p:plain

 

これで、シェア数をかぞえるJQueryコードのコピペは終わりです。

 

HMLコードのコピペ(SNSシェアボタン)

SNSシェアボタンの設置ですが、記事上・記事下に設置されている方が多いです。

お勧めです。

コピペするのはは記事上と記事下との違いだけですので貼り付ける作業自体は同じなので、貼り付け場所だけ分かれば問題なくできます。

 

記事上

f:id:shuyax:20170914010550p:plain

 

記事下

f:id:shuyax:20170914010619p:plain

 

記事上だけでも良いですし、記事下だけでもOKです。

表示したい場所に貼り付けて下さい。

【HTML貼り付けコード】

<!--SNSシェアボタン-->
<div class="share-buttons">
<span style="font-size: 8px">シェアする</span>
<div class="inner">
<!--はてなブックマーク-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i> <span class="hatena-bookmark-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br> <span class="share-text">Bookmark!</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href,'FaceBookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア"><i class="blogicon-facebook lg"></i> <span class="facebook-count share-text"><i class="fa fa-spinner fa-spin"></i></span><br><span class="share-text">Facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" onclick="window.open(this.href, 'TwitterWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="blogicon-twitter lg"></i><br><span class="share-text">Twitter</span></a>
<!--Google+-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="share-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="share-text">Pocket</span></a>
</div>
</div>

 

CSSコードのコピペ(デザイン)

CSSコードとはSNSシェアボタンのデザインを決めるコードです。

僕が設置した デザインのコ―ドになります。

 

まずは貼り付け場所です

f:id:shuyax:20170914012350p:plain

 

デザインCSSをクリック

ここにCSSコードを貼り付けます。

 

f:id:shuyax:20170914012604p:plain

CSS貼り付けコード】

/*share-botton*/
.share-buttons{
    margin-bottom: 10px;
    text-align: center;
}
.share-buttons .inner a {
    position: relative;
    display: inline-block;
    width: 15%;
    height: 45px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    padding:5px;
}
.share-buttons .inner .share-text{
    font-size: 15px;
}
.share-buttons .inner .hatena-bookmark-button{
    background: #008fde;
    box-shadow: 0 3px #5478a5;
}
.share-buttons .inner .hatena-bookmark-button:hover{
    background: #1db4eb;
}
.share-buttons .inner .hatena-bookmark-button:active{
    background: #5478a5;
}
.share-buttons .inner .facebook-button{
    background: #305097;
    box-shadow: 0 3px #213254;
}
.share-buttons .inner .facebook-button:hover{
    background: #4c70ba;
}
.share-buttons .inner .facebook-button:active{
    background: #213254;
}
.share-buttons .inner .twitter-button{
    background: #55acee;
    box-shadow: 0 3px #0285b7;
}
.share-buttons .inner .twitter-button:hover{
    background: #83c3f3;
}
.share-buttons .inner .twitter-button:active{
    background: #0285b7;
}
.share-buttons .inner .googleplus-button{
    background: #db4a39;
    box-shadow: 0 3px #a23629;
}
.share-buttons .inner .googleplus-button:hover{
    background: #e47365;
}
.share-buttons .inner .googleplus-button:active{
    background: #a23629;
}
.share-buttons .inner .pocket-button{
    background: #ee4256;
    box-shadow: 0 3px 0 #b5392c;
}
.share-buttons .inner .pocket-button:hover{
    background: #f26f7f;
}
.share-buttons .inner .pocket-button:active{
    background: #b5392c;
}
.share-buttons .inner .share-buttons a:active{
    top: 3px;
    box-shadow: none;
}

 

最後に変更を保存するをクリックで完了です。

 

f:id:shuyax:20170914012426p:plain

 

 

JQueryコピペ・HTMLコピペ・CSSコピペと、いちいち別の画面に変えたりしなくていいので効率よく作業できます。

 

まとめ

最初はどうなるものかとドキドキしたんですが、スムーズにいけました。

当たり前か・・・コピペですから。

これだけで印象が変わった気がしますね。

ちよっとどころか、かなり嬉しいです。

僕でもできたのですから大丈夫です。

ただ、本当に失敗しても良いようにバックアップだけは取っておいた方がいいですよ。

 

Chacaでした・・・