Even though individual Facebook Like & Send, Twitter Tweet, Google +1, Pinterest Pin It, and social sharing buttons can be easily added to Blogger post by following their respective tutorials, aligning them perfectly side by side is a bit tricky. Several readers were having trouble with the alignment and contacted me for help.
- Go to Template > Edit HTML > Proceed (old UI: Design > Edit HTML).
- Back up your template.
- Tick the Expand Widget Templates checkbox on top right of the code window.
- Next, locate the first instance of
<data:post.body/>
tag and paste the following code immediately above it:01
<!-- Scripts Start -->
02
<
b:if
cond
=
'data:post.isFirstPost'
>
03
<!-- Facebook -->
04
<
div
id
=
'fb-root'
/>
05
<
script
>(function(d, s, id) {
06
var js, fjs = d.getElementsByTagName(s)[0];
07
if (d.getElementById(id)) {return;}
08
js = d.createElement(s); js.id = id;
09
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
10
fjs.parentNode.insertBefore(js, fjs);
11
}(document, 'script', 'facebook-jssdk'));
12
</
script
>
13
<!-- Google +1 -->
14
<
script
type
=
'text/javascript'
>
15
(function() {
16
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
17
po.src = 'https://apis.google.com/js/plusone.js';
18
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
19
})();
20
</
script
>
21
<!-- Twitter -->
22
<
script
>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</
script
>
23
</
b:if
>
24
<!-- Scripts End -->
25
<!-- Horizontal social buttons Start -->
26
<
div
class
=
'horizontal-social-buttons'
style
=
'padding:10px 0 10px;'
>
27
<!-- Twitter -->
28
<
div
style
=
'float:left;'
>
29
<
a
class
=
'twitter-share-button'
data-count
=
'horizontal'
data-lang
=
'en'
data-related
=
''
data-via
=
''
expr:data-text
=
'data:post.title'
expr:data-url
=
'data:post.url'
href
=
'https://twitter.com/share'
>Tweet</
a
>
30
</
div
>
31
<!-- Google +1 -->
32
<
div
style
=
'float:left;'
>
33
<
g:plusone
annotation
=
'bubble'
expr:href
=
'data:post.url'
size
=
'medium'
/>
34
</
div
>
35
<!-- Facebook Like+Send -->
36
<
div
style
=
'float:left;'
>
37
<
fb:like
colorscheme
=
'light'
expr:href
=
'data:post.url'
font
=
''
layout
=
'button_count'
send
=
'true'
show_faces
=
'false'
/>
38
</
div
>
39
<!-- Pinterest Start -->
40
<
b:if
cond
=
'data:blog.pageType == "item"'
>
41
<
div
id
=
'pin-wrapper'
style
=
'display: inline;'
>
42
<
a
class
=
'pin-it-button'
count-layout
=
'horizontal'
expr:href
=
'"http://pinterest.com/pin/create/button/?url=" + data:post.url'
>Pin It</
a
>
43
<
a
href
=
'javascript:void(run_pinmarklet())'
style
=
'margin-left:-93px; width:43px; height:20px; display:inline-block;'
/>
44
</
div
>
45
<
script
src
=
'http://assets.pinterest.com/js/pinit.js'
type
=
'text/javascript'
></
script
>
46
<
script
type
=
'text/javascript'
>
47
function run_pinmarklet() {
48
var e=document.createElement('script');
49
e.setAttribute('type','text/javascript');
50
e.setAttribute('charset','UTF-8');
51
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
52
document.body.appendChild(e);
53
}
54
</
script
>
55
</
b:if
>
56
<!-- Pinterest End -->
57
</
div
>
58
<
div
style
=
'clear: both;'
/>
59
<!-- Horizontal social buttons End -->
Note: Pin It button will only appear on post pages. We place this limit because the button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to). - Buttons positioning
To position the buttons at the bottom of post, place the code below (instead of above)<data:post.body/>
. - Preview before saving.
Enjoy!
No comments:
Post a Comment