Show social media buttons on the front page

  • Ricardo

    #2219

    Hey,

    I would like to have my social media buttons, that now only appear when you click to see the full post, to always appear on the front page, on the left side above the tags (above the grey line to be exact). Can somebody help me with this?

    http://fastforwardandrewind.com/

    Mod

    Kenneth John Odle

    #19388

    You can use a graphene action hook widget area, plus a bit of php.

    You can see what I did here: http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    Except that you would do the opposite, PHP wise. Take a look and see if that will work for you, and if you have questions/problems, let me know.

    Ken

    Josh

    #19389

    What happens when you change your social sharing options to show on “top of posts” instead of “bottom of posts” which is the default, I think.

    Ricardo

    #19390

    @ Josh Then the buttons would show above the content, and I want them below it 🙂

    @ Kenneth Thanks, I am going to read through the text and try it out!

    Josh

    #19391

    Excellent Post Ken. Bookmarked!

    Ricardo

    #19392

    Maybe we can also add this info to the themes wiki?

    http://wiki.khairul-syahir.com/graphene-theme/wiki/Main_Page

    Ricardo

    #19393

    @ Kenneth Thanks, the post made this really easy to achieve! The only thing I would like to do now is to have a little more space above and less space below. What is the best way to do this? 🙂

    And a weird problem, the Twitter counter seems to always be on ’47’.

    Josh

    #19394

    Do me a favor and post the code you inserted into your custom widget. I think your div tags are mucking with things.

    The twitter counter… I’ve seen this problem before. If it was “42”, I’d understand the significance 😉

    Ricardo

    #19395

    Sure 🙂

    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    <a class="addthis_button_tweet"></a>
    <a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
    <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4eb1b0cc416e1e9b"></script>
    <!-- AddThis Button END -->
    Mod

    Kenneth John Odle

    #19396

    Three options:

    1) Add custom CSS to the existing class, like this:

    .addthis_toolbox {padding: 6px 0 6px 0;}

    2) Wrap your code above in a new division that you can style inline or via child theme. (Best if you want to make dramatic changes.)

    3) Add inline style to the existing div:

    <div class="addthis_toolbox addthis_default_style " style="padding: 6px 0 6px 0;">

    Option #3 is probably easiest, but some CSS experts frown upon inline styling. I think you can get away with it here, though.

Viewing 10 posts - 1 through 10 (of 19 total)

You must be logged in to reply to this topic.