creatersnest3

【WordPress】記事にソーシャルブックマークを設置する方法


こんにちは!
今回は、WordPressの記事にソーシャルブックマークを設置する方法をご紹介します。
ソーシャルブックマークは、各々の公式サイトからコードが公開されています。
そのコードを記事ページに張り付ければブックマークを追加できます。
今回は、3ソーシャルブックマークについて説明します。

 

はてなブックマーク

hetena

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

http://b.hatena.ne.jp/guide/bbutton

手順に沿ってボタンを取得しましょう。

1)ボタンのタイプを選びましょう

2)ボタンの設定をしましょう

3)ボタンを確認しましょう。

これで、横にボタンとコードのプレビューが表示されます。

コードを取得し「ページのアドレス」と「ページのタイトル」の箇所を、
以下のように WordPress のテンプレートタグに書き換えて、自動的に各々のページの URL を出力してくれるようにします。

↓↓↓↓↓↓↓↓↓↓↓

 

書き換え後は下記のようになります。

 

こちらを記事内に張り付けましょう。

LINE

line

 

 

 

 

 

 

 

 

 

 

 

https://media.line.me/howto/ja/

1)ボタンのタイプを選びましょう

2)送るテキストを選択

3)プレビューを確認して、コードをコピー。

表示されているコードをコピーして、あなたのWebサイトの表示したい場所に張り付けてください。

公式ページの「技術仕様 3 記述例」のところに、
「WordPressのテンプレートに記述する場合」があるので、そこにあるコードを利用して下さい。
下記のコードが例です。

 

LINEで送るボタンの画像は、ダウンロードしたzipファイルを解凍してお使いください。
ご自身で使いたいボタン画像を選んで、利用ください。
ダッシュボードから、

「メディア」 ⇒ 「新規追加」

から挿入しましょう。

※公式で取得したコード内にある[ボタン画像のURL][ボタン幅][ボタン高さ]を、いまアップロードした画像に合わせて変更したら、完了です。

Twitter

twitter

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://about.twitter.com/ja/resources/buttons#tweet

手順に沿って、コードを作成します。

あとは、下記の部分を変更して記事内に貼り付けるだけです。

 

まとめ

いかがでしょうか。
今回は、公式サイトで取得したコードを編集して貼る場合をご案内します。
なぜならプラグインを使う方法もございますが、こちらのほうがカスタマイズがしやすい方法だからです。
是非、記事にソーシャルブックマークを設置をしサイトを充実させましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleざらっと感やノイズ感を加えられるテクスチャ素材50個