メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

ソーシャルアイコン導入方 四角いボタン

singleページにイイネその他ボタンつけました。

facebookとはてぶは素直に、バルーンのソーシャルアイコンがあるんですが、
Twitterとgoogle+はありませんでした。グーグルはあんのかしら。

でも、僕がぱっと見た感じなかったんだ。

基本的に難しい事は無い。

本当なんて事は無い。ただタグを貼るだけ。しかも本当に単純なタグを貼付けるだけ。
設定値もなんかすんごい分かりやすいのでびっくりするほど簡単です。
貼りたい場所に、えいやってタグ貼付けるだけの簡単なお仕事です。
プラグイン使うよりも、自分でタグ貼った方が良い気がします。
以下タグ

facebookソーシャルアイコン

イイネボタンジェネレータ
FBはコード作ってこないとダメです。bodyの開始直後に貼る奴作ってから、下記のコードを貼りたいとこに貼ってください。

</p>
<p>#data-href=&quot;&quot; には自分とこのURL入れてください。記事毎にURL入れなきゃダメなアイコンもあります。<br />
#とりあえず、今のURL取るタグ入れてあります。*Wordpress限定</p>
<p>#data-send falseにすると送信が消えます。<br />
#data-layout 設定値三つくらいありますが、box_countにするとバルーンになります。他には横のバルーンとイイネボタンのみがあります。<br />
#data-action  おすすめかライクボタンか<br />
#data-colorscheme lightとdarkがあります。</p>
<p>&lt;div class=&quot;fb-like&quot; data-href=&quot;&lt;?php echo the_permalink();?&gt;&quot; data-send=&quot;false&quot; data-layout=&quot;box_count&quot; data-width=&quot;150&quot; data-show-faces=&quot;false&quot; data-font=&quot;arial&quot; data-colorscheme=&quot;light&quot; data-action=&quot;recommend&quot;&gt;&lt;/div&gt;</p>
<p>

twitterソーシャルアイコン

</p>
<p>#とりあえずこの設定でバルーンになります。横型のもあります。<br />
#data-via ユーザー名って書いてあるとこだけ@なんちゃらにしてください。</p>
<p>&lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-count=&quot;vertical&quot; data-via=&quot;ユーザー名&quot;&gt;ツイート&lt;/a&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://platform.twitter.com/widgets.js&quot;&gt;&lt;/script&gt;</p>
<p>

はてなぶっくまーくソーシャルアイコン

</p>
<p>#最初のhrefとdata-hatena-bookmark-titleの設定値は現在のURLとタイトルにしてください。<br />
#はてぶされるurlと記事のタイトルになります。<br />
&lt;a href=&quot;http://b.hatena.ne.jp/entry/&lt;?php the_permalink() ?&gt;&quot; class=&quot;hatena-bookmark-button&quot; data-hatena-bookmark-title=&quot;&lt;?php the_title(); ?&gt;&quot; data-hatena-bookmark-layout=&quot;vertical-balloon&quot; title=&quot;このエントリーをはてなブックマークに追加&quot;&gt;&lt;img src=&quot;http://b.st-hatena.com/images/entry-button/button-only.gif&quot; alt=&quot;このエントリーをはてなブックマークに追加&quot; width=&quot;20&quot; height=&quot;20&quot; style=&quot;border: none;&quot; /&gt;&lt;/a&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://b.st-hatena.com/js/bookmark_button.js&quot; charset=&quot;utf-8&quot; async=&quot;async&quot;&gt;</p>
<p>

google+ソーシャルアイコン

</p>
<p>#凄いシンプルです。</p>
<p>&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;<br />
&lt;g:plusone size=&quot;tall&quot;&gt;&lt;/g:plusone&gt;</p>
<p>

公式に行くと設定値とか呼び出し方色々書いてありますが、

特に読む気にもならず、これでいいやとコピペしました。

とりあえず設置はカンタン

上記のソースそのままはれば、多分動くと思われます。
FBのみ、なんかややこしいコードをBodyのどっかに貼らないとダメです。
僕は開始直後に貼ってます。でも多分どこでもいいとおもいます。

関連記事

コメントをお待ちしております