WordPressでプラグインなしでソーシャルブックマークを挿入
この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
目 次
ソーシャルブックマークとは
ソーシャルブックマークは、インターネット上のサービスの一つで、オンラインブックマークサービスの発展形。自分のブックマークをネット上に公開し、不特定多数の人間と共有する事で、これらを有益な情報源とすることができる。
出典：ＷｉＫｉペディア
プラグインやテーマ附属のアイコン表示の不満
- 自社にとって必要なメディアがない
- 組み込みが難しい・追加が難しい
- プラグインを使う場合は、プラグインが増える
- 自作アイコンが使えないメディアがある
- 廃止された場合にプラグインやテーマの対応が遅い場合があっていつまでも表示されてしまう
各ソーシャルブックマークタグ作成
Tweet
|
1 2 |
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
follow
|
1 2 |
<a href=“https://twitter.com/あなたのID?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @あなたのID</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
メンション
|
1 2 |
<a href="https://twitter.com/intent/tweet?screen_name=あなたのID&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @あなたのID</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> |
参考サイト
|
1 2 |
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2&appId=673861046016725&autoLogAppEvents=1"></script> |
いいねボタン(シェアボタン付き)
|
1 |
<div class=“fb-like” data-href=“設置ページアドレス" data-width=“290" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> |
おすすめボタン(シェアボタン付き)
|
1 |
<div class="fb-like" data-href="設置ページアドレス" data-width=“290" data-layout="standard" data-action="recommend" data-size="small" data-show-faces="true" data-share="true"></div> |
参考サイト
LINE
LINEに送るボタン
|
1 2 |
<div class="line-it-button" style="display: none;" data-lang="ja" data-type="share-a" data-ver="3" data-url="<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" data-color="default" data-size="small" data-count="true"></div> <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script> |
友だち追加ボタン
|
1 2 |
<div class="line-it-button" style="display: none;" data-lang="ja" data-type="friend" data-lineid="@あなたのID" data-count="true" data-home="true"></div> <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script> |
参考サイト
|
1 |
<a data-pin-do="buttonBookmark" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/"></a> |
|
1 |
<script async defer src="//assets.pinterest.com/js/pinit.js"></script> |
参考サイト
|
1 2 |
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: ja_JP</script> <script type="IN/Share" data-counter="top"></script> |
参考サイト
Tumblr
|
1 2 |
<a class="tumblr-share-button" data-color="blue" data-notes="right" href="https://embed.tumblr.com/share"></a> <script>!function(d,s,id){var js,ajs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://assets.tumblr.com/share-button.js";ajs.parentNode.insertBefore(js,ajs);}}(document, "script", "tumblr-js");</script> |
参考サイト
mixi(ミクシィ)
|
1 |
<div data-plugins-type="mixi-favorite" data-service-key="識別キー" data-size="medium" data-href="" data-show-faces="false" data-show-count="true" data-show-comment="true" data-width=""></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = '//static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script> |
参考サイト
GREE
|
1 |
<iframe src="http://share.gree.jp/share?url=<?php echo $url_encode;?>&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe> |
参考サイト
はてなブックマーク
|
1 |
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> |
参考サイト
|
1 2 |
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a> <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script> |
参考サイト
|
1 |
<script type="text/javascript" src="//www.redditstatic.com/button/button1.js"></script> |
参考サイト
feedly
|
1 |
<a href='https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fwp908.com%2Ffeed%2F' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a> |
参考サイト
evernote
|
1 2 3 4 5 6 |
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script> <a href="#" onclick="Evernote.doClip({url:'<?php the_permalink();?>', providerName:'<?php bloginfo('name'); ?>', title:'<?php the_title();?>', contentId:'the-content', }); return false;" class="evernote-btn-link"><img src="<?php echo get_stylesheet_directory_uri();?>/image/evernote1.png" width="23" height="23" alt="Evernoteに保存"class="evernote-btn-img" /><span class="snstext <?php echo $plug; ?>" >Evernote</span></a> |
参考サイト
お気に入り追加
お気に入り追加JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { $('#bookmarkme,#bookmarkme2').click(function() { if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark window.sidebar.addPanel(document.title,window.location.href,''); } else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite window.external.AddFavorite(location.href,document.title); } else if(window.opera && window.print) { // Opera Hotlist this.title=document.title; return true; } else { // webkit - safari/chrome alert('ブラウザ付属のブックマーク機能をご利用ください。' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? '【 Command 】' : '【 Ctrl 】') + ' + 【 D 】ボタンを押すとブックマークできます。'); } }); }); |
お気に入り追加HTML
|
1 |
<a id="bookmarkme" href="" rel="sidebar" title="bookmark this page"><img src="/img/fav.png" alt="お気に入り追加"></a> |
Delicious
|
1 |
<a href="http://delicious.com/post?url=<?php the_permalink();?>&title=<?php the_title();?>" target="_blank">Delicious</a> |
Digg
|
1 |
<a href="http://www.digg.com/submit?phase=2&url=<?php the_permalink();?>" target="_blank">Digg</a> |
StumbleUpon
|
1 |
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">StumbleUpon</a> |
子テーマの中にPHPファイルを作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /** * 投稿ページのSNSボタン */ $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); if(function_exists('scc_get_share_twitter')){ $plug = "smanone"; }else{ $plug = ""; } ?> <div class="sns"> <ul class="clearfix"> <li>各ソーシャルメディアのタグを入れる</li> </ul> |
子テーマの中にsns.phpを作成します。子テーマの作成については、下記のページを参考にしてください。
Windowsユーザーの方は、Terapadなどで保存する前に文字コードがUTF-8になっているかしっかりと確認してください。
single.phpに表示タグを挿入
|
1 |
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?> |
上記のタグをsingle.phpの表示させたい場所に挿入して上書きします。
自作していれば廃止になったソーシャルメディアの削除も可能です。廃止になったボタンは、削除する必要があります。間違ってクリックされるとエラーの原因になります。
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
Evernoteに保存