New Landing How can we help? Themeforest Theme Support Supreme How to add Jetpack social icons to blog overview page

  • This topic has 12 replies, 2 voices, and was last updated 11 years by mrbme.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Posted in: Supreme
  • #4118
    mrbme
    Member
    Post count: 34

    Hi,

    I’m having a hard time trying to add the social sharing buttons (from Jetpack) to my blog overview page here: http://weekendcollective.com/

    Is there a line inside functions.php (or another sheet) to add this?

    An example of the functionality I want can be seen here — > http://coolmaterial.com/ (each blog post has a FB and Twitter share button)

    Let me know if you need further clarification.

    Thank you for your help!

     

     

    #4180
    Cosmin – SUPPORT
    Member
    Post count: 3851

    Hi,

    Our theme doesn’t handle the functionality of third party plugins, please check their documentation if you need to integrate them with the theme.

    Regards,

    ————————————————————————————————————

    Cosmin
    Support Assistant

    #4330
    mrbme
    Member
    Post count: 34

    Hi Cosmin,

    Is there a way to use twitter iFrame code to insert it – if so where (functions.php or index.php)?

    Here is the button

    Here is the code :

    <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url= <?php echo urlencode(get_permalink($post->ID)); ?>&amp; via=[YOUR TWITTER USERNAME]&amp;text=<?php wp_title(); ?>" style="width:130px; height:50px;"> </iframe>

    I just need to be pointed in the right direction on where to put it.

    Thank you

    #4390
    Cosmin – SUPPORT
    Member
    Post count: 3851

    You can add that in a Text element with the Page Builder or through the classic editor.

    Regards,
    ————————————————————————————————————

    Cosmin
    Support Assistant

    #4606
    mrbme
    Member
    Post count: 34

    Hi Cosmin,

    I appreciate your help – but unfortunately that isn’t solving the problem.

    If i had it as a text element I will basically get a page that is Blog + a sharing area. I want each blog post to have the sharing icons – does that make sense?

    If i choose a static front page – I’ll use the page building to add a blog. Which is great, that is what I want – but I dont get the sharing icons.

    If i use “latest posts” as my front page – for some reason the sharing icons show up (you can see my site here with lastests posts as my front page: http://weekendcollective.com/)

    Where in the php/css sheets can I access the blog portion of the page builder. I want to inject code so I can see these social sharing buttons.

    I’d be more than happy to take this offline and follow up with you via email with some screen shots to clarify further the goal i’m trying to achieve (or if you know if there is a better solution to achieve my goal).

    Again, I appreciate your help on this.

    -Blake

    #4662
    Cosmin – SUPPORT
    Member
    Post count: 3851

    Hi Blake,

    Sorry, meant to say RAW HTML element for stuff like iframes.

    For editing the page builder elements, you need to edit the corresponding files in: supreme\includes\page-builder\composer\lib\shortcodes

    The one responsible for the blog is blog.php, but you might also need to edit these, depending on what you plan to use:

    – posts_slider.php
    – posts-carousel.php
    – posts-ticker.php
    – recent-posts.php

    Regards,
    ————————————————————————————————————

    Cosmin
    Support Assistant

    #4753
    mrbme
    Member
    Post count: 34

    Hi Cosmin,

    You’ve been very helpful and I appreciate your patience.

    Here’s my dilema [see attached screenshots].

    After looking through supreme\includes\page-builder\composer\lib\shortcodes – here is where i think i should inject code:

    // BLOG ITEM OUTPUT

     

    $items .= ‘<li class=”blog-item”>’;

     

    if ($post_format == “quote”) {

    $items .= ‘<div class=”quote-display”><i class=”icon-quote-left”></i></div>’;

    } else {

    $items .= $item_figure;

    }

     

    $items .= ‘<div class=”blog-details-wrap”>’;

    $items .= ‘<div class=”item-cats”>’. $post_categories .'</div>’;

    if ($post_format != “aside”) {

    if ($blog_type == “masonry”) {

    $items .= ‘<h4><a href=”‘.$post_permalink.'”>’. $post_title .'</a></h4>’;

    } else {

    $items .= ‘<h3><a href=”‘.$post_permalink.'”>’. $post_title .'</a></h3>’;

    }

    }

    $items .= ‘<div class=”blog-item-details”>’. sprintf(__(‘By <a href=”%2$s”>%1$s</a> on %3$s’, ‘swiftframework’), $post_author, get_author_posts_url(get_the_author_meta( ‘ID’ )), $post_date) .'</div>’;

    if ($post_format == “quote”) {

    $items .= ‘<div class=”quote-excerpt heading-font”>’. get_the_content() .'</div>’;

    } else if ($post_format == “chat”) {

    $items .= ‘<div class=”excerpt”>’. get_the_content() .'</div>’;

    } else {

    $items .= ‘<div class=”excerpt”>’. $post_excerpt .'</div>’;

    }

    $items .= ‘<div class=”read-more-bar”><a class=”read-more” href=”‘.$post_permalink.'”>’.__(“Read more”, “swiftframework”).'<i class=”icon-chevron-right”></i></a>’;

    $items .= ‘<div class=”comments-likes”>’;

    if ( comments_open() ) {

    if ($use_disqus) {

    $items .= ‘<a href=”‘.$post_permalink.’#comment-area”><i class=”icon-comments”></i><span>’. disqus_count(false) .'</span></a> ‘;

    } else {

    $items .= ‘<a href=”‘.$post_permalink.’#comment-area”><i class=”icon-comments”></i><span>’. $post_comments .'</span></a> ‘;

    }

    }

    if (function_exists( ‘lip_love_it_link’ )) {

    $items .= lip_love_it_link(get_the_ID(), ‘<i class=”icon-heart”></i>’, ‘<i class=”icon-heart”></i>’, false);

    }

    $items .= ‘</div></div>’;

     

    $items .= ‘</div></li>’;

     

    $item_figure = ”;

     

    endwhile;

     

    wp_reset_postdata();

    $items .= ‘</ul>’;

     

    There are a few different ways I can add these buttons – one is with an iframe:
    <div>
    <iframe  style=”display:inline” allowtransparency=”true” frameborder=”0″ scrolling=”no”        src=”http://platform.twitter.com/widgets/tweet_button.html?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;via=wkndcollective&amp;text=<?php wp_title(); ?>”        style=”width:130px; height:50px;”></iframe>
    </div>

    OR I can add this to functions.php

    /* SOCIAL BUTTONS
    ================================================== */

    function tweet_button() {

    $post_title = get_the_title();
    $post_permalink = get_permalink();
    $html = ‘<iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”http://platform.twitter.com/widgets/tweet_button.html?’;
    $html .= ‘url=’ . $post_permalink . ‘&text=’ . $post_title . ‘&count=none&via=wkndcollective”></iframe>’;

    return $html;

    }
    And use this in conjunction:

    <div id=”social”>
    <span class=”twitter”><?php echo tweet_button();?></span>
    </div>
    ———————-

    Am i’m going about this correctly? Do you know any other users of supreme that have accomplished the adding of sharing buttons? I just want to be able to use the page builder, add a blog and have every post overview contain these buttons.

    Again, I appreciate your ongoing support.

    Thank you,

    -Blake

    #4758
    mrbme
    Member
    Post count: 34

    FYI – i’m currently using AddThis to generate the social icons in the above screenshot – but like I said, if there is a better and more effective way to execute this – i’m all ears.

    Thanks,

    Blake

    #4800
    Cosmin – SUPPORT
    Member
    Post count: 3851

    Hi Blake,

    That function added to functions.php looks pretty good to me, I’d give that a shot and add it to the blog element in the shortcodes folder, as you mentioned.

    The ideal thing to do though, is to create your own mini-plugin that adds it, so you don’t have to add it back in when you update the theme.

    You would create a file, say blake-custom.php and have it like this:

    <?php
    /*
    Plugin Name: Blake's Custom Functions
    Plugin URI: http://example.com
    Description: Adds custom code to the theme
    Version: 1
    Author: Blake
    Contributors: blake
    Author URI: http://example.com
    */
    
    /* your PHP function goes here */

    You now have your own plugin, zip it up and install it in WordPress 🙂

    Regards,
    ————————————————————————————————————

    Cosmin
    Support Assistant

    #4861
    mrbme
    Member
    Post count: 34

    Cosmin,

    I’m throwing in the towel – I can’t figure this out.

    I added this to functions:
    /* SOCIAL BUTTONS
         ================================================== */
         function tweet_button() {
     $post_title = get_the_title();
     $post_permalink = get_permalink();
     $html = ‘<iframe allowtransparency=”true” frameborder=”0″ scrolling=”no” src=”http://platform.twitter.com/widgets/tweet_button.html?’;
     $html .= ‘url=’ . $post_permalink . ‘&text=’ . $post_title . ‘&count=none&via=wkndcollective”></iframe>’;
      return $html;
    }

    And here is an excerpt from blog.php (i’ve highlighted the code i injected)

    $items .= ‘<div class=”excerpt”>’. $post_excerpt .'</div>’;
    }
    $items .= ‘<div id=”social”><?php echo tweet_button();? </div>’;
    $items .= ‘<div class=”read-more-bar”><a class=”read-more” href=”‘.$post_permalink.'”>’.__(“TEST”, “swiftframework”).'<i class=”icon-chevron-right”></i></a>’ ;
    $items .= ‘<div class=”comments-likes”>’;
    $items .= ‘<div id=”social”> <span class=”twitter”><?php echo tweet_button();?></span></div>’;
    if ( comments_open() ) {
    if ($use_disqus) {
    $items .= ‘<a href=”‘.$post_permalink.’#comment-area”><i class=”icon-comments”></i><span>’. disqus_count(false) .'</span></a> ‘;
    } else {
    $items .= ‘<a href=”‘.$post_permalink.’#comment-area”><i class=”icon-comments”></i><span>’. $post_comments .'</span></a> ‘;
    }
    }
    What would you charge to implement this and/or send me a zipped theme with this implemented (so it actually works)?

    🙂

     

    Thanks,

    #4928
    Cosmin – SUPPORT
    Member
    Post count: 3851

    Hey,

    Unfortunately I don’t have the time for custom projects right now, sorry.

    But I see one line doesn’t have the dot in it:

    $html = ‘

    #5005
    mrbme
    Member
    Post count: 34

    Cosmin,

    I figured it out!
    If you need to show someone in the future how to accomplish this – here is the code in blog.php

    // BLOG ITEM OUTPUT

    $items .= ‘<li class=”blog-item”>’;

    if ($post_format == “quote”) {
    $items .= ‘<div class=”quote-display”><i class=”icon-quote-left”></i></div>’;
    } else {
    $items .= $item_figure;
    }

    $items .= ‘<div class=”blog-details-wrap”>’;
    $items .= ‘<div class=”item-cats”>’. $post_categories .'</div>’;
    if ($post_format != “aside”) {
    if ($blog_type == “masonry”) {
    $items .= ‘<h4>‘. $post_title .’</h4>’;
    } else {
    $items .= ‘<h3>‘. $post_title .’</h3>’;
    }
    }
    $items .= ‘<div class=”blog-item-details”>’. sprintf(__(‘By %1$s on %3$s’, ‘swiftframework’), $post_author, get_author_posts_url(get_the_author_meta( ‘ID’ )), $post_date) .'</div>’;
    $items .= ‘<!– AddThis Button BEGIN –>
    <div class=”addthis_toolbox addthis_default_style ”
    addthis:url=”‘.$post_permalink.'”
    addthis:title=”‘. $post_title .'”>



    </div>
    <script type=”text/javascript”>var addthis_config = {“data_track_addressbar”:true};</script>
    <script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-518c1de67aab1a0a”></script>
    <!– AddThis Button END –>’;

    Thanks for your help!

    -Blake

    #5006
    mrbme
    Member
    Post count: 34

    For some reason the code isn’t coming through – see the attached screenshot

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register