サイトマップ
横か、縦かで複数のＳＮＳ投稿ボタン配列
ここでは、ＳＮＳ投稿ボタンをシリウスサイト内で複数配列表示させる方法を
解説してまいりますが、ＣＳＳ記載....jqueryなど組み込んで形成するもので
はなく...ほとんど我流でもありませんでＨＴＭＬのみで作れます..
投稿ボタンですが、記事書いてすぐアップして、追加したぺージを開いて投稿ボタンをポチして
SNSへタイトルと一部説明文を投稿する...
アメブロやブロガーでは標準装備の投稿機能はシリウスにありませんで手動..で行く..です...
ただ、毎度手動なので推奨する手法というレベルにはなく...何だこりゃと思われましたら
他で何か探し求めてください......
クレームのお便りなど不要ですので..当記事は忘却してください..
ネット上で採用できる投稿ボタンは、画像ありなので読み込むためスクリプトを使ってますね..
AMPの構築サイトでしたらスクリプトありとなれば即AMP認証から外されます..
AMPでは使えない..
でも複数のやりようは面倒なので一本に絞っている..
当サイト含めた関連はここでいう手動でやっている..ことになります...
面倒でしょう？...いやいや慣れればそんなでもありません...
では、説明へ行きますね..
その前に以下...
Googleニュース お知らせ
SNSの1つであるGoogle+が一般向けサービスを2019年4月で終了しております...
解説では名残惜しくていまだ置いてはおりますが、リンクしても終了アナウンスが確認
されるだけですね..
GmailやGoogleフォトといったサービスは、Googleアカウントと紐付いている事情でしょうか？
不安も拭い去れませんが、今後も変わらずに利用できますので安心してください。
進みましょう...
どんな仕組み？
あたし理解ではありますが、記事を新設、更新後公開画面でボタンをポチ...
すると該当のSNSに記事が読み込まれ 投稿ページに移動...
投稿ポチするで...フェイスブック、ツイッターに開設の自分ページに更新情報が
追加される...
2019 08 追記記事
AMPサイトでは投稿できない症状です..改善に務めますのでしばらくは
AMP構築サイトでのみ使用は不可としてください。
関連するページ..フェイスブック投稿からAMPサイトへのリンク誘導
..................................
その他の意味合いは知りません...未熟者?
以外の使用法はご自身でお調べください...
スタイルは二通り..
表示例...横配列..画像を使っての表示
上例は、各SNSのシェアリンクコードに画像アイコンを組み合わせた...
アイコンはその辺のブログから切り取ってきた画像なんですね
画像ではなくフォントで横配列ですが、tdタグで各列を囲むと横配列され、はずすと縦配列になります..
（コピーコードでご確認頂けます）
横配列
画像ではなく、フォントのみで形成すると以下例で表示されます
上上例は、HTMLコードのみで形成されますので、以下に配置のコードを
コピーし、画像とリンクをあなたのモノに張り替えてください
facebook twitter google＋ linkedin pinterestで.組み合わせており
ますが....
他のSNSを使いたい場合は、シェアコードを書き替えるか、追加してください...
数は増やせます..
アイコン画像は、各SNSとも横サイズにずれがありますが縦サイズは切り取り
時点でずれが生じますので、heightコードで数値を合わせてください...
ただ、横サイズにずれがあるとスマホ閲覧では、きれいに整列しませんので
できれば、縦横ともすべて同サイズで数値指定してください..
ここ大事...
この仕様は、SNSボタンを作動させると発信ページの読み取りが行われる
のですね...
ですので、リンクコードを張り付ける際は、毎回その取り付けたページの
リンクに書き換えてください
www.affiliateno1.comは、当サイトURL、ここを張り替え
カテゴリーページまではコード末に/を付けますが、エントリーページコードは
file60.html のようにファイル名の後に.htmlを付けること...
そして / は付けないでください..無しですよ。
付けるとページが読み込まれなくなります。
HTMLコード
画像あり
コピーして貼り付ければ整列します..
<td><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_238.jpg" style="width:101px;height:25px;" alt="" /></a></td>
<td><a href="http://twitter.com/share?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_239.jpg" style="width:87px;;height:25px;" alt="" /></a></td>
<td><a href="https://plus.google.com/share?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_242.jpg" style="width:106px;;height:25px;" alt="" /></a></td>
<td><a href="https://www.linkedin.com/shareArticle?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_241.jpg" style="width:95px;;height:25px;" alt="" /></a></td>
<td><a href="https://www.pinterest.jp/pin/create/button/?url=http://www.affiliateno1.com/"><img src="<% pageDepth %>img/clipimage_245.jpg" style="width:87px;;height:25px;" alt="" /></a></td>
画像なし,,フォントで
<td><a href="https://www.facebook.com/sharer/sharer.php?u=http://www.affiliateno1.com/">facebook</a></td>
<td><a href="https://twitter.com/share?url=http://www.affiliateno1.com/">twitter</a></td>
<td><a href="https://plus.google.com/share?url=http://www.affiliateno1.com/">google＋</a></td>
<td><a href="https://www.linkedin.com/shareArticle?url=http://www.affiliateno1.com/">linkedin</a></td>
<td><a href="https://www.pinterest.jp/pin/create/button/?url=http://www.affiliateno1.com/ＳＮＳ投稿ボタンまとめて取り付け/">pinterest</a></td>
plus.google.comは終了しておりますので行を削除してください...
シリウスに貼り付けてプレビュー段階で、facebookは反応しません..しますけど記事が遅れない..
一度アップしてから投稿してください..
投稿した際、SNSで表示される画像の設定
フェイスブックに投稿しますよね
他サービスなら記事内に置いた画像がフェイスブックでも反映されるわけでしょ..
シリウスでも同じように画像も送信する際は、記事画像１へ画像を入れてください..
記事内エディタスペースに画像配置しても読み込みされません..
サムネイル画像に入れても読み込みされません..
もし、別なやりようはないかなと？と思われるなら..記事画像１は未記入にして、以下コードをお使いください..
画像コードは書き換えください...
<p class="txt-img timg-l" style="float:left;width:520px;"><img src="./img/20171027_021836.jpg" style="width:500px;" alt="" /></p>
上は、記事画像1のソースコードで、記事内どこでも使えます..
アイコン...備考
アイコンは、四角でも丸でもいろんなデザインを見る機会がありますね
自主製作してもよいんじゃないかな？とは理解します...
サイドバー表示
サイドバー、フリースペースに入れ込みはできますが、ページではないが
理由で、各個別ページで反応しない..です。
イチカラムのレイアウト枠で分配しサイドバー風に表示させれば可能かと？
通常構築では取り付け不能？
後書き
カテゴリーページなんら問題なく反応していたので、エントリーページでも？
当然、と思いきや..ページが見当たりませんと表示される始末でした。
.htmlで終わる記載でなければ反応しない...
/は無しとは気が付きませんで、導入した方10人ほど...申しわけございません
でした。
リンクコード及び画像は一度作っておけばページを追加するごとに末尾だけ張り替えるだけで
簡単に使えるとは思いますが、毎回の記載追加が良いでしょうね...
後回しにするとなんか面倒ですよ...
では、さいなら．．．