blogger - Blogger にフローティング ソーシャル メディア ボタンを追加する方法

Question

これは、Blogger プラットフォームにフローティング ソーシャル メディア ボタンを追加する方法に関する wiki/記事として機能します。

前提:コンテンツが下にスクロールされると、一番上に浮かぶソーシャル メディア バー。

Answer 1

何よりもまず、著作権の問題などを防ぐために、Way2Blogging.org がこの素晴らしいシェア バーの元のソースであり、いくつかの調整が加えられていることを認めたいと思います。元の記事は ここにあります: .

フローティング ソーシャル メディア共有ボタン

これは、2 つの簡単な手順で Blogger にフローティング ソーシャル メディア共有ボタンを配置する方法に関する簡単なチュートリアルです。

注: このガジェットは、Blogger HTML に直接配置する必要があります。そのため、 Edit HTML in Blogger Templateを開いて、 Expand Template Widgetsをクリックする必要があります。

まず、Javascript/jQuery コードを入力します。

展開された HTML に入ったら、タグを検索し、</head>次のコード行をそのすぐ上/直前に挿入します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
<style type='text/css'>
/<![CDATA[/
#w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#E9E9E9;}
#w2bSocialFloat td{padding:4px;margin:0;border:none;}
#w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
#w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/]]>/
</style>
<script type='text/javascript'>
/<![CDATA[/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/]]>/
</script>
<script src='http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js' type='text/javascript'/>
<script type='text/javascript'>
/<![CDATA[/
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /]]>/
</script>
</b:if>

** 背景を変更: #E9E9E9 をブログの色に合わせて選択します。

次に、ソーシャル ボタン コードを入力します。

タグを検索し、<data:post.body/>次のコード行をその上または前に貼り付けます。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
<tr>
<td>
<a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
</td>
<td>
<iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</td>
<td>
<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton">
<data:post.body/>
<script type="text/javascript">
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
</div>
</td>
<td>
<div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
</td>
<td>
<su:badge layout="1" expr:location="data:post.url"></su:badge>
</td>
<td>
<a class="DiggThisButton DiggCompact"></a>
</td>
</tr>
</table>
</div>
</b:if>

** 複数のタグが見つかった場合は<data:post.body/>、通常、最初のタグの上にソーシャル ボタン コードを貼り付けます。

微調整

1. Digg ボタンと StumbleUpon ボタンを削除する場合は、Javascript/jQuery コードから次のコード行を削除する必要があります。

// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); 

また、ソーシャル ボタン コードから次の行を削除します。

<td>
<su:badge layout="1" expr:location="data:post.url"></su:badge>
</td>
<td>
<a class="DiggThisButton DiggCompact"></a>
</td>

2. 共有バーに [トップに戻る] ボタンを配置する場合は、次の手順に従います。

2a. タグを検索し、</body>次の行をその前/上に貼り付けます。

<li class='Back to top' style='list-style: none; width: 0px;' tabindex='0'> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&quot;#bd-top&quot;).fadeIn()}else{$(&quot;#bd-top&quot;).fadeOut()}});$(&quot;#bd-top&quot;).click(function(){$(&quot;body,html&quot;).animate({scrollTop:0},800);return false})});</script></li>

2b. 次に、ソーシャル ボタン コードの列 [ または<td>] のいずれかに以下のコードを挿入します (次のようになります)。

<td>
<a class='backtop' href='#' id='bd-top'>&#8593;</a>
</td>

それでおしまい。終わったね！この Blogger ガジェットを美化するための他のトリックを教えてください。:-)