Webmodelling Home > Social Media > Copy&Paste buttons

Social Media - blog & website integration

This document is an overview of social media channels and how to integrate them into your blog or website.

Old as I am with family, own company and living in a foreign country, I never really joined the social media movement and also found myself not to care. However, social media seems increasingly important, I can barely view a blog or a web page that does not ask me to either tweet about it, recommend it on Facebook, follow or become a fan or share it on a growing array of social media channels.

I decided to get on the horse and start branding some of my web initiatives across major channels, just to get an introductory experience. So I dusted off my old Facebook account, registered with Twitter & LinkedIn and then I made this page as a "hello world" investigation into the technical how to.

Main Social Media Channels like Facebook, Twitter, LinkedIn etc. offers both easy copy&paste widgets as well as more comprehensive API's. In the table below you can grab the wellknown buttons of the channels you are interested in.

Social Media Widgets - easy copy&paste

Social Media Channels table:

Channel	Facebook	Twitter	LinkedIn	Digg
Homepage	http://facebook.com	http://twitter.com	http://linkedin.com	http://digg.com
Button - this page	(Grab the official Facebook like button*)	Tweet (Grab the official tweet button**)	(Grab the official LinkedIn share button***)	Integrating social media with blogs & websites - technical howto's and examples for copy&paste widgets and for API's (Grab the official Digg this button****)
Button - follow me	(Grab the official Facebook profile button)	Follow me on twitter (Grab the official Twitter follow me button)	(Grab the official LinkedIn profile button)	(Grab the official Digg follow me button)
API	http://developers.facebook.com/docs	http://dev.twitter.com/	http://developer.linkedin.com	http://developers.digg.com/
Tips	Top 10 Facebook pages	Tips for getting followers	How to increase position strength on LinkedIn Even more tips to position strength

* The Facebook Like button cannot show zero count in horizontal (button_count) layout. If absolutely necessary to show a zero count in horizontal layout, then you need to use javascript to manipulate the DOM injection from Facebook.
** Note that the tweet count DOES NOT WORK if you don't manually insert a data-url attribute. For this page it is data-url="http://webmodelling.com/webbits/socialmedia" (if the url does not contain a directory - here socialmedia - then the attribute value must end with a slash) UPDATE: it seems twitter now include data-url in the auto generated code, however the slash problem persist
*** Add the data-showZero="true" attribute to force the LinkedIn button to show the count bubble also then there are zero counts (relevant only in horizontal (right) layout, since in vertical (top) layout, the LinkedIn button always shows the count bubble). Also the count value itself does not seem stable or maybe a click on the button will expire after some time.
**** Be sure to locate the Digg script tag AFTER your Digg this button, otherwise it will not work (the Digg script does not wait for the DOM to finish before searching for Digg buttons, so if the browser have not yet created the Digg this DOM objects before the Digg script executes, the Digg script cannot find the buttons)

Related Links

• Social Media Icons - customize appearence
• 9 ways to use social media on your website

No promises, but I hope to update the above table with more channels and an extra field showing then the channel information was added, so you can see how up to date, the information is. You are welcome to help & critisize using the comments below.

Twitter

• Tweet :

  • Tweet

    :

    No data count

    :

    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="none" data-url="http://menulab.com" data-text=" ">Tweet</a><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 = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>

  • :

    Custom button

    :

    <a href="https://twitter.com/share?text=Check%20Out%20ASP.NET%20controls%20@&url=http://menulab.com" target="_blank"><img src="<%=ResolveUrl("_images/_frontpage_greyline/social_media_twitter_reg.png") %>" alt="" onmouseover="this.src='<%=ResolveUrl("~/_images/_frontpage_greyline/social_media_twitter_hot.png") %>'" onmouseout="this.src='<%=ResolveUrl("_images/_frontpage_greyline/social_media_twitter_reg.png") %>'" style="border:0;" /></a>

Google+

Google+ developer
Google+ buttons : (Google+ plugin overview)

• Google+ button : A button that on a webpage allows a user to recommend that webpage to his google+ circles - share AND endorse.
  • :

    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="medium" href="http://menulab.com" annotation="none"></g:plusone>

• Google+ share button : A button that on a webpage allows a user to share that webpage with his google+ circles - share WITHOUT endorse.
• Google+ badge buttons :
  • Profile badge : A button that on a webpage allows a user to add your google+ profile to his circles.
  • Page bagde : A button that on a webpage allows a user to follow your google+ page.

The difference between the +1 and the share button I think is that +1 will increase the SERP value of a webpage while share will not (there are other differences).

Custom g+ button :

Comments