:: My PA ::: Blogger: Add Facebook "Like" button to each post

Monday, May 10, 2010

Blogger: Add Facebook "Like" button to each post

credit to http://www.devfuel.com/2010/04/blogger-add-facebook-like-button-to.html#comment-form
-----------------------------------------------------------------
Amit, over at Digital Inspiration, laid out some simple steps to getting the new FaceBook "Like" button onto your Blogger site. If only it had worked for me...
But, being a developer, I dug a bit into the Blogger templating engine and figured out how to make it work for real in a modern template. The snippet you want is:

&lt;br&gt;   allowTransparency='true' &lt;br&gt;   frameborder='0' &lt;br&gt;   scrolling='no' &lt;br&gt;   expr:src='"http://www.facebook.com/plugins/like.php?href=" &lt;br&gt;             + data:post.url &lt;br&gt;             + "&amp;amp;layout=standard&amp;amp;show-faces=true&amp;amp;"&lt;br&gt;             + "width=530&amp;amp;height=60&amp;amp;action=like&amp;amp;"&lt;br&gt;             + "colorscheme=light"' &lt;br&gt;   style='border:none; overflow:hidden; width:530px; height:60px'/&gt;&lt;br&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;
The "expr:src" tells the engine to interpret the XML attribute as an 
expression. The single quotes allow you to nest double quotes inside. 
The quoted sections are the parts that won't change, and the 
"data:post.url" is replaced with the fixed url for the given post.&lt;/p&gt;

&lt;p&gt;
As to where to put it, that really depends on your intention and current
 blogger template. In general, though, you need to edit your HTML 
template:&lt;/p&gt;

&lt;pre&gt;Layout Tab -&gt; Edit HTML&lt;/pre&gt;

&lt;p&gt;
&lt;b&gt;Warning! Manually editing your template can hose your entire blog if 
done wrong. Be sure to back it up (instructions are on the Edit HTML 
page), and don't blame anyone but yourself if you mess it up!&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;
In the edit box, search for "&lt;b:includable id='post' var='post'&gt;".
 That is the beginning of the post template. You should be able to make 
out the various parts of the post (comments, edit button, title, etc.) 
Try pasting the above snippet in various areas and then pressing the 
"Preview" button. (This lets you try it before you "buy" it ;) If you 
get a working "Like" button on each post, you are done!&lt;/p&gt;

&lt;p&gt;
Good Luck!&lt;/p&gt;

&lt;p&gt;
&lt;b&gt;UPDATE 1 - No Line Breaks&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;
In case you have issues, here is the version with all the clarifying 
formatting removed and no line breaks:&lt;/p&gt;

&lt;div style="font-family: Consolas,'Courier New',Courier,Monospace; font-size: 10pt; color: black; background: none repeat scroll 0% 0% rgb(255, 255, 204); padding: 0.5em; overflow: scroll; border-top: 1px solid rgb(238, 238, 238); border-left: 1px solid rgb(238, 238, 238);"&gt; &lt;pre style="margin: 0px;"&gt;&lt;iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;amp;layout=standard&amp;amp;show-faces=true&amp;amp;width=530&amp;amp;height=60&amp;amp;action=like&amp;amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/&gt;&lt;br&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;
Note: When you paste this into the HTML editor, ensure that the snippet 
begins with "&lt;iframe" and not "&amp;lt;iframe". The snippet had to be
 escaped in order to display correctly in the HTML of this blog, but you
 need the real deal.&lt;/p&gt;

&lt;p&gt;
In addition, if you are using the blogger in draft template designer, be
 aware that there are some HTML editor errors that occur under certain 
conditions. If you are getting a mysterious error code, try switching to
 the draft HTML editor. (while on the Edit HTML page, replace "www" in 
the address bar with "draft") I had to change some attributes from 
having the value "" to having " " (a space) in order to work.&lt;/p&gt;

&lt;p&gt;
&lt;b&gt;UPDATE 2 - String escapes&lt;/b&gt;&lt;/p&gt;

&lt;p&gt;As reported by some readers, the previous drafts of this post were 
not correctly formatted. Inside the expr:src quoted strings, you need 
"&amp;amp;" instead of "&amp;amp;". The above examples have been updated to 
allow for direct copy and paste.
&lt;/p&gt;

No comments:

Post a Comment

[ About Me ]

* Borrowing photos of Rianti instead of myself .. because very interested the role of Aisya in Ayat - Ayat Cinta.

At the same time, really want to be a determination, resignation, faith and taqarrub to Him.

Hopefully everything I do, it is only because of Him .. God willing.

Nice advice for myself and all the women out there ..

O proud woman not in external beauty,
DUREN one day it will swallow bad at times,
But keep and preserve the internal beauty,
To make this self-clean and always have Rahmat Ilahi,
O women do not take pride in the knowledge that you acquired this world,
DUREN no more people more knowledge from you,
O woman, nor let yourself grieve over the lack of,
DUREN no more poor people more from you.

Source: http://nurjeehan.hadithuna.com/2007/02/wanita-solehah/

I give thanks for what I have .. May Allah forgive me and you all .. Amen.

Wassalam.
- Admin PNA -

------------------------

* Meminjam gambar Rianti sebagai pengganti diri.. kerana sangat meminati watak Aisya dalam Ayat - Ayat Cinta.

Dalam masa yang sama, ingin menjadi wanita yang cekal, tawakkal, beriman dan taqarrub denganNya.

Semoga setiap yang ku lakukan, adalah Hanya KeranaNya.. InsyaAllah.

Nasihat buat diri dan semua wanita diluar sana..

Wahai wanita jangan dibangga dengan kecantikan luaran,
Kerna satu hari nanti ianya akan lapuk di telan zaman,
Tetapi jaga dan peliharalah kecantikan dalaman ,
Agar diri ini bersih dan sentiasa mendapat Rahmat Ilahi,
Wahai wanita jangan berbangga dengan ilmu duniawi yang kau kuasai ,
Kerna ada lagi manusia yang lebih berpengetahuan darimu ,
Wahai wanita jangan pula berdukacita atas kekurangan dirimu,
Kerna ada lagi insan yang lebih malang darimu.

Sumber : http://nurjeehan.hadithuna.com/2007/02/wanita-solehah/

Ku bersyukur dengan apa yang ku miliki.. semoga Allah mengampuniku dan kalian semua.. Amin.

Wassalam.
- Admin PNA -

Monday, May 10, 2010

Blogger: Add Facebook "Like" button to each post

No comments:

Post a Comment

[ My Favourite Songs ]

[ Subscribe To ]