「元うなぎや Neo」でFacebookページに本腰を入れ始めたのですが、やっぱりアピールしたい！ってことで調べてみました。
「この記事が気に入ったらいいね！」って、よく見かけるんですが。どれもこれもWordPress用ばっかりｗ
私はBloggerなので、PHPコードは使えませんし、「wp_」関数も使えません！
Bloggerで使えるようにしてみたので、メモです！
もくじ
WordPressの元のコード
元になるのはこちら。上記コードはこちらから、そのまま貼り付けております。
FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】
- WordPressだったら、プラグインで導入できるようになっているようですよ！
Bloggerで使えるようにする！
上記部分で言うと。- <?php
- wp_get_attachment_url
Blogger用の「記事がよかったらいいね」 コード！
Bloggerのwidget機能を使って実装しています・・・。もっといい方法があったかもしれないです。
- コピペ用テンプレート
ソースは以下にも公開しています。
実装について
Bloggerのwidget機能を使って実装しています・・・。もっといい方法があったかもしれないです。
- 差分
修正について
- PC用
id='HTML17'
- スマホ用
id='HTML17'
- 画像
- ここに画像URLを入れる
- ここにFacebookページのURLを入れる
- ここにTwitterアカウントのURLを入れる
Twitterで○○をフォローしよう！ Follow @○○
ここも、自分のに合わせて変更ですよーテンプレートの適用
Bloggerの「テンプレート」画面で、- バックアップ
- コードの適用
「HTML の編集」から、
「threaded_comments」の下、「widget」を閉じているあたりから挿入しました！
スタイルシート
見た目にかかわる部分こちらは、このまんま使っていいと思いました。
「PC用」、「スマホ用」どちらも適用しましょうね！
- PC用
/*記事がよかったら、いいねPC*/
.p-entry__push {
margin-bottom: 20px;
display: table;
table-layout: fix;
width: 100%;
background-color: #2b2b2b;
color: #fff;
}
.p-entry__pushThumb {
display: table-cell;
min-width: 240px;
background-position: center;
background-size:cover;
}
.p-entry__pushLike {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
line-height: 1.4;
font-size: 20px;
}
.p-entry__pushButton {
margin-top: 15px;
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.p-entry__pushButtonLike {
line-height: 1;
}
.p-entry__note {
margin-top: 15px;
font-size: 12px;
color: #999;
}
.p-entry__tw-follow {
margin-bottom: 10px;
background: #f4f4f4;
width: 100%;
padding: 15px 0;
}
.p-entry__tw-follow__cont {
text-align: center;
font-size: 15px;
color: #252525;
}
.p-entry__tw-follow__item {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
/*記事がよかったら、いいねPC ここまで*/
- スマホ用
/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
padding-bottom: 15px;
overflow: hidden;
}
.p-shareButton__buttons {
font-weight: 700;
color: #fff;
font-size: 13px;
text-align: center;
}
.p-shareButton__buttons>li {
padding-left: 3px;
padding-right: 4px;
}
.p-shareButton__buttons .c-btn {
padding: 8px 0;
border-radius: 2px;
}
.p-shareButton__buttons .c-ico {
display: block;
margin: auto auto 5px;
}
.p-shareButton__fb {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
width: 115px;
}
.p-shareButton__fb-cont {
position: relative;
width: 108px;
margin: 0 auto;
}
.p-shareButton__fb-unable {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.p-shareButton__cont {
margin: 15px 0 0;
}
.p-shareButton__a-cont {
background: #2e2e2e;
display: table;
width: 100%;
}
.p-shareButton__a-cont__img {
display: table-cell;
min-width: 130px;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.p-shareButton__a-cont__btn {
display: table-cell;
padding: 12px;
text-align: center;
}
.p-shareButton__a-cont__btn p {
font-size: 12px;
color: #fff;
font-weight: 700;
padding: 5px 0 15px;
line-height: 1.4;
margin-bottom: 0px;
}
.p-asideFollowUs__twitter {
border: 2px solid #e6e6e6;
margin-top: 15px;
padding: 12px 0;
}
.p-asideFollowUs__twitter__cont {
text-align: center;
font-size: 13px;
color: #252525;
font-weight: 700;
}
.p-asideFollowUs__twitter__item {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
スタイルシート CSS 適用方法
「テンプレート」 ⇒ 「カスタマイズ」から
参考ページ
- 元ネタです！
バイラルメディア風、記事下にアイキャッチ画像と並べてＳＮＳボタンを設置する方法 | スキコトログ
- これ見て、Bloggerでもできそう！って思ったけど、ご自身用のカスタマイズが残っていたようです～
【コピペでOK】ライブドアブログに「この記事が気に入ったらいいね！しよう」の設置方法 : ガジェアニイズム-Gajeanism-
