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:
* 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
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 :
| : | 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
You can comment without logging in