JUGEMの独自タグを使ってみよう!〜SNSに反映させる画像の設定〜

さて、前回の「Pin it」ボタンが表示される独自タグの使い方はマスターできたかな?

はい、OKですー!

よぅし!!じゃあ今週は、ブログの更新を通知した時に、SNSに表示される画像についての独自タグを紹介するよ。

わあ!それぽりんがやりたかったやつだー!!この独自タグを設定しておくと、自分の記事内の画像がSNSに反映されるんですね!

今回使うタグはこれだよ。{og_image} 早速使い方を見てみよう!
前回と同様、管理者ページ内「HTML・CSS編集」→「HTML編集フォーム」に 独自タグ{og_image}を記述します。


※<head>〜</head> 内のみ有効 

設定が完了したら、記事投稿して確認してみるよ。 この独自タグは、記事内に使われている一枚目の画像がSNSに反映されるようになっているんだ。
※画像を複数枚投稿した場合は、一枚目の画像が投稿されます。


記事投稿を試す前に、Facebookが連携されていることを確認してね!
連携方法はこちら!

記事を書いて、画像を挿入したら、Facebookに投稿された画像を確認してみよう!

2.png

ちゃんと画像が投稿されました!!!

画像がない記事の場合には、こんな風にJUGEMのロゴ画像が表示されるんですね!!

画像なし.png

みんなも、ブログの更新情報を是非画像付きで拡散してみてね!!


JUGEMの独自タグを使ってみよう!

ねえねえみんな、独自タグって知ってるかい?

はい、JUGEMには独自タグがたくさんありますよね!!
<<JUGEMの独自タグの種類と動作一覧はこちら>>

いっぱいあるのは知ってるけど、使い方がよく分からない。
というか独自タグってなんですか?

独自タグっていうのはね、簡単にいうと、JUGEMブログ内で使える
“魔法の言葉”なんだ!

( あれ、シラッキー先生そんなキャラだったっけ )

JUGEMブログで、これらの独自タグをHTML内に記述するだけで、動作一覧にあるような特別な処理を行なってくれるようになるんだよ。

わーーすごーーい!本当に魔法みたーーい!!!

( あれ、ポリンまで )

では早速、最近新しく追加された独自タグの使い方を例に見ていくぞ!!
最近追加されたのは、このふたつ!
・「Pin It」ボタンを表示する独自タグ
・SNSでの画像表示を指定する独自タグ



JUGEMの独自タグを使ってみよう!
「Pin it」ボタンを表示する独自タグを使ってみよう!

ところでそもそも、Pinterestっていうサービスは知ってる?

はい、もちろん知ってます!自分の気に入った写真や動画を貼り付けて編集したり、共有できるサービスですよね◎

おお!自分の好きな画像がババ〜ッ!と一覧できたり、膨大に並ぶ写真の中から、視覚的に好きなものを見つけられるのは楽しいよね。

今回JUGEMでは、自分のブログの画像をPinterestに投稿する、Pin Itボタン設置の独自タグができたんだ!

使い方のご指導をお願いします!

OK〜。管理者ページ内「HTML・CSS編集」→「HTML編集フォーム」に
独自タグ{pinterest_pin_it}を記述します。

※<!-- BEGIN entry --> 〜 <!-- END entry -->内のみ有効

おお、設置についてはこれだけでいいのですね、簡単!
ブログを確認すると、Pin Itボタンが反映されたよ!


そう簡単でしょう。よーし、じゃあこの記事について、Pinterestに公開してみようか。Pin Itボタンをおしてね。


こんな画面が出るから、自分の好きなボードネームを設定して、
最後に「Pin It」をクリックするよ!すると…



おお〜ちゃんとPinterestのボードに反映されました!!


ちなみに、一記事の中に画像を複数投稿した場合は、記事の中の
一番最初の画像が「Pin it」の対象になるよ。

画像がない記事も投稿できるんですか?

うん、できるよ。記事に画像がない場合は、下みたいなJUGEMロゴが表示されます。


よぉーーし!!ブログで素敵な写真たくさん投稿してPinterestに並べようっと!!

SNSでの画像表示を指定する独自タグについては、次回説明するぞ!

はい!よろしくお願いしま〜す!!


Facebookの連携方法

僕のブログにTwitter連携したらさー、みんなにたくさん見てもらえるようになったよ〜!

ブログを更新して、たくさんの人が見てくれるとやっぱりうれしいよね?

