Apr 282011

Last time, we created buttons for bookmarking, permalinking, mail forwarding, and printing. However, these days, your website can not be complete without some sort of social media integration. In this article we add page-specific buttons for LinkedIn, Twitter, and Facebook to our site. Next time, we round up by setting up three general social media buttons.

At the right, you see the three buttons we will be building. As with the buttons we created before, the most important thing is the localization of the buttons. That means that the functionality is specific for the current page. So, just like the bookmarking, permalinking, mail forwarding, and printing buttons, the source code will contain (PHP) variables for the current page title and link.

Twitter Button

Let’s start with the Twitter button. Here is what the PHP source code looks like:

<!-- Twitter button -->
<a href="http://twitter.com/share?url=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"]))); ?>&amp;via=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_site_twitter_account"]))); ?>&amp;text=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_title"]))); ?>&amp;lang=en" target="_blank">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_button_twitter-20x20.png"); ?>" width="20" height="20" alt="<?php echo (gp_display_core_text2html (_("Share on Twitter"))); ?>" title="<?php echo (gp_display_core_text2html (_("Share on Twitter"))); ?>" />

And here is the HTML code this source snippet results in:

<!-- Twitter button -->
<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.offerman.com%2F&amp;via=a_offerman&amp;text=Offerman+Consulting+-+Adrian+%28Aad%29+Offerman&amp;lang=en" target="_blank">
<img class="button" src="/portal/graphics/design/oc_button_twitter-20x20.png" width="20" height="20" alt="Share on Twitter" title="Share on Twitter" />

As you can see, this is actually nothing more than a simple linked image. The trick is in the creation of the target URL. Next to the page title and link (in the variables $GLOBALS[“gp_page_title”] and “http://” . $GLOBALS[“gp_session_website”] . $GLOBALS[“gp_page_url”], respectively), it contains the name of your Twitter account id  (in the $GLOBALS[“gp_site_twitter_account”] variable) in the via parameter.

Note: do not forget to urlencode your page link and the other variables (using the PHP function urlencode) when including it in the URL.

Here is the result when clicking the newly created button:

Facebook Button

On to the Facebook Button. The PHP source code is similar to that for the Twitter button:

<!-- Facebook button -->
<a href="http://www.facebook.com/sharer.php?t=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_title"]))); ?>&amp;u=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"]))); ?>" target="_blank">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_button_facebook-20x20.png"); ?>" width="20" height="20" alt="<?php echo (gp_display_core_text2html (_("Share on Facebook"))); ?>" title="<?php echo (gp_display_core_text2html (_("Share on Facebook"))); ?>" />

And here is the resulting HTML code for this button:

<!-- Facebook button -->
<a href="http://www.facebook.com/sharer.php?t=Offerman+Consulting+-+Adrian+%28Aad%29+Offerman&amp;u=http%3A%2F%2Fwww.offerman.com%2F" target="_blank">
<img class="button" src="/portal/graphics/design/oc_button_facebook-20x20.png" width="20" height="20" alt="Share on Facebook" title="Share on Facebook" />

Clicking this button, opens a window where the current page can be posted to your Facebook profile.

LinkedIn Button

The last of our social media trio is the LinkedIn button. Here is the PHP source code:

<!-- LinkedIn button -->
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;title=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_title"]))); ?>&amp;summary=<?php echo (gp_display_core_text2html (gp_display_core_text2url ($GLOBALS["gp_page_summary"]))); ?>&amp;source=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"]))); ?>&amp;url=<?php echo (gp_display_core_text2html (gp_display_core_text2url ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"]))); ?>" target="_blank">
<img src="<?php echo (GP_PLATFORM_GRAPHICS . "design/" . $GLOBALS["gp_site_prefix"] . "_button_linkedin-20x20.png"); ?>" width="20" height="20" alt="<?php echo (gp_display_core_text2html (_("Share on LinkedIn"))); ?>" title="<?php echo (gp_display_core_text2html (_("Share on LinkedIn"))); ?>" />

And here is the resulting HTML code:

<!-- LinkedIn button -->
<a href="http://www.linkedin.com/shareArticle?mini=true&amp;title=Offerman+Consulting+-+Adrian+%28Aad%29+Offerman&amp;summary=Journalism%2C+New+Media%2C+Online+Publishing%2C+Internet+Portals%2C+Linux+and+Open+Source+Software&amp;source=http%3A%2F%2Fwww.offerman.com&amp;url=http%3A%2F%2Fwww.offerman.com%2F" target="_blank">
<img class="button" src="/portal/graphics/design/oc_button_linkedin-20x20.png" width="20" height="20" alt="Share on LinkedIn" title="Share on LinkedIn" />

Here, a new PHP variable is introduced: $GLOBALS[“gp_page_summary”]. It contains the summary of the page, basically the chapeau of an article or a short description.

Clicking the new button pops up a new window allowing you to share this page through LinkedIn.

  One Response to “Adding LinkedIn, Twitter, and Facebook Buttons to Your Site, Part I”

  1. Thank you so much you help me very much with the codes..
    See you!!

Leave a Reply