Simple:Press Documentation

How To Add Twitter, Facebook, Plus One Or Other Buttons?

We often get asked ‘How do I add a Facebook Like or Tweet This’ button to my forum posts.
With Simple:Press 5.0, this is easier than ever.  This can be done by either using the special Simple:Press Share This plugin that gives you the ability to add several different sharing buttons them to your SP theme or you can also manually add specific sharing buttons as described below.  The hardest part about doing this might just be deciding where you want them to go. 🙂

Our example will show how you how to add all three a Facebook , Tweet and Google Plus One buttons.

Adding the code to your theme

You will need to edit your SP theme’s spTopicView.php template file. As always, we strongly urge you to make your own theme and not edit the Simple:Press ones so you don’t lose changes on upgrades.

Showing the buttons in your Topic Header

This example places the buttons in topic header along side of the RSS button.

Open your theme’s spTopicView.php file in your editor. It is found in your Theme’s /Template folder.
Look for the following code:

sp_TopicHeaderRSSButton('tagClass=spButton spRight', __sp('Topic RSS'), __sp('Subscribe to the RSS feed for this topic'));
if (function_exists('sp_RelatedTopicsButton')) sp_RelatedTopicsButton('tagClass=spButton spRight', __sp('Related Topics'), __sp('Get a list of related topics based on tags for this topic'));

Copy the  following code and insert it after the Related Topic button code shown above:

$tweetme = '<div class="spRight spIcon">';
$tweetme.= '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'.$spThisTopic->topic_permalink.'" data-lang="en" data-size="medium" data-count="none">Tweet</a>';
$tweetme.= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
$tweetme.= '</div>';
echo $tweetme;

$likeme = '<div class="spRight spIcon">';
$likeme.= '<iframe src="//www.facebook.com/plugins/like.php?href='.$spThisTopic->topic_permalink.'&send=false&layout=standard&width=48&show_faces=false&action=like&colorscheme=light&font=arial&height=24" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:35px;" allowTransparency="true"></iframe>';
$likeme.= '</div>';
echo $likeme;

$plusone = '<div class="spRight spIcon">';
$plusone.= '<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>';
$plusone.= '<g:plusone size="standard" annotation="none" href="'.$spThisTopic->topic_permalink.'"></g:plusone>';
$plusone.= '</div>';
echo $plusone;

Thats all there is to it. Save the spTopicView.php to your site and you will have a Facebook Like button, A Tweet button and a Plus One button at the top of every topic.
If you just want one or two of the buttons then remove the ones you don’t want to show.

If you have a lot of Simple:Press options turned on or have a narrow theme you may run out of room showing all the buttons. If this is the case the buttons will overflow and stack over each other.

Show the buttons in every Post.

This works the same way as above. You would put the button code in the same file by putting it in another location.

To put them at the top of each post by the Quote, Report, etc buttons then find the following code:

								if (function_exists('sp_PostIndexReportPost')) sp_PostIndexReportPost('tagClass=spButton spRight', __sp('Report'), __sp('Report this post to admin'));
								sp_PostIndexQuote('tagClass=spButton spRight', __sp('Quote'), __sp('Quote this post and reply'));
								sp_PostIndexEdit('tagClass=spButton spRight', __sp('Edit'), __sp('Edit this post'));
								if (function_exists('sp_PostIndexSendPm')) sp_PostIndexSendPm('tagClass=spButton spRight', __sp('PM'), __sp('Send PM to this user'));

Add this code under the Send PM code shown above.

                                $tweetme = '<div class="spRight spIcon">';
                                $tweetme.= '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'.$spThisPost->post_permalink.'" data-lang="en" data-size="medium" data-count="none">Tweet</a>';
                                $tweetme.= '<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>';
                                $tweetme.= '</div>';
                                echo $tweetme;

                                $likeme = '<div class="spRight spIcon">';
                                $likeme.= '<iframe src="//www.facebook.com/plugins/like.php?href='.$spThisPost->post_permalink.'&send=false&layout=standard&width=48&show_faces=false&action=like&colorscheme=light&font=arial&height=24" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:35px;" allowTransparency="true"></iframe>';
                                $likeme.= '</div>';
                                echo $likeme;

                                $plusone = '<div class="spRight spIcon">';
                                $plusone.= '<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>';
                                $plusone.= '<g:plusone size="standard" annotation="none" href="'.$spThisPost->post_permalink.'"></g:plusone>';
                                $plusone.= '</div>';
                                echo $plusone;

Save the spTopicView.php to your site and all those buttons will be at the top of every post.
If you just want one or two of the buttons then remove the ones you don’t want to show.
The example above shows only the Facebook like button and not the count of  ‘likes’.  If you want to show the like count also you could replace the $likeme. line that uses the iframe to this:

$likeme.= '<iframe src="//www.facebook.com/plugins/like.php?href='.$spThisTopic->topic_permalink.'&send=false&layout=button_count&width=75&show_faces=false&action=like&colorscheme=light&font=arial&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:25px;" allowTransparency="true"></iframe>';

You probably don’t want to use both examples at the same time but it can be done.

Want the Buttons elsewhere?

The locations we show are just an example. You can put them just about anywhere in your forum.
If you want them in the actual post content at the top right then you can put the code between

sp_InsertBreak();

and

sp_SectionStart('tagClass=spPostContentSection', 'content');

Want them after the post content but before a signature? You could put the code between:

sp_InsertBreak();

and

sp_PostIndexUserSignature('tagClass=spPostUserSignature spCenter&maxHeightBottom=55');

 

These are only a few examples you can put the code wherever you wish. We suggest you play with the layout and positioning to get them how you would like them to be shown.

These social sites allow you to change the appearance of the buttons too.   Please reference their appropriate API below:

https://dev.twitter.com/docs/tweet-button
http://developers.facebook.com/docs/reference/plugins/like/
https://developers.google.com/+/plugins/+1button/

Similarly, additional social site sharing type buttons can be added in the same fashion.  At some point, we hope to write an Simple:Press plugin to make this even easier.

 

Enjoy!

$likeme.= ‘<iframe src=”//www.facebook.com/plugins/like.php?href=’.$spThisTopic->topic_permalink.’&send=false&layout=button_count&width=75&show_faces=false&action=like&colorscheme=light&font=arial&height=25″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:75px; height:25px;” allowTransparency=”true”></iframe>’;

More Topics In FAQ


Copyright © 2006-2019 Simple:Press. All Rights Reserved.