Life & Reflections

Life & Reflections
Life and Reflections

Productivity

Productivity
Productivity

Reviews

Reviews
Reviews

How to add a Twitter Facebook Follow Button to every blog post

1

Thought I would do a helpful post as it is so very useful to have a share bar at the top of every blog posts especially one that includes a follow button!

Here’s how to do – share this post if you like it!

1. Go to your blogs DESIGN/LAYOUT and click on the DOWNLOAD FULL TEMPLATE

you must do this to ensure you have a copy of your blog in case anything messes up! Make sure you do this.

1a

2. then click on EDIT HTML then click on EXPAND WIDGET TEMPLATES

2

3. Press CONTROL F to find the following html code-
<div class='post-header-line-1'/> you may need to click twice as it is the second one under the <data: post.title/> (see below)

3

4. Once you have located this add the following code directly underneath this:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>    &#160; &#160;
<a href='
http://www.bloglovin.com/en/blog/2266777/my-modern-vintage' title='my modern vintage on bloglovin'><img alt='Follow My Modern Vintage' src='http://www.bloglovin.com/widget/bilder/en/lank.gif'/></a>
</div>
<script src='
http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e6daba208b6a140' type='text/javascript'/>
<!-- AddThis Button END --> </p> </p>

5. Change the following parts of the code above to your own links!

You will need your bloglovin blog link and also change the blog name- you don’t want your readers following me! Highlighted parts need changing

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>    &#160; &#160;
<a href='
http://www.bloglovin.com/en/blog/2266777/my-modern-vintage' title='my modern vintage on bloglovin'><img alt='Follow My Modern Vintage' src='http://www.bloglovin.com/widget/bilder/en/lank.gif'/></a>
</div>
<script src='
http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e6daba208b6a140' type='text/javascript'/>
<!-- AddThis Button END --> </p> </p>

6. It should now look like this:

4

7. Preview the template and then save the template and you now have a share button at the top of every blog post!

1 comment

  1. Hello!

    I have tried twice, followed everything very carefully and I can't get it to work.
    I get a scary error message.

    No harm done as I didn't save the changes. I would love this though, so if you could check through the instructions , or give me any more tips that would be amazing!

    ReplyDelete

Thanks for your comments I appreciate it very much :)
Please leave me your link so I can check out your blog!