WordPressでサイドバーにLINEオープンチャットのリンクを入れる方法

202209追記:目次に書いているOGP画像取得項目の方法では画像取得ができなくなっているようです。

その項目は無きものとしてご覧ください。

 

調べてもほぼ出てこない「コアな内容」で第2回(全2回だからこれで終了)をお送りしたいと思う。

 

ちなみに基本編はこちらで紹介しています。(これがやりたい人が95%くらいだろう)

どこに行こうかな

わたしゃのぉ、古の時代にブログをやっていたんじゃ(黒歴史) で、その際にサイドバーにベタベタと「リンク集」なるものを作成…

 


ちなみに方法は2種類あって、「トークルームをそのまま埋め込む方法」はこのサイトで紹介されているし、私もこのサイトの通りに設定、設置していた。

 

だが1つ難点があってな。美しくない

 

仕様上、無理やり埋め込んでいるので仕方ないことはもちろんわかっているのだ。
わかっているのだが・・なんとかしたかった。しかし方法もわからず、長らく悩んでいた。

 

で、昨日基本編の記事を書いている間にふと思ったわけよ。
――これも同じ道理でいけるのではないか?と。
結果から言うと、ちょっと違うのだが(画像の取得がトークルーム独自のものではできなかった)、画像はピッタリと収まり美しくはなった
なお、トークルームの紹介ページ自体は画像から飛べば表示されるので、結果的には満足である。

 

 


LINEのトークルームURLを取得する

 

PC版LINEを使用している人はだと思うので、スマホでURLを取得 →PCに情報を移すという順番で記載していく。

 

「LINE トークルーム URL 取得」で検索。

出てきた結果の通りに進めていく。

 


スマホ操作

 

※私はAndroid端末を使用しているので、Appleは知らん。

ごめん。

多分似たような配置だと思う。

 

スマホのLINEでURLを取得したいオープンチャットのトークルームを開く。

右上にある(ハンバーガーメニュー) >招待 >リンクをコピーをタップする。

 → →

トークルームのURLがコピーされた。

 

で、グーグルアカウントは大体誰でも持っていると思うので、それで紹介する。

※この手順はスマホ →PCに連携さえできればOKなので、使用するのは何でもいい。

 

いや別にスマホでそのままWordPressの編集に入ってもいいんだけどね・・。

私はPCを絶対使うマンなのでそのまま手順を書いていきますね。

 

コピーしたURLGmailの新規メールに貼り付け下書き保存

 → →

 


PC操作

 

「ogp画像 確認」で検索。

出てきたツール自体に大差はないので、どれを使ってもよろし。

ラッコツールズ

URLを入力すると各SNS(facebook・twitter・はてなブックマーク・LINE)でページをシェアした際のOG…

 


OGP画像を取得する

 

PCでGmailの下書きを開いてトークルームのURLをコピーする。


ツールの「URL」欄にそれを貼り付ける

程なくして様々なSNSでシェアした際の結果が表示される。


で、SNSの種類はどうでもいいので、「トークルームのURL」と「リンク用の画像(OGP)」をコピーする。


で、コピペ用にこれを用意した。

画像入りでリンクを作成する
<a href=”リンクしたいサイトのアドレス(URL)をここに入れる”><img src=”リンク用の画像を用意して入れる”><font size=”4″>リンク先のサイト名を入れる</font></a>

それぞれにURLをコピペして入れる。

例) <a href=”https://line.me/ti/g2/EKcd5F9gOVhYADgy26ui4cpOioA1nnJv1paM5A?utm_source=invitation&utm_medium=link_copy&utm_campaign=default”><img src=”https://profile.line-scdn.net/r/g2/group/og_tag_default_image.png/c.496×273″><font size=”4″>リンク先のサイト名を入れる</font></a>

こんな感じ。

 


サイドバーエリアにウィジェットを追加

 

このサイトではウィジェットを旧来の表示にしています。
「Classic Widgets」プラグインを適用していない方は、若干表記した項目が違うかもしれない。悪しからず。

 

WordPress左側ダッシュボードの🖌外観 >ウィジェット

カスタムHTML(またはテキスト)の設置位置をサイドバーエリアに選択し、ウィジェットを追加

 


追加したら、サイドバーエリアを展開し、カスタムHTMLを展開する。

このようなウィジェットが追加された。ここで、「タイトル」と「リンクを貼りたい内容」を記載していく。

タイトルは普通に「リンク」でよいと思う。

内容に先ほど作ったHTMLコードをコピペして保存する。

 

(作業終了)

 


サイドバー表示結果

上手く表示された。ちなみにクリックした先はトークルームの招待URLになる。

 →

 

こんなの誰も探してないんじゃないか。

そう思うけれど、私が探したのだから、他の人も方法を探しているかもしれない。

 

自己満足の領域ですな(大満足)