もちろんです!もっともっと更新しようっていう気になりますね!

じゃあ、Facebookにも連携しちゃえばいいじゃない!

よーし!そうと決まれば今日は、ぽりんと一緒にFacebook連携の方法を教えるよ!

わーい!お願いしまーす!


PC版管理者ページで、「ブログ設定」→「ユーザー設定」をクリックするよ。


Facebookの「アカウントを設定する」をクリック。



Facebookには、連携させたいFacebookアカウントでログインしてね。


アプリの説明ページが表示されるよ。


お、公開範囲っていうものが設定できるの?

そう。公開範囲設定は、自分が設定した特定の人にだけ「ブログ更新したよ〜」ってタイムラインに公開する範囲の設定だよ。

公開範囲.png

公開範囲を設定したら、次はブログを更新したことを、ウォールやタイムラインに投稿する許可をしてね。


ここでスキップすると、せっかく連携してもFacebookに投稿されなくなっちゃうから気をつけてね。

許可をおすと、管理者ページの連携ページに戻ってくるよ。これで完了だ!!


早速記事を投稿してみよう!!記事投稿のページでは、Facebookに「投稿する」になっているか確認して投稿だよ!

☆ウィジウィグエディターはこちら☆ ウィジウィグエディター.jpg

☆シンプルエディターはこちら☆ シンプルエディター.jpg

もちろんだけど、下書き保存した記事はFacebookには反映されないよ。
一度下書き保存して再度編集した場合にも、Facebook投稿が「投稿する」になっているか確認してね!!


はーい!了解ですっ!僕もちゃんと投稿できました!投稿完了.jpg






Facebook連携に関して、以下の注意点もチェックだよ!

◆PC向け管理画面からの投稿のみ対応です。
◆親ユーザーのみ連動が可能です。
◆Facebookのファンページへは、連動できません。
◆未来投稿・下書き保存の記事については、自動投稿されません。
◆ Facebook投稿後に記事タイトルを変更しても、Facebookには反映されません。
◆アクセス制限(ブログ全体に鍵をかける)機能のご利用時には、記事のタイトル・サムネイル画像は表示されません。

なんか今日のぽりんどうしたの。いやにしっかりしてたじゃん!

ぽりんはいつもしっかりしてるよぅ!!ぷんぷんっ!!
教えてあげたんだから素直に感謝しなさいよね!!

ひ〜っ!ごめん、ごめんってばぁ〜!!

まあまあ(笑)。みんなも是非、Facebook連携を試してみてね〜!


JUGEMとTwitterを連携させてみよう!!!

うーん。Twitterがうまく連携できないよー。

う〜ん、おかしいなあ〜。

あれ、困った顔してどうしたんだい?ロベ君達。

Twitterを連携したいのですがうまく出来なくて。
ここの、【アカウントを設定する】をクリックするので合ってますよね?



■PC版管理者ページ ⇒ ブログ設定 ⇒ ユーザー設定  

そうそう。クリックしてみて。

む、Twitterのページに飛んでこんな画面が出てきたよ!

 

これは、Twitterにログインしてないと表示される画面だよ。
Twitterのログイン情報を入力して【連携アプリを認証】をクリックすればOK!

 

そうか!僕、何も入力しないでクリックしてた〜。

Twitterのアカウントも、間違えないようにしっかり注意ダネ!

ちなみに、Twitterにログインしていると こっちの画面が表示されるよ。

 

これは、【連携アプリを認証】をクリックするだけでOK!

Twitter連携の設定が完了したら、 Twitterまとめ投稿の設定項目が表示されるよ。

 
renkei_500_copy.jpg
[+](画像をクリックして拡大)


※Twitterまとめ機能「コミック表示  

わぁー。できた!できた!

Twitterまとめ投稿についてはこちらの記事にもお知らせにも説明してあるので、読んでみてネ!

それでも設定できないときは、Twitter側でエラーが発生していないか確認して、時間をおいてから試してみてネ!

はーい!


【後編】Facebookの「いいね!」って何?

前回に引き続き、今日は、Facebookに表示される画像の指定方法を紹介するんだったね。二人共覚えてる?

覚えてますとも!!せっかく僕がぽりんへ溢れる愛を表現したっていうのに、ぽりんったら僕のk……

前回の記事内容はコチラで紹介しているよ★!!
■【前編】Facebookの「いいね!」って何?

また遮られた。

