簡単に ブログ記事毎にSNSボタンを設置する方法

javascriptで記事ページ対応に改造しました | 4/1/2016 | Comments: 1630

最近というか、もうだいぶ前からですが、ブログにFacebookのいいねボタンや

はてなBookMarkのボタンを設置することは定番になっています。

設置の方法は各所にかいてあると思いますが、Facebookのページでスクリプトを取得して

ブログのブロックに張り付けるという方法で設置する場合、

自分のブログのURLを入力して、スクリプトを取得すると、すべての記事ページに表示したとしても

ブログトップのリンクになってしまいます。

それを記事ページで記事ごとのURLとタイトルに変えてしまう方法の解説もいくらかありますが

もっと簡単な方法を考えました

FaceBookとHatenaBookMark対応です(というか、 主要なところで書き換える必要があるのはこの2つだけ)

作業

取得したコードを <div id="SnsButtons"> ~</div>で囲って その下に

<script type="text/javascript">
    var docs=document.getElementById("SnsButtons").innerHTML;
    docs=docs.replace(/src="(.*facebook[^\?]+)\?href=.*?&amp;/,"src=\"$1?href="+encodeURIComponent(document.URL)+"&amp;");
    docs=docs.replace(/data\-hatena\-bookmark\-title[\s]*=[\s]*"[^"]*"/,"data\-hatena\-bookmark=\""+document.title+"\"");
    docs=docs.replace(/href="(.*hatena\.ne\.jp.*)http:\/\/[^"]+"/,"href=\"$1"+document.URL+"\"");
    document.getElementById("SnsButtons").innerHTML=docs;
</script>

を追加するだけです。

 

説明

 

Facebook

<div style="width:124px;height:22px;float:left;">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
         src="//www.facebook.com/v2.0/plugins/like.php?href=http%3A%2F%2Fesuppo.ecopls.net%2Fhtml%2Fsyublog%2F&amp;
         width&amp;
         layout=button&amp;
         action=like&amp;
         show_faces=false&amp;
         share=true&amp;
         height=90&amp;
        appId=554095394770283" style="border:none;
        overflow:hidden;
        height:90px;">
</iframe>
</div>

赤いところが自分のブログのURLになっています。

ここをページ毎に書き換えてやればそのページのURLでFaceBook「いいね」がつけてもらえるということになります

 

はてなBookMark

だと

<a class="hatena-bookmark-button" data-hatena-bookmark-lang="ja" data-hatena-bookmark-layout="standard-noballoon"
data-hatena-bookmark-title="イーサポブログ"
href="http://b.hatena.ne.jp/entry/http://esuppo.ecopls.net/syublog/Blog"
title="このエントリーをはてなブックマークに追加"><img alt="このエントリーをはてなブックマークに追加" height="20"
src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" width="20" /></a>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async">
</script>

 

赤いところを書き換えます。

手で書き換えて設置すればいいと・・・。

それが早いかもしれません。

ただプログラムですから、書き換える場所が一文字違ってもエラーになります。

もっと簡単な別の手法を紹介してみます

方法としてはスクリプトの該当箇所をjavascriptで書き換えちゃおうってかんじです

実際のコード


<div id="SnsButtons"><!--追加div-->

取得したコード

</div>
以下のコードを追加します
<script type="text/javascript">
	var docs=document.getElementById("SnsButtons").innerHTML;
	//FaceBook URL Replace
	docs=docs.replace(/src="(.*facebook[^\?]+)\?href=.*?&amp;/,"src=\"$1?href="+encodeURIComponent(document.URL)+"&amp;");
	//Hatena Title Replace
	docs=docs.replace(/data\-hatena\-bookmark\-title[\s]*=[\s]*"[^"]*"/,"data\-hatena\-bookmark=\""+document.title+"\"");
	//Hatena URL Replace
	docs=docs.replace(/href="(.*hatena\.ne\.jp.*)http:\/\/[^"]+"/,"href=\"$1"+document.URL+"\"");
	document.getElementById("SnsButtons").innerHTML=docs;
