Share your content on social media
When you share content from Drupal in social media, the logo for Lund University is often displayed in the sharing as standard. But it is possible to change so that another image is retrieved.
Social media uses so-called open graph tags to determine how to display content shared on their platforms. For this to work, you need to go through the following steps:
- Upload the image you want to use in Drupal.
- Find out the address of the image itself (the url).
- Enter this url in the open graph tag "Image URL" belonging to your article, subpage etc.
- Make sure that the change has taken effect using the Open Graph service.
- Share the article on optional social media. Now the picture should be included.
- If you have previously shared the article and want to update the image in the sharing, you can use, for example, Facebook Sharing Debugger or Twitter Card Vaildator.
Upload the image to Drupal
The image must first be uploaded to Drupal. If you have already tried to share a finished article or image and discovered that only the university logo is included in the sharing, then the image is already in place.
Otherwise, go to Content> Files and Media> Add files and media and then click on Image.
Then follow the usual steps you use to upload images in Drupal.
This can also be an option if you have a specific image that you want to use specifically for sharing on social media, but which is not included in the article itself.
Keep in mind that the image must be the correct size for the social media you want to share. For Facebook, at least 1200x727 px applies.
Check the address of the image
You can find the URL of an individual image on your website by right-clicking on the image in your browser and then selecting "Copy Image Location" (or equivalent depending on the browser).
If the image is not published, you can find the correct url for the image by going to Content > Files and media > List all media. Click on the file name to bring up the image. Then right-click on the image in your browser and select "Copy Image Location" (or equivalent depending on the browser).
It will be a link in the style of: https://www.lu.se/drimage/1920/0/24852/33597363-people-are-sick-ami-acu…
Feel free to try entering the url of the image in your browser to make sure that it really leads to the image you intended.
Update open graph tags
The settings for the open graph tags can be found in the administration interface under the tab "Meta tags", in the column to the right in the editing mode for an article or page.
The meta tags are divided into three tabs: Basic tags, Advanced tags and Open graph. Open "Open graph".
It is the field called "Image URL" that determines which images are displayed on the platforms. Make sure you are really under "Open graph".
When you create, for example, a new page or article, the URL http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png is entered there automatically. You are free to change this.
Paste the url you copied in the previous step into the "Image URL" field. Save.
In order for images to be displayed on Twitter, you must instead fill in the image's URL in the field "Image" (which you will also find under the "Open Graph" settings)
Review open graph tags
After saving, it can normally take a while before the change takes effect. With the help of the Open Graph service, you can enter the url into the web page that you plan to share on social media, and there see which open graph tags are relevant.
Use it to see that http://www.lu.se/sites/www.lu.se/files/lu-logo-280x280px.png is replaced with the image you specified.
Open Graph is a smoother alternative to manually entering and reviewing the page's source code. You who are used to this procedure can of course do it, but keep in mind that it is what the code looks like for an external visitor that determines what, for example, Facebook and Twitter "see", so you must be logged out of Drupal (or more easily by open the page/article in a private browser window).
Share an article with image
Share the article on, for example, Facebook or Twitter in the usual way.
Now the updates from the Open graph tags should keep up with what you could see in Open Graph Check.
Facebook and Twitter also have their own tools where you can check how their platforms interpret the information you have entered:
You can use these to ensure that each service reads about the information from your article and includes the new image url that you entered in the Open graph tags.
In the Facebook Sharing Debugger, enter the address of the article you plan to share and click on Debug. You can then get Facebook to update the share by clicking Scrape again. It also shows when the last update was made.
In Twitter Card Validator, enter the address of the article and click on Preview card to see how Twitter perceives your sharing.
If you want to go back to the web page and change again in the open graph tags, it can take longer for the cache and changes to take effect.
If you have any questions, please contact Servicedesk.
E-mail: servicedesk [at] lu [dot] se
Always enter the URL of the website or page to which the case concerns.