Adding social media share links to a concrete5 website
If you're running a concrete5 based website where you post blog posts, news items, events, or any kind of content where you'd like visitors to share your content on social networks, it's a great idea to include some 'share' links/buttons. Here's how to add some basic links in concrete5.
Although there are several third-party sharing buttons you can integrate into a website as well as more complex button scripts for each social network, such buttons are often not able to be styled to match your site and are perhaps a little overkill. My preference is to simply create some static sharing links, utilising an icon font or some retina-ready icons.
Even if visitors don't use the buttons directly to share your content (perhaps more tech savvy visitors will just cut and paste your URL), such buttons can act as a visual reminder that you'd like your content shared.
In concrete5 specifically, I also prefer to hard-code such links directly onto a page type. Fortunately it's only a few lines of code to integrate such links, automatically populating them with the current page's URL and title.
Adding basic share links
First, we need to fetch the current page object, fetch the current page URL, page title and description. So in your custom page type, add in the following code (anywhere before you plan to output the links):
<?php
Loader::helper('navigation');
$currentPage = Page::getCurrentPage();
$url = urlencode(NavigationHelper::getLinkToCollection($currentPage, true));
$title = urlencode($c->getCollectionName());
$desc = urlencode($c->getCollectionDescription());
?>
The important part of using this information from the page is that we use the php function urlencode to appropriately escape it for placing into the variable of a link. Once we have this on the page, we can simply output some static links for each of the social networks:
<ul class="sharelinks">
<li><a href="https://www.facebook.com/sharer.php?u=<?php echo $url; ?>" title="Share on Facebook">Facebook</a></li>
<li><a href="https://twitter.com/intent/tweet?url=<?php echo $url; ?>&text=<?php echo $title; ?>" title="Tweet this page">Twitter</a></li>
<li><a href="https://plus.google.com/share?url=<?php echo $url; ?>" title="Share on Google+">Google+</a></li>
<li><a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $url; ?>&title=<?php echo $title; ?>&summary=<?php echo $desc;?>" title="Share on LinkenIn">LinkedIn</a></li>
<li><a href="https://www.tumblr.com/share/link?url=<?php echo $url; ?>" title="Share on Tumblr">Share on Tumblr</a></li>
<li><a href="http://del.icio.us/post?url=<?php echo $url; ?>" title="Share on Delicious">Delicious</a></li>
</ul>
Other social networks tend to follow the same pattern, it's just a matter of finding some documentation about their share link and taking note of the parameters they ask for.
You'll end up with some basic links on the page like the following:
Sharing media (for networks like Pinterest)
The examples above have been where you are sharing the URL of the current page, but Pinterest for example is a network where you directly share an image, not just a URL - so we need to handle this slightly differently.
In this case we need to select an actual image to share, which for galleries or portfolios is often available as a custom page attribute. What we need is some additional code to fetch the page's image attribute, resize it to something appropriate and grab it's url:
<?php
$ih = Loader::helper('image');
$img = $c->getAttribute('thumbnail');
$pageimage = $ih->getThumbnail($img, 750, 9999, false);
$imageurl = urlencode(BASE_URL . DIR_REL . $pageimage->src);
?>
Then for Pinterest, the share link code would look like this:
<a href="https://pinterest.com/pin/create/button/?url=<?php echo $url; ?>&media=<?php echo $imageurl; ?>&description=<?php echo $title; ?>">Share on Pinterest</a>
The links demoed above are pretty boring, but from here it's on a matter of replacing the text links with images or font icons and styling as per any other content on your site, for example:
The benefit of using a icon font for your buttons is that you can dynamically adjust the appearance depending on the screen size - you might enlarge the buttons for mobile devices for example. Some sites simply elect to style up the words with a coloured background, or to look like buttons, or a combo with text and an icon.
(example of plain text styling of social share links via http://cferdinandi.github.io/social-sharing/)
Socialicious is a handy web font for creating such icons, or you could use a web font generator like Fontello to hand-pick the icons you need.
Opening links in a popup window
These kind of share links aren't really designed to be directly traversed - social networks envisage these share pages to be opened in dialogs or small popups. At the very least, these links should be opened in a new tab/window, so we aren't navigating away from your site.
An easy way to open this in a pop up window is to use a few lines of jQuery. Add the following to your site's custom javascript (or at the bottom of your page in some <script> tags):
$(document).ready(function() {
$('.sharelinks a').click(function(){
window.open(this.href, "Share", "width=550, height=450");
return false;
});
});
I've added the above code to this page so the example links shown earlier can be tested to see this in action.
We've recently added share links like these to the recently updated Pink Envy website, where you can see these links in the various wedding stationery galleries.
-Ryan