[TIP/TRICK] Adding Twitter and Facebook "Share/Like" Button To Posts

Started by JBlaze, June 12, 2011, 06:25:57 PM

Previous topic - Next topic

JBlaze

If you're like me, and just like having social media options on your site, well then check this out.

If you want to add quick social sharing buttons from Google, Facebook, and Twitter to all your posts, just add this code in your theme's Display.template.php. Note that if you have a custom theme without its own Display.template.php, you only need to modify the one in the default directory.

Code (find) Select
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')
</h3>

Code (replace with) Select
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')

<!-- Facebook -->
<span class="floatright" style="margin: 6px;" id="facebook">
<div id="fb-root"></div>
<fb:like href="', $scripturl, '?topic=', $context['current_topic'], '" send="false" layout="button_count" width="100" show_faces="false" font=""></fb:like>
</span>

<!-- Twitter -->
<span class="floatright" style="margin: 6px;" id="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="', $scripturl, '?topic=', $context['current_topic'], '" data-text="CUSTOM_TWEET_TEXT" data-count="horizontal" data-via="PRIMARY_TWITTER_ACCOUNT" data-related="SECONDARY_TWITTER_ACCOUNT">Tweet</a>
</span>

<!-- Google Plus -->
<span class="floatright" style="margin: 6px;" id="gplus">
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="', $scripturl, '?topic=', $context['current_topic'], '"></div>
</span>
</h3>


Now, in order to use Facebook, Twitter, and Google Plus buttons, you'll need to add this to your index.template.php. You will need to modify this for every theme you wish to use the buttons on.

Code (find) Select
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
</body></html>';
}


Code (replace with) Select
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<!-- Facebook Share -->
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<!-- Twitter Share -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<!-- Google Plus -->
<script type="text/javascript">
  (function() {
var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;
po.src = \'https://apis.google.com/js/plusone.js\';
var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

</body></html>';
}


You can replace the following vars with what you like:
CUSTOM_TWEET_TEXT = The text you want to tweet. Things such as "Check this out: ', $context['subject'], '" work nicely. You can alternatively leave it empty to use the page's title.
PRIMARY_TWITTER_ACCOUNT = The primary account you want to make the tweet via. Leave out the @.
SECONDARY_TWITTER_ACCOUNT = Same as above, but you can leave this one empty.

Screenshot:


It's that simple really. This is mainly for those who just want a quick hack without clouding up their installed mods list. :)

NOTE: This code is provided "as-is", and no support will be given as I do not have the time. Thank you for understanding :)
Jason Clemons
Former Team Member 2009 - 2012

4b11l

Hello, does this tip only post to one account such as the website account? Or is it like other service where the user is able to login their details and post to their twitter?

JBlaze

Quote from: 4b11l on June 16, 2011, 06:38:12 PM
Hello, does this tip only post to one account such as the website account? Or is it like other service where the user is able to login their details and post to their twitter?
It allows you to input the account you wish for people to follow as well as a secondary account for people to follow. It does not however make tweets through any given account. It just allows member to tweet share the link.
Jason Clemons
Former Team Member 2009 - 2012


4b11l

I just tested it out and it was exactly what I was looking for! Thanks JBlaze, I think it was just that I didn't know how to explain it that I was confused in it's purpose.

It popped up a login for you to login your twitter details and it'll post to that account the custom message and link. I thought it automatically posted to the account listed as the primary.

JBlaze

Jason Clemons
Former Team Member 2009 - 2012

Robert.



lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

JBlaze

Jason Clemons
Former Team Member 2009 - 2012

Mbravo

Thanks for increase my knowledge ,it such a wonderful idea for sharing.

MarcusJ

Can someone please explain how I can use the following from  or something similar to place the Google +1 button along side the Twitter and Facebook icons?  I have tried myself, but can't get it to work.   :-\

Also as a side note.  My forum is set to a fixed width of 1024px.  Any title with more than a few words causes the twitter button to vanish, but the Facebook like button remains.



if ($message['id'] == $context['topic_first_message'] )
{
echo '<g:plusone href="' . $scripturl . '?topic=' . $context['current_topic'] . '" size="small"></g:plusone>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';
}

      



8hoursale

I have SMF 1.1 and the Display Template looks a little different than this one does. Can this code be modified to work with 1.1?

Thank you!

aelmiger

Hello friend, thank you very much for any modification, but it happens that when I give a twitter, will not be adding the counter. How I can do to make this go adding the twitter done?

Thank you very much for the help

Sorry for my bad english

mijo

How to modify to make this work in 1.1.14 or is there some ready TIP to add Facebook Like button in 1.1.4..

Monkey50

how do i find the folder and how wouold i add google plus with that.

Adrek

Nice tip, but i have one OT question. What's the name of this theme (from screenshot from first post) ?
Polskie wsparcie SMF na simplemachines.org

the simplest solution is most likely the right one

JBlaze

Quote from: ph4ntom on August 05, 2011, 06:24:16 AM
Nice tip, but i have one OT question. What's the name of this theme (from screenshot from first post) ?
It's a modified version of Dziner's Inferno theme.

Jason Clemons
Former Team Member 2009 - 2012


globalwalyy

hello thanks for this script, but i immediately i did this it destroy everything i have to rest it back pls help me out i think am lost somewhere

Advertisement: