HMTLコードを触らずにbloggerにソーシャルボタンを追加する方法

シェアする

出来るだけHMTLコードをいじらない

ソーシャルボタンのデザインをバルーン型でbloggerに追加する方法について書いていきます。

bloggerはHTMLコードをいじることが出来ますが、指定される部分を探すのが大変なので、それはやらずにバルーン型を入れます。

基本的にはコピーアンドペーストで作れる

まず設置するのは
ソーシャルボタン一覧

この4つ

facebookはこちらからボタンが取得出来ます

facebookの開発者向けページ

自分のブログのURLを”URL to Like”に記入
layoutでverticalを選択します。ACTION Typeでいいね!かオススメかを選びます。友達のアイコンもチェックを外しましょう。送るボタンも追加できますが、デザインが崩れるのでなし。

ゲットコードでHTML5のコードが2つ出るので
いいね!ボタンの組み込みコード画面
あとはbloggerでHTML/javascriptを追加するウィジェットにコピペするだけ!
body直下?という人は、大丈夫、これで動きます。

Google+1ボタンはこちらから取得

グーグル+1ボタンの取得画面
オプションを開くとURLを指定出来るので、自分のブログなりのURLを入れて、写真と同じ設定にすればok
後は左側のボタン下のコードをコピーして、facebookと同じように貼るだけ。

Twitterはこちらから取得

※Twitterのみ開発者向けページでしか教えてくれないので、追記する必要があります。
ツイッターのコード取得画面
share a linkを選びます
share URLに自分のサイトを記入
他の物を一緒に並べるなら、ラージサイズは選択しません。
Viaに自分のTwitterアカウントを入れておくとつぶやかれるたびに、メンションが来ますw
オプトアウトはご自由に。
コードを取得したら同じようにコピペします。
貼り付けると
data-lang “ja”>ツイート
jaのあとにdata-cout=”vertical”を追加してください。これでバルーンになります。

はてなボタンの取得はこちらから

はてなのページは日本語なので楽勝ですね。ブックマーク数をverticalにしてください。他と同じように記入してコピペするだけ。
スポンサーリンク
スポンサードリンク

ウィジェットについて

コピペした順番に左から表示されるので、私は段差が美しくないので、順番を変えました。

これで高さが綺麗に揃いました笑

以前紹介したSharethisでもいいのですが、短縮URLがsharethisで@sharethisって入ってしまいサイトそのもの用にはこちらを設定しておくといいですね。
ブログなどの記事毎にボタンを追加する場合には、コードをいじらなくていいのでsharethisの方が圧倒的に楽です。

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする