Social media sharing buttons

(Ryan Archer) #1

I'm looking for a way of retrospectively adding some social media sharing buttons to a large website with many, many pages. My goal is to have intelligent and dynamic code 'scrape' the particular page for content and then share it through social media when the social media button/icon is selected. Much like how easy it is if you install a social media buttons plugin into Wordpress, it seems to integrate smoothly and know what content to share from what page.

 

I'm developing our own set of responsive social media buttons and then I come across the issue of putting the content to be shared in the actual URL of the button itself - for every page :o

 

I've looked into the 'AddThis' service and it seems neat but still seems to require hand coding of the content to be shared into the data attribute of the parent div tag. Appears to me that this solution requires a developer to hand code and customise the social media sharing buttons for each page in the website. I want to use a nested asset in the design and do this dynamically.

 

My proposal would be to make some unique social media metadata in the schema and then use replacement keywords to feed that metadata content to the social media button links (obviously with variations because not all social media services work the same way).

 

Is this a good approach or is there a much more obvious and easier way to do this?

(Nick Papadatos) #2

Using unique social media metadata and using replacement keywords to feed that metadata is what we used and what I would recommend.

Definitely the right approach.

(Bart Banda) #3

I've always used Add This and proper social media metadata tags (http://secretsaucehq.com/mega-tags/) and has worked great. 

(Ryan Archer) #4

Handy resource Bart, thanks. Was tempted to use the 'AddThis' service but this time around I'm try to limit reliance on third party sources. I made some responsive social media buttons and put them into a nested asset as a design customisation.

 

I wanted to make a specific metadata schema up for the Open Graph but I am having issues. Now here’s the problem – I’m trying to create a new metadata tag in the ‘Open Graph’ section called og:title, as it is obviously needed, BUT the Field Name box won’t accept the colon! It just deletes it as soon as I insert it. All I can put in the text field is numbers, letters and an underscore - no other special characters.

 

So...I created a standard page (with the OG metadata in it) and put it in my utilities folder (without web path) as a 'helper' html code file. So I have nested it into the design file as another customisation, so it gets put into only the pages that have the social media sharing options specified. It's a workaround that should work but due to my testing site being behind a firewall, I don't know for sure as Facebook and Google+ aren't able to interrogate the page.

 

I used keyword replacements to specify the content in these OG metadata tags. keywords like %asset_name% and %asset_url%. Also using metadata keyword replacements like %asset_metadata_Description%.

 

For the social media that does not use Open Graph, the sharing happens in the URL link and needs to be encoded. So I made another standard page with the HTML code for the social media buttons and linked styles. Applied global keywords to the social media URLs like this:

<a href="https://twitter.com/intent/tweet?text=State%20Library%20of%20Queensland%3A%20%globals_asset_name%%20-%20%globals_asset_url%" class="popup">

and this:

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=%globals_asset_url%&amp;title=%globals_asset_name%&amp;summary=%globals_asset_metadata_DC.Description%" class="popup">

Which pull the necessary data into the URL string at runtime. Have tested it out and it appears to work Ok. Just need to do a live website test for the Open Graph sharing.

 

This method allows us to retrospectively apply social media sharing buttons across hundreds (if not thousands) of pages of content. The metadata, page titles and URLs already exist, so it applies that data to the share protocol.