How to add Jetpack social icons to blog overview page

[mrbme]

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!

 

 

[Cosmin – SUPPORT]

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

[mrbme]

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

[Cosmin – SUPPORT]

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

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

Cosmin
Support Assistant

[mrbme]

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

[Cosmin – SUPPORT]

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

[mrbme]

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

[mrbme]

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

[Cosmin – SUPPORT]

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

[mrbme]

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,

[Cosmin – SUPPORT]

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 = ‘


		
	

[mrbme]

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

[mrbme]

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