ＳＱＬの窓
<< Seesaa のソーシャ… | TOP | IFRAME 内に外部の … >>

2016年02月05日


Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得

 
2016/2/5 : ボタンの順番を変えました。
( Twitter / はてな / Facebook / Google+ )
また、自由に変えやすいようにコードに改行を挿入しました

2016/01/28 : Facebook のいいねボタンでは無く、シェアボタンに変更できるようにしました

Facebook のみ、アプリが必要になります( 966242223397117 というデフォルトの appid が使えるようです )し、Facebook のレスポンスは相当悪いのであまりおすすめではありません。Facebook は、アプリID がチェックボックスの代りになります。

ブログ等で使う場合は、URL 部分が 記事の URL になるように、テンプレート等の変数をセットするといいでしょう。

正直、Seesaa のブックマーク処理は効率が悪いようなので作成してみました。
Google+ ( 単純な Google+1ボタンにする => ) はてな Twitter
対象URL
Twitterテキスト
facebook アプリID 966242223397117 ( デフォルトの appid が使えるようです )
※ Shareボタンにする 

『単純な Google+1ボタンにする』場合は、対象URL が表示されているページとなります。『単純な Google+1ボタンにする』のチェックを外すと、対象URL が必要になります。

ブログのトップベージのように、記事が複数ある場合は、上のテキストエリアのものを貼り付けて、下側のテキストエリアはページの最後に一度だけ実行されるようにします。

▼ Seesaa で、Facebook 無しの記事下に貼り付けるコード

<div> 
<table> 
<tr><td> 
<div class="g-plusone" data-size="medium" data-href="<% article.page_url %>"> 
</td><td> 
<a href="http://b.hatena.ne.jp/entry/<% article.page_url %>" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" style="border: none;" /></a> 
</td><td> 
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<% article.page_url %>" data-lang="ja" data-text="<% article.subject %>"></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> 
</td></tr> 
</table> 
</div> 


▼ Seesaa の記事 HTML の最後に貼り付けるコード( Facebook 無し ) 

<!-- google --> 
<script type="text/javascript"> 
  (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
  })(); 
</script> 
<!-- hatena --> 
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 

Twitter 用としては、Seesaa では、data-text="<% article.subject %>" にする必要があります。

ボタン情報

Google +1ボタン
はてなブックマークボタン
Twitter buttons
Facebook Like Button
Facebook Share Button

関連する記事

livedoor Blog で、Facebook の『シェアボタンを表示する』
Seesaa のソーシャルボタンのテンプレート上の設定( 古いテンプレートから最新に変更する手順 )
【WEBサービスの最新記事】
posted by lightbox at 2016-02-05 21:26 | WEBサービス | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり