6bitaMemo（6bitaドットコム）: GoogleBloggerでオリジナル（自作）のシェアボタンをつくる

2020年4月6日月曜日

GoogleBloggerでオリジナル（自作）のシェアボタンをつくる

https://blog.aristo-solutions.net/2018/07/bloggersns_24.html

↑↑↑の記事を実際にやってみた

まず<head>内に

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

↑↑↑このリンクを貼らないとアイコンが表示されない

←こういうやつ

<style>
div.sns-share-buttons{
margin-top:0.5em;
margin-bottom:1em;
margin-left:auto;
margin-right:auto;
width:99%;
}
.sns-share-buttons div{
text-decoration: none;
margin-top: 0;
}
.sns-share-buttons ul {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.sns-share-buttons ul:after {
display: block;
clear: both;
content: '';
}
.sns-share-buttons li {
float: left;
width: 32%;
margin: 0.1em !important;
padding: 0 !important;
}
.sns-share-buttons li a {
font-size: 14px;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
color: #fff;
}
.sns-share-buttons li a:hover {
opacity: .8;
text-decoration: none;
}
.sns-share-buttons li a:visited {
color: #fff;
}
.sns-share-buttons .tweet a {
background-color: #55acee;
}
.sns-share-buttons .facebook a {
background-color: #315096;
}
.sns-share-buttons .googleplus a {
background-color: #dd4b39;
}
.sns-share-buttons .hatena a {
background-color: #008fde;
}
.sns-share-buttons .line a {
background-color: #00c300;
}
.sns-share-buttons .pocket a {
background-color: #EE4256;
}
.sns-share-buttons .icon-hatena{
font-style: normal;
font-weight:bold;
}
@media(max-width: 768px) {
.sns-share-buttons li span {
display:none;
}
}
</style>

のスタイルシートを貼る

次に↓↓↓

<div class='sns-share-buttons'>
<div>
<ul>

<li class='tweet'>
<a expr:href='"https://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'>
<i class='fab fa-twitter'/><span> tweet</span>
</a>
</li>

<li class='facebook'>
<a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'>
<i class='fab fa-facebook-f'/><span> facebook</span>
</a>
</li>

<li class='hatena'>
<a expr:href='"https://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'>
<i class='icon-hatena'>B!</i><span> </span><span> はてブ</span>
</a>
</li>
</ul>
</div>
<div>
<ul>


<li class='line'>
<a expr:href='"https://social-plugins.line.me/lineit/share?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'>
<i class='fab fa-line'/><span> LINE</span>
</a>
</li>

<li class='pocket'>
<a expr:href='"https://getpocket.com/edit?url=" + data:post.canonicalUrl + "&" + data:post.title + "｜" + data:blog.title' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' target='_blank'>
<i class='fab fa-get-pocket'/><span> Pocket</span>
</a>
</li>
</ul>
</div>
</div>

コレを

【モバイル】
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> 

と

【PC】

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<data:post.body/>
<div style='clear: both;'/> 

の下に貼った

ガジェットのHTML/JavaScriptに貼ると動かなかった

ちなみに参考にしたページのLINEではうごかなかったのでlineのURLだけ

https://social-plugins.line.me/ja/how_to_install#lineitbutton

の

https://social-plugins.line.me/lineit/share?url={encodeURIComponent(URL)}

を使用した

<a expr:href='"https://social-plugins.line.me/lineit/share?url=" + data:post.canonicalUrl'

↑↑↑こんな感じで

特殊文字一覧
< < 右大不等号
> > 左大不等号
& & アンドマーク（アンパサンド）
" " ダブルクォート（引用符）
' ' シングルクォーテーション
  空白文字