Social Share & Icons, with Ultimatum & Intense Shortcodes

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

How to make Social Share & Icons, with Ultimatum & Intense Shortcodes; the second post in the series I started a few days ago when I made my first post about the new bundled ‘premium’ plugin for Ultimatum Theme; Intense Shortcodes. This follow-up post, which I had promised some of you on the Ultimatum theme member forums, is about how to set up social share and social (link) icons. Why even make the post, when Ultimatum comes bundled with a plug to add social share and also a widget to make the link icons? I, and others, have found that the bundled plugin, based as it is on a deprecated Facebook function (sharrre.js), does not always work, and I wanted to explore Intense Shortcodes a bit more. The problem with the Intense Shortcodes Social Share shortcode is that it is intended to be used on individual posts, not to be applied to all single post pages. Can it do this? Yes, was the answer I found. Let’s first take a look at the Social Share shortcode itself, as it is used when writing a post.

Intense Shortcodes - Social ShareIntense Shortcodes - Social Share - Insert ShortcodeIntense Shortcodes - Social Share - Done

Having selected Social Share, the next modal popup box gives you a choice of up to nine different social media types;

  • Facebook
  • Google+
  • Twitter
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Reddit
  • Tumblr
  • Email

Each of these has a number of options as to how you want them to appear. The first option for all of them is to actually enable that social media type – you can have all nine selected if you wish, but I am going to select just Facebook, Twitter and Google+. I have made a screenshot of how the choices can affect the appearance of these three types and under this what my final social share will look like. Notice that I have left in the Link/Share URL field a dummy site name. The shortcode generated looks like this:

[intense_social_share share_url="http://www.example.com" show_facebook="1" facebook_button="button_count" facebook_share="1" show_googleplus="1" googleplus_button="medium_bubble" show_twitter="1" twitter_button="horizontal"]] [[/intense_social_share]

We may need some custom css to apply to the social share container. Assuming that you already have a custom stylesheet for your Ultimatum child theme (mine is called custom-style.css and sits in a css folder insider the child theme folder, and is already enqueued, see this post for more details on a custom css file and the functions.php file), this is the new css I added to it:

1
2
3
4
.social-share {
  margin-bottom:10px;
  line-height:15px;
}

Finally, we need to add a few lines of code to the Ultimatum child theme functions.php, using the Ultimatum action ultimatum_before_post_content. When adding this code, I hope you can see where you might need to change it to suit your needs regarding which social share types and formats you choose. Also, you might want the social share container after the post content, in which case substitute the ultimatum_before_post_content action for ultimatum_after_post_content managed to follow this short tutorial. You can see other Ultimatum actions in the online documentation (under the Advanced Tab). Here is the code that you need to add to the functions.php file:

1
2
3
4
5
// Ultimatum changes for Social Share before content
function ult_social_share_b4_post_content() {
  if ( is_single() ) echo '<div class="social-share">'.do_shortcode('[intense_social_share share_url="' . get_permalink() . '" show_facebook="1" facebook_button="button_count" facebook_share="1" show_googleplus="1" googleplus_button="medium_bubble" show_twitter="1" twitter_button="horizontal"][/intense_social_share]').'</div>';
}
add_action('ultimatum_before_post_content','ult_social_share_b4_post_content',10,2);

The finished result you can see at the top of this post! You may have noticed it looks a bit different on my actual site, as my site is a bootstrap site I also add the ‘panel’ and ‘panel-default’ classes to the social share div class in the functions.php code, and to the style of the social-share class I added display:inline-block and padding:5px 0 3px 5px. The overall effect is to give the links a pretty box to sit inside.

I still have to cover the social icons, which are really just fancy links to your presence on social websites. For this, I am going to add a row to my footer. At the moment the copyright notice sits in a row that appears full width in a blue slightly darker than the accent color for the Darkly theme. The social icons will sit in a row in the same color as the theme accent color. I had intended to make them from FontAwesome icons, but small image icons looked far better, and one I wanted was eBay, which, with its multiple colors, isn’t possible with FontAwesome. Adding the social icon links was very simple. In my custom-style.css file I added:

1
.social-link {float:right;}

I did this because they will sit in the right hand sidebar of one of the footer rows, so they look better over to the right. Into the Ultimatum layout, I added a text widget in the right sidebar column of the desired row, and put this code (made by Intense Shortcodes in a draft blog post to get the code):

[intense_social_icon mode="image" type="EBay" link="http://stores.ebay.co.uk/Cotswold-Photo-Flash-and-Studio" link_target="_blank" label="CotswoldPhoto eBay store"][intense_social_icon mode="image" type="Twitter" link="https://twitter.com/cotswoldphotouk" link_target="_blank" label="CotswoldPhoto on Twitter"][intense_social_icon mode="image" type="Facebook" link="https://www.facebook.com/cotswoldphoto" link_target="_blank" label="CotswoldPhoto on Facebook"]

The only little hitch I came across was that the tumblr share icon was only a FontAwesome icon, and not the one that tumblr users would recognise. I have reported that back to the Intense Shortcodes team, in the hope that they will fix that soon. I hope you managed to follow this, so why not explore Intense Shortcodes and see what you can discover?

Categories: Ultimatum.