</script>

 

囲ったdiv内の文字列を取得し、修正対象のURLを置換します

あまり、いろんなパターンのテストはしていません。

こんなときだめじゃんってのは 一言いただければ 修正します。


Categories: ブログ

 

 

ブログ移行します 以降の記事は こちらイーサポブログ Wordpress です

 

 

 
follow us in feedly

Blog

ブログ移行
5/5/2016 | Comments: 2323

    ブログ移行します 以降の記事は こちらイーサポブログ Wordpress です    

ネットショップ運営のための最安サーバー構築 HTTPS SSL設定
KingSSLの申し込みと設定 | 5/2/2016 | Comments: 2296

今時は通販サイトならSSLは必須です。 ただ、SSL証明書は 安いところでも 年額 2-3万が相場でした、ところが最近激安の認証SSLが販売されてきてます。 使う人が多くなれ ... Read More

ネットショップ運営のための最安サーバー構築 postfixではまる
postfix 原因不明のまま、はまりまくり | 4/29/2016

時間が空いてしまいましたが、原因は KingSSL 申し込み時にドメイン管理者メールアドレスが必要だったため postfix dovecot のセットアップではまりまくり(^ ... Read More

Line 無料通話 マイクに異常が発生しましたで通話が切れる
Huawey AscendG6 | 4/20/2016 | Comments: 3

2014年8月に iijmio のみおふぉんにしてます。そのときに購入した HUAWEY AscendG6 みおふぉんにも、機種にもなんの不満もなく1年半以上使ってきました。 ... Read More

ネットショップ運営のための最安サーバー構築 ドメイン設定 EC-CUBEインストール
Servermans@VPS EC-CUBEインストール | 4/19/2016

サーバー構築の続き その2 ちょっとEC-CUBEインストールの確認に手間取っておそくなりましたが、続きです。 ドメインの契約、DTIのドメインを申し込んでもいいで ... Read More

EC-CUBE 3.0.9 インストールできない DB接続できたのにデータベース初期化エラー
4/15/2016 | Comments: 375

EC-CUBE3.0.9のインストールにて、データベース初期化で失敗。 データベース接続設定ではうまくいってる といことは、データベースのID パスワードなどは正しい。 ... Read More

ネットショップ運営のための最安サーバー構築 Servermans@VPS PHP PostgreSQL セットアップ
月額467 + 75 = 542円 で ホスティング + SSLを実現 VPS契約からphp+postgresql+ftpインストールまで | 4/12/2016 | Comments: 791

安くネットショップを作りたい。   一番早いのはyahooショップですが、自社ページも持ちたい場合どこかのホスティングサービスにページを置くということになります。 ... Read More

windows10 仮想メモリを自動から固定にしたら パフォーマンス 劇的速くなった
4/8/2016 | Comments: 70

今使ってる ノートPCは LENOVO G50 メモリ4G まあ、今時では、低パフォーマンスな部類です。 今まで、何をするにしても遅い遅いと思ってました。 思 ... Read More

VirtualBoxのLinux(Basix)にXAMPPでWEBサーバーをセットアップ
問題ありでVMwareに変更XAMPPインストーラ ダウンロード | 4/5/2016 | Comments: 2

仕事でBasixにWEBサーバーをセットアップしたので、忘れないうちに手順を記録します   Basixは Ubuntuベースの軽量ディストリビューションです。 ... Read More

freetel 格安sim APN つながらない
freetel mobile(umobileの契約)だったっておち | 4/5/2016 | Comments: 1516

先日、嫁様のスマホが充電不能におちいり、急遽買いなおすことになりまして ヨドバシカメラにて、SIMフリー端末 freetel Piriori3 LTEを購入、もともとのfreetel ... Read More

フレームワークsymfony入門 インストール helloWorld
シンフォニィの仕組みを理解してみる | 4/2/2016 | Comments: 1706

前回インストールまで行きましたが、PHPのバージョンとかちょっと問題があったので、 WEBサーバーをXAMPPにして再度インストールしました。 そのまま、my_pr ... Read More

簡単に ブログ記事毎にSNSボタンを設置する方法
javascriptで記事ページ対応に改造しました | 4/1/2016 | Comments: 1630

最近というか、もうだいぶ前からですが、ブログにFacebookのいいねボタンや はてなBookMarkのボタンを設置することは定番になっています。 設置の方法は各所にか ... Read More

やっぱり怖いMySQLのライセンス
プログラム受注にはつかえない | 3/31/2016 | Comments: 1944

日本のMySQL代理店 ソフトウェアエージェンシーのページですが http://www.softagency.co.jp/products/mysql/license/ ... Read More

EC-CUBE3 プラグイン作成 チュートリアル ステップ3
設定用管理ページ作成 その14新規ページを作成 | 3/30/2016

symfonyの仕組みを先に理解したいところですが、 実践も並行してってことで、EC-CUBEのプラグインのほう行ってみます。 管理画面のカラーバリエーションのファイル ... Read More

フレームワークsymfony入門 インストール
入門しました。まずインストール(windows) | 3/29/2016

EC-CUBE3のフレームワークとして採用されてる Symfony 基本的にフレームワークの必要性をあまり感じないけど、好き嫌いもいってられないので 勉強します。 まず、イ ... Read More

Textareaにscriptタグをすると403エラーとなる対策
ロリポップ WAF 誤検知問題 | 3/28/2016

ちょっとした、広告タグなんかで <script type="text/css">を入力しようとすると 「403エラーでページがありません」と表示される <xscript ... Read More

EC-CUBE3のデータベーステーブルと機能
EC-CUBE3のデータベーステーブルと機能。結構 廃止機能がありますね | 3/28/2016 | Comments: 4

ちょっとEC-CUBE3になって、 廃止になった機能とか結構あるみたいです データベーステーブル自体廃止っていうのもかなりあります。 で、これ困る人いるかなってところが ... Read More

EC-CUBE3 プラグイン作成 チュートリアル ステップ2
ステップ2 イベント | 3/26/2016 | Comments: 1447

blockquote { background-color:#EFFFFF; padding:10px; } [EC‐CUBE] ブログ村キーワード EC-CUBE3 ... Read More

EC-CUBE3 プラグイン作成 チュートリアル ステップ1 
EC-CUBE3 プラグイン作成してみる チュートリアル なにもしないプラグイン | 3/24/2016 | Comments: 1625

EC-CUBE3のプラグインを作成 EC-CUBEプラグイン仕様 見たり、プラグイン作成の解説サイトみたりしても、よくわからないので、1からステップバイステップで挑戦し ... Read More

ロリポップMySQL4からMySQL5へ移行時の文字化け対応 忘備録
ロリポップのMySQL4のphpMyAdminが使えなくなってるので必要に迫られMySQL5へ移行。案の定文字化け。 | 3/21/2016 | Comments: 1388

ロリポップ上 PHP&MySQLで組んだシステムの改修依頼が7年ぶりにあったので 久しぶりに見てみたところ、 phpMyAdminを開こうとすると・・・   ... Read More

More Blog Entries

WEBデザイナー、WEB担当者のみなさん!
こんなことで、困ったことはありませんか?

ホームページデザインで、出来上がり近くに、色を変えて何パターンか作ってくださいと言われた。

(* ̄▽ ̄)y~~- ちょっと色違いのパターンも見たいなあ

とか

何種類かパターンを変えて作ってみて。とか

"笑顔で( ̄▽ ̄;)(("#-_-)!!ガーン

>>続きはこちら

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村

人気ブログランキングへ

PVアクセスランキング にほんブログ村