How to link my web page to social networking sites - html

I have designed my Web page using HTML5 in dreamweaver and in that I want to link my web page with social networking sites (Facebook, twitter and Linkedin).
Please tell me how to link with this and what are the plugins used to link Social Networking sites.

Facebook's Like Button:
https://developers.facebook.com/docs/plugins/like-button/
Twitter's Tweet Button:
https://dev.twitter.com/docs/tweet-button
Google+'s +1 Button:
https://developers.google.com/+/web/+1button/
AddThis is a nice way to include social buttons to your site:
https://www.addthis.com/get/sharing

you can just show social networking icon images and give below path as a href
Facebook : http://www.facebook.com/pages/UR PAGE NAME
twitter : https://twitter.com/#!/UR PAGE NAME
Google+ : https://plus.google.com/UR PROFILE NO.
Note: first open your social web page in browser and check the url what is provided and then copy paste that url in your social site image

Related

How can I host an image on a React website for a thumbnail preview that isn't displayed on the site itself?

I am trying to upload an image to my React website so that the image can be used as the thumbnail preview when it is posted to social media. All of the images on my website are too high a resolution to be used. I want to have the website host images that suit a thumbnail display so that they can be linked in the meta data, but not have them shown on the page itself.
What would be the best way to go about this? And how would I get the image URL so that it can be linked as the preview image in the meta data in index.html?
I have tried hosting the thumbnail images on external sites and linking in and they are not loading, so it seems to work best when kept on the same website.
For those interested, the website is https://doe.games and I am testing the meta data with https://metatags.io/ The image preview currently works for Facebook and Twitter, but not WhatsApp.
Thanks!

embed my website in whatsapp chat like youtube link share

I want to show my website content in picture in picture tab in whatsapp as like youtube.
when we share a youtube link in whatsapp chat, it will send as a preview and when anyone click on that , it will open a small window (picture in picture) inside whatsapp & show an iframe of youtube website & play it as same as in youtube.
I want this type of functionality for my website.
what can i do for this, i used open graph in meta tags but it only shows image preview on link sharing, it will not open a small popup for my website as it does for youtube.

Website share on linkedin meta text not showing proper but when website link share on whatsapp and facebook it show proper

My Website share on linkedin meta text not showing proper but when website link share on whatsapp and facebook it show proper
linked in image when i share my website on it

Facebook page opens in browser instead of mobile app

I have added social icons on a website and added link of the business page like following:
<ul>
<li>Facebook</a></li>
<li>Twitter</a></li>
<li>Youtube</li>
</ul>
When I click on the twitter and youtube links through mobile device, it opens on the respective application. But facebook opens on it's mobile site m.facebook.com/pagename.
I want to open the facebook link on it's mobile app as well if user clicks the facebook link from mobile device. Kindly, let me know how can I achieve this?
Facebooks has a separate mobile url, it is called like this:
http://m.facebook.com/pagename/

How to add a Facebook share button that shares specific image from web page?

I am trying to add a Facebook share button to an interactive page I am working on. On this web page users can manipulate a customizable image by selecting different colors to appear on the image. I'd like to know if there is any way I can add a Facebook share button that shares their finalized image.
The web page is a PHTML file and I have successfully added a plain Facebook share button to the page that just shares a link to the web page.
Thanks in advance!
Update the Open Graph meta tag with the link of your final image and when the user Share the page on Facebook, the final image will be displayed as a thumbnail.
<meta property="og:image" content="http://yoursite.com/images/final.jpg" />