先生!!!早速今日の内容について教えてください!

容赦ねぇな。

では、早速始めるよ! 今回は、Facebookのウォールや個人ページに表示される、左下の画像を指定できるよっていう話だったよね。before.jpg













そうですそうです!

あれ〜先生、よく分かんなくなってきちゃった!
ぽりんがその設定をしたら、ぽりんのブログに「いいね!」してくれた人のFacebookページに、ぽりんが指定した画像が出るっていうことよね?


なんだかまどろっこしい言い方だなぁ。僕のブログに「いいね!」したら、君のウォールにはこの画像が出るよ!っていうことだよ。

うん、まあ、どっちもどっちだけど、二人共合ってるよ。
とにかく設定してみて、自分で自分のブログに「いいね!」をしたら、どういうことか分かるよ!


( 先生、雑・・・! )


方法は、JUGEMの管理者ページにログインして、
「デザイン編集⇒HTML・CSS編集⇒■HTML編集フォーム」
<head>〜</head>内に次のタグを画像のように記述するんだよ。
今回指定した画像は正方形で作成してみたよ。




■□記入するタグ□■
 <meta property="og:image" content="画像ファイル名" />




そうすると・・・じゃじゃ〜〜〜〜ん!!!!after.jpg












  おおーーーーーーーーー!
( ※シラッキー先生「じゃじゃ〜ん!」とか言うんだ、の意 )


ちなみに、設定しても、指定した画像に変わらない時は、 Facebookのキャッシュが影響してるかもしれないから、 FacebookのヘルプセンターでOGタグについて確認してみてね。


なるほどです!Facebookに、またひとつ詳しくなったネ★!

それは良かった。分からないことがあったら、何〜でもこのシラッキー先生にご相談なさい!!

先生、インコはどうして人間の言葉を真似するんですか????

・・・また来週っ!!


【前編】Facebookの「いいね!」って何?

は〜五月になって、今日も天気が良くて気持ちがいいね!

いいね!

あ、そうだ。「いいね!」といえばさ、よくブログにFacebookの「いいね!」ボタンが表示されているのを見かけるけど、アレどうやってるのかな?僕も「いいね!」ってされたい!


え、ぽりんでも設置していたのに、意外とロベ、知らなかったのネ!
JUGEMでは、Facebookの「いいね!」や、Twitterの「ツイートする」などのソーシャルボタンが 簡単に設置できるんだよ。


うむうむ。その時のお知らせはこちらだよ!
■ソーシャルボタンが設置可能に

へぇー。 この「いいね!」を押すとどうなるのかな?

例えば、ロベが私のブログに「いいね!」をした場合、私のブログ上では、こんな風に「いいね!」された数が表示されるよ。

▼ロベ君に「いいね!」されたぽりんちゃんのブログ


blog_iine.JPG

コレ、ぽりんには僕が「いいね!」したことが分かるの?

ぽりんは「いいね!」された数は分かるんだけど、残念ながら誰が「いいね!」を押してくれたかは、このブログからじゃ分からないの。

えー!ぽりんに僕の愛情が伝わっていないなんて・・・!

( んな、大げさな・・・。苦笑 )

そんなにガッカリしないでよ、ロベ君。
確かにぽりんちゃんのブログからだけでは、誰が「いいね!」してくれたかは分からないけれど、「いいね!」をした人(つまり、ロベ君)のFacebook上では、ウォールとプロフィール画面で、こんな風に表示されるんだよ。


▼ロベ君のFacebook上のウォール表示


wall_400.jpg

▼ロベ君のFacebook上のプロフィール画面(個人ページ)表示


profile_400.jpg

ということは、Facebookで繋がっている人なら、上のウォール表示が見えるんだ。例えば、僕とかね。

例えば、ぽりんとかね!◎

なるほどー!Facebook上で繋がっている人が「いいね!」してくれたら、Facebookのウォール上で確認出来ることがあるということだね!

そう、そういうコト!!

僕のぽりんへの愛情がFacebookのウォール上で伝わるっていうことダネ!

(  無 感 情  )

ちなみに、左下に表示されている画像も 表示させたい画像を指定することができるんだよ!

わぁ!シラッキー先生、その方法知りたいです!たった今傷ついたばかりの僕の心を和らげるために、Facebookのことで頭をいっぱいにしたいです!!

( ご、ごめんて・・・。 )

よ、よぅし!それは、また次のStepUpで紹介するね。


1

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索