Show source website when sharing a link on Facebook? - html

I'm a manager of a page on Facebook and now I'm building a site for this page. To be honest I'm way too new to web-developing to be doing such a site, but I would like to try anyway.
My question is, when I see my friend shares a link (from BuzzFeed for example), I would see something like this
I believe that to change the thumbnail, the title and the description you would have to edit the meta tag of the html files (please correct me if I'm wrong).
So I just want to know how the source website (circled red in the picture) can be displayed through the shared links.
P/S: A side-question, if I want to learn more about building such a "social" site, where can I read more about it and what frameworks should I look into, thanks alot !

Related

HTML5 hyper links between two pages

I'm studying HTML5 and i need to create a hyperlink from on page to an id location on the second one.
Both HTML files are in the same folder.
What I tried so far is here:
World Wide Web overview
World wide web overview
None of these worked for me so far.
I tried looking for answers online and didn't find anything related.
I could try to find the needed code by looking in to an existing code of a page with the same function that I'm looking for, but I'm not familiar with a page like that while looking for a page on the web is impractical.
When you want to link to a specific id location on a page, you need to put it after the URL like so:
World Wide Web overview
The # part indicates to the browser that this is an id of an anchor on the index.html page. This anchor would look like this:
Some Text
Hope this helps!

Is it possible to integrate a Facebook page's "recommendations box" into a website?

I am not talking about this thing that shows related pages/links, I'm talking about the box that shows up on Pages:
I can't find any information about it on Facebook - all that comes up is the "Recommendations Box" linked above. In fact the box recently disappeared and we had to follow some convoluted method to make it appear again (add an address and make sure the map is displayed).
We would like to display the recommendations on the testimonials page on our site. Is there any method to do this?
No, there is no social plugin which displays this information, nor is there an API which returns those recommendations

Embed a banner linking to another site

What I need to do is add a banner/icon to a page that is says people are a part of our organization. Kind of like the icons at the bottom of this website, the peer1 hosting one or the cc-wiki one.
I however will have my own link and image, but I was wondering if someone can help me with some code that can do this. Thanks a lot!
Edit:
Okay let me rephrase this since it was unclear the first time
I want to be able to add a code snippet that people can add to their website, that will present a banner for a "Parent" site. This banner will link back to that site, and we would be able to gather statistics of who is linking to our site as well as how often. Is this possible with simple or tags.
I know some HTML, but my main languages are Java, C Sharp, and Objective C, so web stuff is definitely not my forte. My boss just came up to me and asked me to do this, and I truly do not know how. Thanks for any help!
You could always use something like:
<a href='http://parentsite.com/default.aspx?id=[the id of the sub-site]'>
<img src='http://parentsite.com/images/image.aspx?id=[the id of the sub-site]' />
</a>
That would create a link to the parent site, and render the web page as an image. IF you then put an img tag inside the web page then it would render as the image on the sub-site and you could also log a hit for that site. Putting the id on both means that, when the img tag loads, you can record the number of times that users have loaded any page with that image on it, and you can record the number of times that users click the link.
This may not be the most efficient way of doing this, but it is one way.
Something like this?
<img src="your_image" />

How should i structure the code so Facebook and Google+ fetch the right elements when someone shares an url?

I was wondering which elements are fetched when an user shares an url on Facebook or Google+...
For example: how can i make sure the description of the post will be the description i want to be shared and the image will be the image i want to be shared?
Title is pretty obvious, so i skipped that.
Facebook suggests the opengraph protocol: http://ogp.me
It works reliable and can be checked with the facebook url linter http://developers.facebook.com/tools/lint/
Funny, I just wrote a blog post about this this week. It seems to me that there's no reliable way of knowing how either social network site will parse your web page to get the "status" version of it. Not only does each site do it differently (i.e. FB, vs. linkedin vs. G+), but they're liable to change it at a whim.
So currently the short answer is that you can't know this for sure. You have to reverse engineer each social network site's behavior and hope it doesn't change too often. That is until the industry smartens up and decides on some markup to convey, for example, which image form a page is considered the cardinal "share" image, and so on.

How to get Facebook like button to add a website and add the user to our Facebook page

I've just set up a new website at http://www.elitefightkit.co.nz and we also have a Facebook page which I don't have the url to hand at the moment (but it's called Elite Fight Kit). I want to add Facebook like buttons to my website. I can understand how to add them for product pages but I want to have a 'join us on facebook' button at the base of the page in a footer I'm producing so visitors can be added to the list of people on our Facebook page. We're growing a nice group of people over there.
I've looked into the Facebook like button and it seems to suggest that when user clicks it (if configured correctly) a feed item will be added to the users profile to say they like my website and provide a link back to the site. It seems I either have them like the website or like the Facebook group. That's great BUT I wondered if there was a way to have them click the like button, add the link to the website but ALSO join them to our Facebook page. Is there a way or will that be two seperate buttons?
This article was helpful when looking into the Facebook like button: http://www.webmonkey.com/2010/04/adding-facebook-like-buttons-to-your-site-is-damn-easy/ it pretty much got me rolling, although the Facebook developer page wasn't too hard to get my head around either. :)
Hope someone has some experience with this that can throw some light on it for me. Thanks in advance!
I've looked into a similar request before but decided - given the current social plugin documentation - that it could only be done with two separate buttons. My advice would be to make the Like button on your website point to your Facebook page, with a prominent link back to your website from there. Without wanting to state the obvious, any wall posts that then appear for people liking your page will effectively advertise both!