Facebook, Twitter, Google: tombol statis Membangun Sendiri

Saya dijelaskan kemarin , bahwa saya berubah dari dinamis untuk tombol statis dan mengapa saya melakukan itu. Sejak artikel tetapi kemudian menjadi sedikit lebih panjang, dan itu cukup terlambat, saya memutuskan bagian praktis, sehingga penjelasan dari contoh kode, untuk melanjutkan sekarang.

keseluruhan adalah jika sesuatu tetapi ilmu roket. Berikut adalah kode dari dalam saya single.phpadalah:

<Div class = "Share"> <P> artikel ini: </ p> <Ul> <Li> <a href="http://www.xing.com/app/user?op=share;url=<?php gema urlencode(get_permalink($post-> ID));?>; Judul = < ? php echo rawurlencode (get_the_title ());?>;? penyedia = <php echo rawurlencode (get_bloginfo ( 'nama'));?> "target =" blank "title =" Dalam XING merekomendasikan "> <span> XING < / span> </ li> <Class Li = "tw-single"> <a href="https://twitter.com/intent/tweet?source=webclient&text=<?php gema rawurlencode(strip_tags(get_the_title())) ?>% 20 <? php echo urlencode (get_permalink ($ post-> ID));?> "target =" blank "title =" Dengan Twitter merekomendasikan "> <span> Twitter </ span> </ li> <Li class = "fb-single"> <a href="https://www.facebook.com/sharer/sharer.php?u=<?php gema urlencode(get_permalink($post-> ID)) ;? > & t = <? php echo rawurlencode (strip_tags (get_the_title ()))?> "target =" blank "title =" Dalam Facebook merekomendasikan "> <span> Facebook </ span> </ li> <Li class = "gp individual"> <a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<?php gema urlencode(get_permalink($post-> ID) );? ???> & title = <php echo rawurlencode (strip_tags (get_the_title ()))> "target =" blank "title =" di Google+ merekomendasikan "> <span> Google + </ span> </ li > <Li class = "del-single"> <a href="http://del.icio.us/post?url=<?php gema urlencode(get_permalink($post-> ID));?> & Judul = < ? php echo rawurlencode (strip_tags (get_the_title ()))?> "target =" blank "title =" lezat merekomendasikan "> <span> lezat </ span> </ li> </ Ul> <Class Div = "jelas"> </ div> </ Div>

Ini jelas bahkan untuk orang yang kurang berpengalaman, saya akan membatasi diri sekarang hanya bagian yang relevan:

http://www.xing.com/app/user?op=share;url=[1];title=[2];provider=[3] https://twitter.com/intent/tweet?source=webclient&text=[2]%20[1] https://www.facebook.com/sharer/sharer.php?u=[1]&t=[2] https://plusone.google.com/_/+1/confirm?hl=de&url=[1]&title=[2] http://del.icio.us/post?url=[1]&title=[2]

Struktur adalah selalu sama, saya harus sekarang dimana penampung yang (hanya ada [1] , [2] dan [3]) untuk memasukkan URL yang cocok. Dalam kasus WordPress , ini akan menjadi:

Permalink: <? Php gema urlencode (get_permalink ($ post-> ID)); ?>Judul Artikel: <? Php gema rawurlencode (get_the_title ()) ;??>Halaman Judul: ? <Php gema rawurlencode (get_bloginfo ( 'nama')); ?>

Addendum: Dalam hal Textpattern akan menjadi:

: Permalink <: permlink / TXP>Judul Artikel: <TXP: Judul />Halaman Judul: <TXP: site_name />

Sumber: Textpattern Forum

Link statis sehingga siap dan sekarang datang ke gaya ini. Berikut adalah bagian dari CSS saya, yang bertanggung jawab untuk tombol:

.weiterempfehlen {margin-bottom: 19px;} .weiterempfehlen p {font-weight: bold; margin-bottom: 4px penting;}! .weiterempfehlen ul {list-style: none; line-height: 24px; margin: 5px 0 15px 0; padding-left: 0;} .weiterempfehlen li {display: inline;} .weiterempfehlen a {float: left; width: 24px; height: 24px; margin-right: 25px; background: url ( '/ wp-content / uploads / 2011/12 / Perun-sosial einzelansicht.png') no-repeat; border-bottom: none! important;}! .weiterempfehlen rentang {display: none;} TW individual a {background-position: left -26px;} .fb Detailing a {background-position: left -52px;} .gp Detailing a {background-position: left -78px;} .del individual a {background-position: left -104px;} .weiterempfehlen a: hover {position: relative; top: -1px;}

kode bisa begitu jauh jelas. Link dalam daftar enumerated yang melayang dan digunakan adalah CSS Sprite dan berfungsi sebagai dasar dari beberapa ikon sebuah grafis komposit .

Berlawanan satu sama bagan pendekatan sprite CSS adalah keuntungan. Lima grafis individu adalah sekitar 5 Kbytes, grafis komposit hanya 2 Kbytes dan bukannya 5 HTTP panggilan ada harus menerapkan hanya satu dari browser. Terutama dengan grafis yang lebih kecil, perbedaan antara individu dan grafis komposit jauh.Setiap grafis memiliki "meta-informasi": Format yang saya, betapa besar saya, dll

Informasi ini tercakup dalam lebih kecil grafis yang lebih berat dan jika Anda grafis tersusun, maka, hanya ada sekali informasi ini.

Selain itu, ikon email saya di sini:Social Media Icons . iconset yang sangat luas, penggunaan juga diizinkan di situs komersial dan set juga memiliki ikon dalam 24 ukuran pixel. Saya pribadi merasa bahwa ikon di 16 piksel terlalu besar terlalu kecil dan di 32 piksel. Kontras 24 × 24 pixel saya menemukan ukuran yang baik.